/*
 * WerQin canonical niche stylesheet.
 * The deprecated secondary niche stylesheet was removed after verification that it was a strict subset of this file.
 * Keep shared styling for all 15 branches in this file; branch colors are supplied via --werqin-primary.
 */

html {
    margin: 0;
    padding: 0;
}

body {
	outline: 0 none;
    color: #4a4a4a;
    font: 13px/18px SegoeUIRegular, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    border-top: solid 5px #306A92;
}
.container {
    position: relative;
	width: 980px;
	padding: 10px 0;
	margin-left: auto;
    margin-right: auto;
}
#home_container {
    background-color: #01a0ca;
    height: 370px;
    padding: 0;
}
/*#search_container {
    position:relative;
    float: left;
    height: 262px;
    width: 440px;
    margin: 0px 0px 0px 50px;
    background-color: #F0F0F0;
    background-image: linear-gradient(#D8D8D8, #F0F0F0);
}*/
.main_search {
    position: relative;
    float: right;
    min-height: 250px;
}
.main_image {
    position: relative;
    float: left;
}
#main_search_button {
    margin: 0px 0px 0px 15px;
}
#home-image-div {
    position: relative;
    float: right;
    width: 490px;
    height: 300px;
}
#info_container {
    position: absolute;
    float: right;
    width: 300px;
    height: 120px;
    left: 180px;
    bottom: 49px;
    background-color: #000000;
    opacity: 0.5;
}
#header {
    position: relative;
    width: 100%;
    height: 60px;
    /*/background-color: #4491C5;
    //background-image: url('../img/bg-header.png');
    //background-position: right;
    //background-repeat: no-repeat;
    //display: block;
    //clear: both;*/
}
#footer {
    position: relative;
    width: 100%;
    height: 20px;
}
#logo_div {
    position: relative;
    float: left;
    margin: 5px 5px 5px 5px;
}
#login_div {
    position: relative;
    float: right;
    margin: 5px 20px 5px 5px;
}
#register {
    position: relative;
    float: right;
    margin: 5px 5px 5px 5px;
}
#login {
    position: relative;
    float: right;
    margin: 5px 5px 5px 5px;
}
#introduction {
    position: relative;
    float: left;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    padding:3px 3px 3px 3px;
    width: 100%;
    height: 100px;
    overflow: scroll;
}
#profile {
    position: relative;
    float: left;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    padding:3px 3px 3px 3px;
    width: 100%;
    height: 200px;
    overflow: scroll;
}
#header_buttons {
    position: relative;
    float: right;
    margin: 5px 5px 5px 5px;
}
#default_header {
    position: relative;
    width: 980px;
    height: 118px;
    margin: 0px auto 0px auto;
}
#default_header #logo {
    position: relative;
    float: left;
    margin: 26px 0px 0px 0px;
    width: 87px;
    height: 70px;
}
#search_vacancy_info {
    position: relative;
    float: left;
    margin: 5px 5px 5px 5px;
}
#passport_photo {
    position: relative;
    margin: 5px 5px 5px 5px;
    display: block;
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
}
#search_vacancy_logo {
    position: relative;
    float: right;
    margin: 5px 5px 5px 5px;
    display: block;
    max-width: 70px;
    max-height: 70px;
    width: auto;
    height: auto;
}
#search_employee_photo {
    position: relative;
    float: right;
    margin: 5px 5px 5px 5px;
    display: block;
    max-width: 50px;
    max-height: 50px;
    width: auto;
    height: auto;
}
#top_vacancy_logo {
    position: relative;
    float: right;
    margin: 5px 5px 5px 5px;
    display: block;
    max-width: 70px;
    max-height: 70px;
    width: auto;
    height: auto;
}
#view_vacancy_logo {
    position: relative;
    float: left;
    margin: 5px 5px 5px 15px;
    display: block;
    max-width: 140px;
    max-height: 140px;
    width: auto;
    height: auto;
    border: 1px solid #333;
}
#view_title {
    position: relative;
    float: left;
    margin: 59px 0px 0px 20px;
    font-size: 22px;
    color: #428bca;
}
#apply_job {
    margin: 0px 0px 0px 10px;
    background-color: #428bca;
    width: 200px;
    height: 75px;
    font-size: 22px;
    color: #ffffff;
}
#return_vacancies {
    margin: 0px 0px 0px 10px;
    background-color: #428bca;
    width: 200px;
    height: 75px;
    font-size: 22px;
    color: #ffffff;
}
#mail_logo {
    max-width: 300px;
    max-height: 40px;
    width: auto;
    height: auto;
}
#top_title {
    font-size: 16px;
    color: #428bca;
}
#top_city {
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    display: block;
}
.top_vacancy {
    cursor: pointer;
}
#top_vacancy_gradient_1 {
    position: absolute;
    top: 120px;
    left: 20px;
    right: 20px;
    height: 70px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    -moz-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    pointer-events: none;
}
#top_vacancy_gradient_2 {
    position: absolute;
    top: 290px;
    left: 20px;
    right: 20px;
    height: 70px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    -moz-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    pointer-events: none;
}
#top_vacancy_gradient_3 {
    position: absolute;
    top: 460px;
    left: 20px;
    right: 20px;
    height: 70px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    -moz-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    pointer-events: none;
}
#top_vacancy_gradient_4 {
    position: absolute;
    top: 630px;
    left: 20px;
    right: 20px;
    height: 70px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    -moz-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    pointer-events: none;
}
#top_vacancy_gradient_5 {
    position: absolute;
    top: 800px;
    left: 20px;
    right: 20px;
    height: 70px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    -moz-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0, startColorstr='#00ffffff', endColorstr='#ffffffff');
    pointer-events: none;
}
.top_vacancy_panel {
    height: 150px;
    max-height: 150px;
    overflow: hidden;
}
#nothing_found_1 {
    font-size: 16px;
}
#nothing_found_2 {
    font-size: 16px;
    color: #428bca;
}
.search_vacancy {
    cursor: pointer;
}
#search_vacancy_title {
    font-size: 16px;
    color: #428bca;
}
#search_vacancy_expertise {
    width: 100%;
}
#search_vacancy_province {
    width: 100%;
}
#search_vacancy_words {
    width: 100%;
}
#search_employee_expertise {
    width: 100%;
}
#search_employee_education_level {
    width: 100%;
}
#search_employee_experience_option {
    width: 100%;
}
#search_employee_salary_option {
    width: 100%;
}
#search_employee_engagement_option {
    width: 100%;
}
#search_employee_province {
    width: 100%;
}
#company_logo {
    display: block;
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
}
#search_vacancy_intro {
    width: 100%;
    margin: 5px 5px 5px 5px;
}
#count_link:link {
    color: #ffffff;
}
#count_link:visited {
    color: #ffffff;
}
.preview_vacancy {
    cursor: pointer;
}
.edit_vacancy {
    cursor: pointer;
}
.delete_vacancy {
    cursor: pointer;
}
.remove_credit_option {
    cursor: pointer;
}
.view_applicant {
    cursor: pointer;
}
#add_education {
    cursor: pointer;
}
#remove_education {
    cursor: pointer;
}
#add_experience {
    cursor: pointer;
}
#remove_experience {
    cursor: pointer;
}
#forgot_password_link {
    margin: 0px 0px 0px 15px;
}
#default_header #divider {
    position: relative;
    float: left;
    margin: 26px 15px 0px 15px;
    width: 1px;
    height: 45px;
    background-color: #306A92;
}

#default_header #title {
    position: relative;
    float: left;
    margin: 24px 0px 0px 0px;
    color: White;
    height: 45px;
    font-size: 18px;
    font-family: 'ITCOfficinaSansBold' , Arial, Helvetica, sans-serif;
}

#default_header #description {
    position: relative;
    float: left;
    margin: 24px 0px 0px 15px;
    color: White;
    height: 45px;
    font-size: 9px;
    line-height: 14px;
}
#cart {
	position:relative; 
	float: right; 
	width: 300px;
	height: 118px;
}
#minibasket {
    position: relative;
    float: right;
    margin: 0px 0px 0px 0px;
    width: 300px;
    height: 30px;
    background-color: #306A92;
    color: White;
    font-size: 11px;
}

#minibasket a, #minibasket a:link, #minibasket a:visited, #minibasket a:hover {
    color: White;
    text-decoration: none;
}

#minibasket_icon {
    position: relative;
    float: left;
    margin: 5px 0px 0px 15px;
    width: 25px;
}

#minibasket_currency {
    position: relative;
    float: left;
    margin: 5px 0px 0px 15px;
    width: 25px;
}

#minibasket_count {
    position: relative;
    float: left;
    margin: 5px 0px 0px 15px;
    width: 100px;
}

#minibasket_total {
    position: relative;
    float: right;
    text-align: right;
    margin: 5px 20px 0px 15px;
}
#header_accountbox {
    position: relative;
    float: right;
    margin: 0px 0px 0px 0px;
    width: 300px;
    height: 35px;
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    color: White; 
	font-size: 11px;
	z-index: 99999999999;
}

#header_accountbox.loggedin {
    background: #45c335 url('../img/greengradient.png') repeat-x;
}

#header_accountbox.loggedout {
    background: #cc0000 url('../img/redgradient.png') repeat-x;
}

#header_accountbox a, 
#header_accountbox a:hover, 
#header_accountbox a:visited {
    text-decoration: none;
    color: #FFFFFF;
    outline: none;
}

.accountbox_welcome {
	position: relative; 
	float: left; 
	margin: 7px 0px 0px 15px; 
	max-width: 154px;
	overflow: hidden;
	height: 18px;
}

#header_accountbox_qmark {
    position: relative;
    float: left;
    margin: 10px 0px 0px 4px;
    padding: 1px;
    width: 10px;
    height: 11px;
    text-align: center;
    background-color: White;
    font-size: 10px;
    font-weight: bold;
    line-height: 11px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    cursor: pointer;
}

.loggedin #header_accountbox_qmark {
    color: #00cc00;
}

.loggedout #header_accountbox_qmark {
    color: #cc0000
}

.accountbox_actions {
    position: relative;
    float: right;
    margin: 7px 12px 0px 0px;
    text-align: right;
}

#header_accountbox_infobox {
    position: absolute;
    right: 0;
    top: 37px;
    margin: 5px 0px 0px 0px;
    width: 300px;
    line-height: 14px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 99999;
    display: none;
    -moz-box-shadow: 1px 1px 10px 0px #555;
    -webkit-box-shadow: 1px 1px 10px 0px #555;
    box-shadow: 1px 1px 10px 0px #555;
}

.loggedin #header_accountbox_infobox {
    background: #45c335;
}

.loggedout #header_accountbox_infobox {
    background: #cc0000;
}

#header_accountbox_infobox_arrow {
    position: relative; 
    width: 9px; 
    height: 5px; 
    margin-top: -5px; 
    margin-left: 102px;
    background-repeat: no-repeat;
}

.loggedin #header_accountbox_infobox_arrow {
    background-image: url('../img/greenarrowtop.png');
}

.loggedout #header_accountbox_infobox_arrow {
    background-image: url('../img/redarrowtop.png');
}

#header_accountbox_infobox_content {
    position: relative; 
    padding: 13px 13px 15px 13px; 
}

#default_footer h3 {
	margin: 10px 0 6px 0;
}

#footer_contact {
    background-position: 40px 15px;
    position: relative;
    float: left;
    width: 305px;
    height: 109px;
    background-image: url('../img/bg-contact-box.png');
    background-repeat: no-repeat;
}
input[type="text"] {
	border: 1px solid #333;
	padding: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
input {
	width: 300px;
}
input.price_text_input {
    width: 240px;
}
input.add_credit_amount {
    width: 35px;
}
input.radio {
    float: left;
    width: 35px;
    margin: 0px 0px 0px 30px;
}
input.checkbox {
    float: left;
    width: 35px;
    margin: 0px 0px 0px 30px;
}
label {
    float: left;
    margin: 2px 0px 0px 0px;
}
select {
	outline: 0 none;
	width: 300px;
	background: none;
	border: 1px solid #333;
	padding: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
input:focus {
	border: 1px solid #000;
}
span.notes {
	float: left;
	margin: 0 0 15px 0;
}
span#main_error {
	font-weight: bold;
	color: #ff2222;
	background: none;
	padding: 0 10px;
}
span.error {
	height: 28px;
	width: 28px;
	display: inline;
	margin: 0 5px;
}
div#buttons {
	width: 100%;
}
button#continue {
	background: #2BAA1F;
	color: #FFF;
	font-weight: bold;
	padding: 10px 12px;
	border: none;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin: 0;
	float: right;
	text-transform: uppercase;
}
button#change_details {
	margin: 0 10px 0 0;
	background: #CCC;
	color: #000;
	padding: 10px 12px;
	border: none;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	float: left;
}
button#cancel {
	float: left;
}
button#secure_payment {
	background: #2BAA1F;
	color: #FFF;
	font-weight: bold;
	padding: 10px 12px;
	border: none;
	float: right;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin: 0;
	text-transform: uppercase;
}
button {
	margin: 0 10px 0 0;
	background: #CCC;
	color: #000;
	padding: 10px 12px;
	border: none;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#default_footer {
	padding: 0;
	border-top: 2px solid #000000;
	width: 100%;
	float: left;
}
div.row {
	margin: 8px 0;
	padding: 0;
}
div.row span {
	padding-left: 15px;
}
div.panel-body {
	margin: 0;
	padding: 0;
}
#footer_contact .list {
	padding: 0;
	margin: 0;
	list-style-type: none;
	list-style-position: outside;
	list-style-image: none;
	float: left;
}
#footer_contact a:hover {
	display: block;
}
#footer_contact .list a {
	padding: 0;
	margin: 0;
	background-color: White;
	padding-right: 10px;
}

#footer_contact a.usa {
	position: absolute;
	top: 35px;
	left: 165px;
	width: 15px;
	height: 15px;
	display: block;
}

#footer_contact a.europe {
	position: absolute;
	top: 30px;
	left: 205px;
	width: 15px;
	height: 15px;
	display: block;
}

#footer_contact a.asia {
	position: absolute;
	top: 35px;
	left: 256px;
	width: 15px;
	height: 15px;
	display: block;
}

#footer_contact #tip_usa, #footer_contact #tip_europe, #footer_contact #tip_asia {
	position: absolute;
	width: 300px;
	height: 350px;
	top: -370px;
	left: 80px;
	padding: 10px;
	background-color: White;
	border: 1px solid #999;
	box-shadow: 0px 0px 10px #999;
	border-radius: 7px;
	z-index: 99999;
}

#footer_divider {
	position: relative; 
	float: left; 
	width: 1px; 
	height: 90px; 
	background-color: #c0c0c0;
    margin-right: 20px;
    margin-top: 10px;
}

#footer_links {
	position: relative; 
	float: left; 
	width: 380px; 
	height: 99px; 
	margin-top: 0px;
    margin-right: 10px;
}
#footer_links a {
	padding-right: 5px;
}
h3 {
    color: #000000;
    font-weight: bold;
    font-size: 12px;
}
#footer_twitter {
	position: relative; 
	float: right !important; 
	width: 120px; 
	height: 35px;
    margin-top: 10px;
}

/*--------------------------------------------------------------
	Responsive
--------------------------------------------------------------*/

/* Smartphone 320-468px  ----------- */
@media screen and (min-width: 240px) and (max-width : 468px) {
	#header {
		height: 98px;
	}
	button#secure_payment {
		float: right;
		width: 100%;
	}
	button#change_details {
		margin: 10px 0;
		width: 100%;
		float: right;
	}
	.container {
		padding: 10px 5px;
	}
	#logo img {
		height: 50px;
		width: 67px;
	}
	#default_header {
		width: 310px;
	}
	.container {
		width: 310px;
	}
	#footer_links {
		width: 310px;
	}
	#footer_divider {
		display: none;
	}
	#cart {
		width: 305px;
		height: 90px;
		float: none;
	}
	div.row {
		margin: 8px 0;
	}
	div.row input {
		width: 235px;
		margin: 0 4px;
	}
	div.row select {
		width: 235px;
		margin: 0 4px;
	}
	div.row span {
		padding-left: 8px;
	}
	div.col-sm-9 strong {
		padding-left: 8px;
	}
	#footer_twitter {
		margin: 0 0 10px;
	}
    div.row input.within {
        width: 200px;
        margin: 0px 4px;
    }
    div.row input.radio {
        float: left;
        width: 35px;
        margin: 0px 0px 0px 20px;
    }
    div.row input.checkbox {
        float: left;
        width: 35px;
        margin: 0px 0px 0px 20px;
    }
    div.row label {
        float: left;
        margin: 2px 0px 0px 0px;
    }
    .main_search {
        width: 100%;
        min-width: auto;
        min-height: auto;
    }
}

/* Smartphone 468-568px ----------- */
@media only screen and (min-width : 468px) and (max-width : 568px) {
	#header {
		height: 98px;
	}
	.container {
		padding: 10px 0;
	}
	#logo img {
		height: 50px;
		width: 67px;
	}
	#default_header {
		width: 440px;
	}
	.container {
		width: 440px;
	}
	#footer_links {
		width: 440px;
	}
	#footer_divider {
		display: none;
	}
	#cart {
		width: 440px;
		height: 90px;
		float: right;
	}
	div.row {
		margin: 8px 0;
	}
	div.row input {
		margin: 0 4px;
	}
	div.row select {
		margin: 0 4px;
	}
	div.row span {
		padding-left: 8px;
	}
	div.col-sm-9 strong {
		padding-left: 8px;
	}
	#footer_twitter {
		margin: 0 0 10px;
	}
    .main_search {
        width: 100%;
        min-width: auto;
        min-height: auto;
    }
}

/* Smartphone / iPhone 5 / 600x800 ----------- */
@media only screen and (min-width : 568px) and (max-width : 765px) {
	#header {
		height: 98px;
	}
	#minibasket {
		width: 250px;
	}
	#header_accountbox {
		width: 250px;
	}
	#cart {
		float:right !important;
		width: 250px !important;
	}
	.container {
		padding: 10px 0;
	}
	#logo img {
		height: 50px;
		width: 67px;
	}
	#default_header {
		width: 550px;
	}
	.container {
		width: 550px;
	}
	#footer_links {
		width: 550px;
	}
	#footer_divider {
		display: none;
	}
	div.row {
		margin: 8px 0;
	}
	div.row input {
		margin: 0 4px;
	}
	div.row select {
		margin: 0 4px;
	}
	div.row span {
		padding-left: 8px;
	}
	div.col-sm-9 strong {
		padding-left: 8px;
	}
	#footer_twitter {
		margin: 0 0 10px;
	}
    .main_search {
        width: 100%;
        min-width: auto;
        min-height: auto;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1000px) {
	#default_header {
		width: 768px;
	}
	.container {
		width: 768px;
	}
    .main_search {
        width: 100%;
        min-width: auto;
        min-height: auto;
    }
}

.vacancy-content,
.vacancy-content p,
.vacancy-content span,
.vacancy-content div,
.vacancy-content li {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6;
}

.vacancy-summary,
.vacancy-summary p,
.vacancy-summary span,
.vacancy-summary div,
.vacancy-summary strong,
.vacancy-summary em,
.vacancy-summary b,
.vacancy-summary i,
.vacancy-summary font {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45;
}
.vacancy-summary,
.vacancy-summary * {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}
.vacancy-city {
    font-size: 15px;
    line-height: 1.4;
}

/* ==========================================================
   Doelgroepnavigatie: zwevende marketingkaarten in de header
   ========================================================== */
.audience-navigation {
    position: relative;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
}

.audience-nav-item {
    position: relative;
    display: block;
}

.audience-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 17px;
    border: 1px solid #d0d5d8;
    border-radius: 4px;
    background: #eeeeee;
    color: #222222 !important;
    font-weight: 600;
    line-height: 36px;
    text-decoration: none !important;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.audience-nav-link:hover,
.audience-nav-link:focus,
.audience-nav-link.is-active {
    border-color: #008fb5;
    background: #01a0ca;
    box-shadow: 0 3px 10px rgba(0, 112, 145, .22);
    color: #ffffff !important;
    outline: none;
    transform: translateY(-1px);
}

.audience-hover-card {
    position: absolute;
    top: calc(100% + 13px);
    left: 0;
    z-index: 3000;
    width: 320px;
    padding: 18px 20px 17px;
    border: 1px solid #d7e0e5;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(26, 54, 70, .22);
    color: #37474f;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.audience-hover-card-right {
    right: 0;
    left: auto;
}

.audience-hover-card::before {
    position: absolute;
    top: -8px;
    left: 28px;
    width: 15px;
    height: 15px;
    border-top: 1px solid #d7e0e5;
    border-left: 1px solid #d7e0e5;
    background: #ffffff;
    content: "";
    transform: rotate(45deg);
}

.audience-hover-card-right::before {
    right: 28px;
    left: auto;
}

.audience-nav-item:hover .audience-hover-card,
.audience-nav-item:focus-within .audience-hover-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.audience-card-kicker {
    margin-bottom: 4px;
    color: #008fb5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.audience-hover-card strong {
    display: block;
    margin-bottom: 9px;
    color: #23495d;
    font-size: 17px;
    line-height: 1.25;
}

.audience-hover-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.audience-hover-card li {
    position: relative;
    margin-top: 6px;
    padding-left: 18px;
}

.audience-hover-card li::before {
    position: absolute;
    top: 1px;
    left: 0;
    color: #01a0ca;
    content: "\2713";
    font-weight: 700;
}

/* ==========================================================
   Openbare werkgeverspagina
   ========================================================== */
.employer-marketing-page {
    padding-top: 14px;
}

.employer-marketing-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 250px;
    padding: 38px 44px;
    border-radius: 7px;
    background: linear-gradient(120deg, #096f91 0%, #01a0ca 72%, #26b5d9 100%);
    box-shadow: 0 12px 28px rgba(16, 92, 118, .18);
    color: #ffffff;
}

.employer-marketing-copy {
    max-width: 570px;
}

.employer-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.employer-marketing-hero h1 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 32px;
    line-height: 1.18;
}

.employer-marketing-hero p {
    margin: 0;
    max-width: 550px;
    font-size: 17px;
    line-height: 1.55;
}

.employer-hero-proof {
    width: 245px;
    margin-left: 35px;
    padding: 8px 22px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 6px;
    background: rgba(255,255,255,.12);
}

.employer-hero-proof div {
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.22);
}

.employer-hero-proof div:last-child {
    border-bottom: 0;
}

.employer-hero-proof strong,
.employer-hero-proof span {
    display: block;
}

.employer-hero-proof strong {
    font-size: 16px;
}

.employer-hero-proof span {
    margin-top: 2px;
    color: rgba(255,255,255,.86);
}

.employer-benefits {
    padding: 38px 0 16px;
}

.employer-section-heading {
    margin-bottom: 22px;
    text-align: center;
}

.employer-section-heading span {
    color: #01a0ca;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.employer-section-heading h2 {
    margin: 7px 0 0;
    color: #274b5d;
    font-size: 25px;
}

.employer-benefit-card {
    min-height: 220px;
    padding: 25px 22px;
    border: 1px solid #dce4e8;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(39, 75, 93, .08);
    text-align: center;
}

.employer-benefit-card .glyphicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #e9f7fb;
    color: #0098bf;
    font-size: 25px;
}

.employer-benefit-card h3 {
    margin: 16px 0 9px;
    color: #274b5d;
    font-size: 19px;
}

.employer-benefit-card p {
    margin: 0;
    line-height: 1.55;
}

.employer-access-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 18px;
    padding: 23px 26px;
    border-left: 5px solid #01a0ca;
    border-radius: 4px;
    background: #f1f7f9;
}

.employer-access-panel h2 {
    margin: 0 0 5px;
    color: #274b5d;
    font-size: 21px;
}

.employer-access-panel p {
    margin: 0;
}

.employer-access-links {
    flex-shrink: 0;
    white-space: nowrap;
}

.employer-access-links .btn + .btn {
    margin-left: 7px;
}

@media (max-width: 767px) {
    .audience-navigation {
        gap: 7px;
    }

    .audience-nav-link {
        padding: 0 11px;
        font-size: 12px;
    }

    .audience-hover-card {
        display: none;
    }

    .employer-marketing-page {
        width: auto;
        padding: 10px 15px;
    }

    .employer-marketing-hero,
    .employer-access-panel {
        display: block;
    }

    .employer-marketing-hero {
        padding: 28px 22px;
    }

    .employer-marketing-hero h1 {
        font-size: 25px;
    }

    .employer-hero-proof {
        width: auto;
        margin: 24px 0 0;
    }

    .employer-benefit-card {
        min-height: 0;
        margin-bottom: 15px;
    }

    .employer-access-links {
        margin-top: 16px;
        white-space: normal;
    }
}

/* ===== Doelgroepkeuze in header ===== */
#header_buttons.audience-switch {
    display: flex;
    float: right;
    gap: 8px;
    margin: 5px 15px 5px 5px;
}
.audience-switch-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 15px;
    border: 1px solid #d5dce1;
    border-radius: 5px;
    background: #f4f6f7;
    color: #27343d;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.audience-switch-button:hover,
.audience-switch-button:focus {
    color: #1676b8;
    border-color: #8cc9e0;
    background: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.audience-switch-button.is-active,
.audience-switch-employee.is-active {
    background: #01a0ca;
    border-color: #01a0ca;
    color: #fff;
}
.audience-switch-employer {
    background: #fff;
}

/* ===== Publieke werkgeversomgeving ===== */
.employer-portal {
    padding-top: 20px;
}
.employer-portal-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 22px;
    padding: 26px 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #235d82 0%, #1679a9 100%);
    color: #fff;
}
.employer-portal-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .82;
}
.employer-portal-intro h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 27px;
    line-height: 1.2;
}
.employer-portal-intro p {
    max-width: 650px;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}
.employer-login-status {
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 18px;
    background: rgba(255,255,255,.13);
    white-space: nowrap;
}
.employer-login-status.is-logged-in {
    background: rgba(61,179,119,.28);
}
.employer-portal-layout {
    display: flex;
    align-items: stretch;
}
.employer-sidebar {
    height: 100%;
    min-height: 540px;
    overflow: hidden;
    border: 1px solid #dce3e7;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(29,59,77,.08);
}
.employer-sidebar-brand {
    padding: 22px 18px 18px;
    border-bottom: 1px solid #e5eaed;
    background: #f7f9fa;
}
.employer-sidebar-brand > .glyphicon {
    display: inline-block;
    margin-right: 7px;
    color: #01a0ca;
    font-size: 19px;
}
.employer-sidebar-brand strong {
    font-size: 16px;
}
.employer-sidebar-brand small {
    display: block;
    margin-top: 5px;
    color: #77838b;
}
.employer-sidebar .nav {
    padding: 10px;
}
.employer-sidebar .nav > li > a {
    margin-bottom: 3px;
    border-radius: 4px;
    color: #3e4b53;
}
.employer-sidebar .nav > li > a .glyphicon {
    width: 22px;
    color: #7c8a92;
}
.employer-sidebar .nav > li.active > a,
.employer-sidebar .nav > li.active > a:hover {
    background: #01a0ca;
    color: #fff;
}
.employer-sidebar .nav > li.active > a .glyphicon {
    color: #fff;
}
.employer-sidebar-account {
    margin: 5px 14px 16px;
    padding: 15px;
    border-radius: 5px;
    background: #f2f7f9;
}
.employer-sidebar-account p {
    margin-bottom: 10px;
    color: #596971;
}
.employer-dashboard-summary {
    margin-bottom: 16px;
    padding: 19px 22px;
    border: 1px solid #dce3e7;
    border-radius: 7px;
    background: #fff;
}
.employer-dashboard-summary .glyphicon {
    float: left;
    margin: 2px 13px 15px 0;
    color: #01a0ca;
    font-size: 25px;
}
.employer-dashboard-summary strong {
    display: block;
    color: #28353d;
    font-size: 17px;
}
.employer-dashboard-summary p {
    margin: 3px 0 0;
    color: #69777f;
}
.employer-feature-grid > div {
    margin-bottom: 20px;
}
.employer-feature-card {
    display: flex;
    min-height: 218px;
    height: 100%;
    padding: 22px;
    border: 1px solid #dce3e7;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(29,59,77,.06);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.employer-feature-card:hover {
    border-color: #a7d4e4;
    box-shadow: 0 7px 18px rgba(29,59,77,.10);
    transform: translateY(-2px);
}
.employer-feature-icon {
    flex: 0 0 46px;
    height: 46px;
    margin-right: 15px;
    border-radius: 50%;
    background: #e8f7fb;
    color: #018eb4;
    font-size: 19px;
    line-height: 46px;
    text-align: center;
}
.employer-feature-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.employer-feature-label {
    color: #018eb4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.employer-feature-card h2 {
    margin: 5px 0 9px;
    color: #28353d;
    font-size: 18px;
}
.employer-feature-card p {
    margin-bottom: 14px;
    color: #64727a;
    line-height: 1.55;
}
.employer-feature-link,
.employer-feature-locked {
    margin-top: auto;
    font-weight: 600;
}
.employer-feature-link {
    color: #1676b8;
}
.employer-feature-locked {
    color: #88949a;
    font-size: 12px;
}
.employer-portal-note {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 18px 22px;
    border-left: 4px solid #f2b632;
    border-radius: 5px;
    background: #fffaf0;
}
.employer-portal-note > .glyphicon {
    margin: 2px 13px 0 0;
    color: #e5a719;
    font-size: 21px;
}
.employer-portal-note h2 {
    margin: 0 0 4px;
    font-size: 17px;
}
.employer-portal-note p {
    margin: 0;
}
@media (max-width: 991px) {
    .employer-portal-layout { display: block; }
    .employer-sidebar { min-height: 0; margin-bottom: 20px; }
}
@media (max-width: 767px) {
    #header { height: auto; min-height: 105px; }
    #header_buttons.audience-switch { float: none; clear: both; justify-content: center; margin: 8px 0; }
    .audience-switch-button { padding: 8px 10px; font-size: 12px; }
    .employer-portal-intro { display: block; padding: 22px; }
    .employer-login-status { display: inline-block; margin-top: 14px; }
    .employer-portal-intro h1 { font-size: 23px; }
    .employer-feature-card { min-height: 0; }
}


/* Homepage stap: responsive doelgroepknoppen en uitgelichte topvacature */
#home_container {
    height: 315px;
}
.home-hero-row {
    padding-top: 8px;
}
.home-hero-row .main_search {
    float: none;
    width: 100%;
    min-height: 242px;
    margin-bottom: 0;
}
.featured-top-column {
    padding-left: 15px;
}
.featured-top-vacancy {
    display: block;
    height: 242px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.13);
    border-radius: 5px;
    background: #fff;
    color: #4a4a4a;
    box-shadow: 0 3px 12px rgba(24,72,94,.16);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.featured-top-vacancy:hover,
.featured-top-vacancy:focus {
    color: #4a4a4a;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(24,72,94,.22);
}
.featured-top-label {
    display: block;
    padding: 9px 14px;
    border-bottom: 1px solid #e5e5e5;
    background: linear-gradient(#fafafa, #eeeeee);
    color: #2f3b42;
    font-size: 14px;
    font-weight: 700;
}
.featured-top-label .glyphicon {
    margin-right: 5px;
    color: #edae1a;
}
.featured-top-content {
    display: flex;
    align-items: flex-start;
    height: 199px;
    padding: 17px 16px 14px;
}
.featured-top-copy {
    flex: 1 1 auto;
    min-width: 0;
}
.featured-top-copy h2 {
    margin: 0 0 5px;
    color: #2c82c9;
    font-size: 18px;
    line-height: 1.25;
}
.featured-top-city {
    margin: 0 0 12px;
}
.featured-top-intro {
    display: -webkit-box;
    max-height: 55px;
    margin: 0 0 13px;
    overflow: hidden;
    line-height: 18px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.featured-top-link {
    color: #1676b8;
    font-weight: 700;
}
.featured-top-logo-wrap {
    display: flex;
    flex: 0 0 105px;
    align-items: center;
    justify-content: center;
    height: 105px;
    margin-left: 15px;
    padding: 8px;
    border: 1px solid #edf0f2;
    border-radius: 4px;
    background: #fff;
}
.featured-top-logo-wrap img {
    display: block;
    max-width: 88px;
    max-height: 82px;
    width: auto;
    height: auto;
}
.featured-top-empty {
    height: 242px;
    padding: 30px;
}

/* De twee doelgroepknoppen blijven ook op smallere schermen netjes bij elkaar. */
#header_buttons.audience-switch {
    display: flex;
    gap: 8px;
    align-items: center;
}
.audience-switch-button {
    white-space: nowrap;
}

@media (max-width: 991px) {
    #home_container {
        height: auto;
        min-height: 0;
        padding: 8px 15px 18px;
    }
    .home-hero-row .main_search {
        min-height: 0;
        margin-bottom: 14px;
    }
    .featured-top-column {
        padding-left: 15px;
    }
    .featured-top-vacancy {
        height: auto;
        min-height: 205px;
    }
    .featured-top-content {
        height: auto;
        min-height: 160px;
    }
}

@media (max-width: 767px) {
    #header {
        display: flex;
        min-height: 128px;
        height: auto;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
    }
    #login_div {
        float: none;
        order: 1;
        width: 100%;
        margin: 4px 8px 2px;
        text-align: center;
    }
    #header_buttons.audience-switch {
        float: none;
        clear: both;
        order: 2;
        width: 100%;
        max-width: 430px;
        margin: 8px auto 10px;
        padding: 0 8px;
    }
    .audience-switch-button {
        display: flex;
        flex: 1 1 50%;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 10px 7px;
        font-size: 12px;
        text-align: center;
    }
    .featured-top-content {
        padding: 15px;
    }
    .featured-top-logo-wrap {
        flex-basis: 82px;
        width: 82px;
        height: 82px;
        margin-left: 10px;
    }
    .featured-top-logo-wrap img {
        max-width: 68px;
        max-height: 64px;
    }
}

@media (max-width: 420px) {
    .audience-switch-button .glyphicon {
        display: none;
    }
    .featured-top-copy h2 {
        font-size: 16px;
    }
    .featured-top-intro {
        -webkit-line-clamp: 2;
        max-height: 37px;
    }
}

/* Homepage verfijning: meer topvacatures direct zichtbaar */
@media (min-width: 992px) {
    #home_container {
        height: 292px;
    }
    .home-hero-row {
        padding-top: 6px;
    }
    .home-hero-row .main_search,
    .featured-top-vacancy {
        height: 222px;
        min-height: 222px;
    }
    .featured-top-content {
        height: 179px;
        padding: 13px 16px 11px;
    }
    .featured-top-city {
        margin-bottom: 8px;
    }
    .featured-top-intro {
        max-height: 37px;
        margin-bottom: 9px;
        -webkit-line-clamp: 2;
    }
}

/* Compactere kaarten geven ruimte voor een groter deel van de volgende topvacature. */
.top_vacancy_panel {
    position: relative;
    height: 130px;
    max-height: 130px;
    margin-bottom: 10px;
    overflow: hidden;
}
.top_vacancy_panel > .panel-body {
    padding: 10px 15px;
}
.top_vacancy_panel .top_introduction {
    position: relative;
    display: block;
    max-height: 48px;
    overflow: hidden;
    line-height: 18px;
}

/* Laat een deel van de derde regel zien en laat de tekst zacht naar wit verlopen. */
.top_vacancy_panel .top_introduction::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 18px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 48%,
        #ffffff 100%
    );
    pointer-events: none;
}
.top_vacancy_panel #top_vacancy_logo {
    max-width: 64px;
    max-height: 64px;
}

/* De oude, op vaste posities geplaatste fades zijn vervangen door een fade per kaart. */
#top_vacancy_gradient_1,
#top_vacancy_gradient_2,
#top_vacancy_gradient_3,
#top_vacancy_gradient_4,
#top_vacancy_gradient_5 {
    display: none;
}


/* Subtiele interactieve feedback voor de betaalde topvacatures. */
.top_vacancy_panel {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.top_vacancy_panel:hover,
.top_vacancy_panel:focus-within {
    transform: translateY(-2px);
    border-color: #b8d8e8;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
}

.top_vacancy_panel #top_title {
    transition: color 160ms ease;
}

.top_vacancy_panel:hover #top_title,
.top_vacancy_panel:focus-within #top_title {
    color: #23527c;
}

.top_vacancy_panel #top_vacancy_logo {
    transition: transform 160ms ease;
}

.top_vacancy_panel:hover #top_vacancy_logo,
.top_vacancy_panel:focus-within #top_vacancy_logo {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .top_vacancy_panel,
    .top_vacancy_panel #top_title,
    .top_vacancy_panel #top_vacancy_logo {
        transition: none;
    }

    .top_vacancy_panel:hover,
    .top_vacancy_panel:focus-within,
    .top_vacancy_panel:hover #top_vacancy_logo,
    .top_vacancy_panel:focus-within #top_vacancy_logo {
        transform: none;
    }
}

/* Homepage: grotere werkgeverslogo's in Top vacatures, inclusief responsive weergave. */
.top-vacancy-logo-column {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
}

.top_vacancy_panel #top_vacancy_logo {
    float: none;
    display: block;
    width: 120px;
    height: 80px;
    max-width: 100%;
    max-height: 80px;
    margin: 4px auto;
    object-fit: contain;
}

@media (max-width: 991px) {
    .top-vacancy-logo-column {
        min-height: 86px;
    }

    .top_vacancy_panel #top_vacancy_logo {
        width: 96px;
        height: 68px;
        max-height: 68px;
    }
}

@media (max-width: 767px) {
    .top_vacancy_panel {
        height: 138px;
        max-height: 138px;
    }

    .top-vacancy-copy-column,
    .top-vacancy-logo-column {
        float: left;
    }

    .top-vacancy-logo-column {
        min-height: 92px;
        padding-left: 5px;
        padding-right: 10px;
    }

    .top_vacancy_panel #top_vacancy_logo {
        width: 82px;
        height: 62px;
        max-height: 62px;
        margin-top: 8px;
    }
}

@media (max-width: 420px) {
    .top_vacancy_panel #top_vacancy_logo {
        width: 70px;
        height: 54px;
        max-height: 54px;
    }
}

/* SEO/semantiek: zichtbare broodkruimels en leesbare vacaturekoppen */
.seo-breadcrumb{margin:10px 0 8px;font-size:14px}.seo-breadcrumb span,.seo-breadcrumb a{margin-right:5px}#view_title{font-size:28px;line-height:1.25;margin:8px 0 18px}.vacancy-content{line-height:1.65}.vacancy-content img{max-width:100%;height:auto}

/* SEO- en toegankelijkheidsverbeteringen */
.seo-breadcrumb{margin:18px 0;font-size:14px}.seo-breadcrumb span{margin:0 5px}.vacancy-card-title{margin-top:0;font-size:22px}.vacancy-card-logo{max-width:100%;width:180px;height:100px;object-fit:contain}.site-footer{margin-top:30px;padding-bottom:24px}.site-footer h2{font-size:18px}.site-footer ul{list-style:none;padding-left:0}.site-footer li{margin:6px 0}.footer-meta{margin-top:20px;padding-top:12px;border-top:1px solid #ddd}.vacancy-employer{font-size:18px}.lead{font-size:18px;line-height:1.6}label{display:block;margin-top:12px}input[type=search],select{width:100%;min-height:40px;margin-bottom:8px}

/* Compacte, gebruiksvriendelijke SEO-footer */
.site-footer {
    clear: both;
    margin-top: 48px;
    padding: 34px 0 26px;
    border-top: 1px solid #d9e0e5;
    background: #f7f9fa;
}
.site-footer-inner { padding: 0 16px; }
.site-footer .footer-section { margin-bottom: 18px; }
.site-footer h2 {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 0 0 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus { text-decoration: underline; }
.footer-description {
    max-width: 900px;
    margin: 8px 0 0;
    padding-top: 20px;
    border-top: 1px solid #d9e0e5;
    line-height: 1.65;
    color: #56616a;
}
.html-sitemap { margin-bottom: 24px; }
.html-sitemap .page-header { margin-top: 8px; }
.sitemap-groups h2 { font-size: 20px; margin: 10px 0 14px; }
.sitemap-groups ul { padding-left: 0; list-style: none; }
.sitemap-groups li { margin-bottom: 9px; }
.sitemap-count { color: #69757e; font-size: 0.92em; }
@media (max-width: 767px) {
    .site-footer { margin-top: 32px; padding-top: 26px; }
    .site-footer .footer-section { min-height: 0; }
    .footer-description { margin-top: 2px; }
}

/* Vacaturedetail: samenhangende en responsive kop met logo, titel en werkgever */
.vacancy-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 18px 0 24px;
}

.vacancy-header-logo {
    flex: 0 0 140px;
    width: 140px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid #d5d5d5;
    background: #fff;
}

.vacancy-header #view_vacancy_logo {
    position: static;
    float: none;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90px;
    margin: 0;
    border: 0;
    object-fit: contain;
}

.vacancy-header-content {
    flex: 1 1 auto;
    min-width: 0;
}

.vacancy-header .seo-breadcrumb {
    margin: 0 0 12px;
}

.vacancy-header #view_title {
    position: static;
    float: none;
    margin: 0 0 6px;
    font-size: 30px;
    line-height: 1.22;
    color: #428bca;
}

.vacancy-header .vacancy-employer {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: #3f464c;
}

@media (max-width: 767px) {
    .vacancy-header {
        align-items: flex-start;
        gap: 15px;
        margin-top: 12px;
    }

    .vacancy-header-logo {
        flex-basis: 100px;
        width: 100px;
        height: 82px;
        padding: 7px;
    }

    .vacancy-header #view_vacancy_logo {
        max-height: 66px;
    }

    .vacancy-header #view_title {
        font-size: 24px;
    }

    .vacancy-header .vacancy-employer {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .vacancy-header {
        display: block;
    }

    .vacancy-header-logo {
        margin-bottom: 14px;
    }
}
/* ==================================================
   Responsive vacatureoverzicht
================================================== */

@media (max-width: 991px) {

    #input_container > .row:first-of-type{
        display:flex;
        flex-direction:column;
    }

    .vacancy-search{
        order:1;
        margin-bottom:25px;
    }

    .vacancy-results{
        order:2;
    }

    .vacancy-search .panel{
        margin-bottom:0;
    }
}
.vacancy-results h1{
    font-size:34px;
    line-height:1.2;
    font-weight:600;
    margin:0 0 10px;
}

.vacancy-results > p{
    font-size:16px;
    color:#666;
    margin-bottom:22px;
}

.vacancy-search .panel{
    max-width:280px;
    margin-left:auto;
}

.vacancy-search .panel-body{
    padding:16px;
}

.vacancy-search h2{
    font-size:22px;
    line-height:1.25;
    margin:0 0 14px;
    font-weight:600;
}

.vacancy-search label{
    margin-top:8px;
    margin-bottom:4px;
    font-size:14px;
    font-weight:600;
}

.vacancy-search input,
.vacancy-search select{
    min-height:36px;
    padding:6px 10px;
    margin-bottom:8px;
}

.vacancy-search .btn{
    margin-top:8px;
    padding:8px 12px;
}

@media (max-width:991px){

    .vacancy-search .panel{
        max-width:none;
    }

    .vacancy-results h1{
        font-size:24px;
    }
}

@media (max-width:767px){

    .vacancy-results h1{
        font-size:22px;
    }

    .vacancy-search h2{
        font-size:24px;
    }
}

/* ==========================================================
   Homepage definitief: bredere uitgelichte topvacature
   en vaste positie voor "Bekijk deze vacature"
   ========================================================== */
@media (min-width: 992px) {
    #home_container .home-search-column {
        width: 38%;
    }

    #home_container .featured-top-column {
        width: 62%;
    }

    #home_container .home-search-column .panel-title {
        font-size: 15px;
        line-height: 1.25;
        white-space: nowrap;
    }

    #home_container .featured-top-content {
        display: flex;
        align-items: stretch;
        height: 179px;
        box-sizing: border-box;
        padding: 13px 16px 11px;
    }

    #home_container .featured-top-copy {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        padding-right: 14px;
    }

    #home_container .featured-top-copy h2 {
        display: -webkit-box;
        min-height: 44px;
        max-height: 44px;
        margin: 0 0 3px;
        overflow: hidden;
        font-size: 18px;
        line-height: 22px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    #home_container .featured-top-city {
        flex: 0 0 auto;
        margin: 0 0 4px !important;
        line-height: 17px;
    }

    #home_container .featured-top-intro {
        display: -webkit-box;
        flex: 0 1 auto;
        max-height: 54px;
        margin: 0 0 4px;
        overflow: hidden;
        line-height: 18px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    #home_container .featured-top-link {
        display: inline-block;
        flex: 0 0 auto;
        margin-top: auto;
        line-height: 18px;
    }

    #home_container .featured-top-logo-wrap {
        flex-basis: 170px;
        width: 170px;
        margin-left: 12px;
    }
}

@media (max-width: 991px) {
    #home_container .home-search-column,
    #home_container .featured-top-column {
        width: 100%;
    }

    #home_container .home-search-column .panel-title {
        white-space: normal;
    }

    #home_container .featured-top-content {
        box-sizing: border-box;
    }

    #home_container .featured-top-copy h2 {
        min-height: 0;
        max-height: 44px;
    }

    #home_container .featured-top-intro {
        max-height: 54px;
        -webkit-line-clamp: 3;
    }
}

/* ==========================================================
   Uitgelichte topvacature: CTA altijd exact uitgelijnd
   ========================================================== */
@media (min-width: 992px) {
    #home_container .featured-top-content {
        display: flex;
        align-items: stretch;
        height: 179px;
        box-sizing: border-box;
        padding: 13px 16px 11px;
    }

    #home_container .featured-top-copy {
        display: grid;
        flex: 1 1 auto;
        grid-template-rows: 44px 18px 54px 18px;
        row-gap: 3px;
        min-width: 0;
        padding-right: 14px;
    }

    #home_container .featured-top-copy h2 {
        display: -webkit-box;
        align-self: start;
        min-height: 44px;
        max-height: 44px;
        margin: 0;
        overflow: hidden;
        font-size: 18px;
        line-height: 22px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    #home_container .featured-top-city {
        align-self: start;
        min-height: 18px;
        max-height: 18px;
        margin: 0 !important;
        overflow: hidden;
        line-height: 18px;
    }

    #home_container .featured-top-intro {
        display: -webkit-box !important;
        align-self: start;
        min-height: 54px;
        max-height: 54px !important;
        margin: 0 !important;
        overflow: hidden !important;
        line-height: 18px !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    #home_container .featured-top-link {
        display: block;
        align-self: end;
        height: 18px;
        margin: 0;
        line-height: 18px;
    }
}

@media (max-width: 991px) {
    #home_container .featured-top-copy {
        display: flex;
        flex-direction: column;
    }

    #home_container .featured-top-copy h2 {
        min-height: 0;
        max-height: 44px;
    }

    #home_container .featured-top-intro {
        max-height: 54px !important;
        -webkit-line-clamp: 3 !important;
    }

    #home_container .featured-top-link {
        margin-top: auto;
    }
}


/* SEO landing pages */
.seo-landing-hero{padding:24px 0 18px}.seo-landing-actions{margin:18px 0}.seo-landing-actions .btn{margin:0 8px 8px 0}.seo-landing-content,.seo-landing-related,.seo-landing-cta{margin:34px 0;padding:24px;background:#fff;border:1px solid #e5e5e5;border-radius:4px}.seo-landing-content p{max-width:900px;line-height:1.7}.seo-landing-related ul{columns:2;column-gap:32px;padding-left:20px}.seo-landing-related li{margin-bottom:8px;break-inside:avoid}.seo-landing-cta{text-align:center}.seo-landing-cta .btn{margin:6px}@media(max-width:767px){.seo-landing-related ul{columns:1}.seo-landing-actions .btn{display:block;width:100%;margin-bottom:10px}}

/* SEO 2026: content hubs en leesbare landingspagina's */
.home-seo-intro{margin:18px 0 18px;max-width:900px}.home-seo-intro h1{margin:0 0 10px;font-weight:600;line-height:1.2}.home-seo-intro p{margin:0;max-width:820px;font-size:15px;line-height:1.55;font-weight:400}.home-seo-hub,.seo-search-guidance,.vacancy-related-links{margin:24px 0;padding:20px;background:#fff;border:1px solid #e5e5e5;border-radius:4px}.seo-link-list{padding-left:20px}.seo-link-list li{margin:7px 0}.seo-landing-content{line-height:1.65}.seo-landing-content h3{margin-top:22px}.vacancy-card-logo{max-width:100%;height:auto;object-fit:contain}.seo-landing-hero{margin-bottom:22px}.seo-landing-actions .btn{margin:0 6px 8px 0}@media(max-width:767px){.home-seo-hub,.seo-search-guidance,.vacancy-related-links{padding:14px}.seo-landing-actions .btn{display:block;width:100%;margin-bottom:8px}}

/* ==========================================================
   Homepage hero refinement 2026-08-15
   Behoudt zoekblok + uitgelichte topvacature, maar geeft het
   blauwe gedeelte een eigen flexibele responsive container.
   ========================================================== */
#home_container {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 10px !important;
    background: transparent !important;
}

#home_container .home-hero-shell {
    margin: 0 0 18px;
    padding: 20px 16px 18px;
    background: #01a0ca;
    border-radius: 0;
    box-sizing: border-box;
}

#home_container .home-seo-intro {
    max-width: none;
    margin: 0 0 15px;
    padding: 0 2px;
    color: #fff;
}

#home_container .home-seo-intro h1 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 29px;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -.25px;
}

#home_container .home-seo-intro p {
    max-width: 860px;
    margin: 0;
    color: rgba(255,255,255,.96);
    font-size: 14px;
    line-height: 1.45;
}

#home_container .home-hero-row {
    margin-left: -8px;
    margin-right: -8px;
    padding-top: 0;
}

#home_container .home-hero-row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

#home_container .home-hero-row .main_search,
#home_container .featured-top-vacancy {
    height: 222px;
    min-height: 222px;
    margin-bottom: 0;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(28,70,91,.17);
}

#home_container .home-hero-row .main_search {
    overflow: hidden;
}

#home_container .home-hero-row .main_search .panel-heading,
#home_container .featured-top-label {
    min-height: 39px;
    padding-top: 9px;
    padding-bottom: 9px;
}

#home_container .home-hero-row .main_search .panel-body {
    padding-top: 12px;
    padding-bottom: 11px;
}

/* Top vacatures blijven expliciet onder het blauwe hero-gedeelte. */
#home_container > .row:not(.home-hero-row) {
    position: relative;
}

@media (max-width: 991px) {
    #home_container .home-hero-shell {
        padding: 18px 15px 16px;
    }

    #home_container .home-seo-intro {
        margin-bottom: 13px;
    }

    #home_container .home-seo-intro h1 {
        font-size: 27px;
    }

    #home_container .home-hero-row .main_search,
    #home_container .featured-top-vacancy {
        height: auto;
        min-height: 0;
    }

    #home_container .home-search-column {
        margin-bottom: 14px;
    }

    #home_container .featured-top-content {
        min-height: 158px;
    }
}

@media (max-width: 767px) {
    #home_container .home-hero-shell {
        margin-left: 0;
        margin-right: 0;
        padding: 16px 12px 14px;
    }

    #home_container .home-seo-intro h1 {
        font-size: 24px;
        line-height: 1.22;
    }

    #home_container .home-seo-intro p {
        font-size: 13px;
        line-height: 1.4;
    }

    #home_container .featured-top-content {
        min-height: 0;
    }
}

@media (max-width: 420px) {
    #home_container .home-hero-shell {
        padding-left: 10px;
        padding-right: 10px;
    }

    #home_container .home-seo-intro h1 {
        font-size: 22px;
    }

    #home_container .featured-top-content {
        padding: 13px 12px;
    }
}

/* ==========================================================
   Homepage professional redesign 2026-08-15
   Visuele laag op bestaande functionaliteit en data.
   ========================================================== */
#home_container {
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 24px !important;
}

#home_container .home-hero-pro {
    position: relative;
    overflow: hidden;
    margin: 14px 0 18px;
    padding: 34px 38px 28px;
    border-radius: 10px;
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.04) 48%, rgba(0,0,0,.015) 72%, rgba(0,0,0,.03) 100%),
        var(--home-hero-image, none);
    background-position: center, right center;
    background-size: cover, cover;
    box-shadow: 0 8px 24px rgba(23,55,90,.12);
}

#home_container .home-hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04));
}

#home_container .home-hero-inner {
    position: relative;
    z-index: 1;
}

#home_container .home-seo-intro {
    max-width: 820px;
    margin: 0 0 24px;
    padding: 0;
}

#home_container .home-seo-intro h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 40px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.6px;
    text-shadow: 0 1px 1px rgba(0,0,0,.08);
}

#home_container .home-seo-intro p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.96);
    font-size: 17px;
    line-height: 1.55;
}

#home_container .home-hero-row {
    display: flex;
    align-items: stretch;
    margin-left: -12px;
    margin-right: -12px;
}

#home_container .home-hero-row > [class*="col-"] {
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
}

#home_container .home-search-card,
#home_container .featured-top-vacancy {
    width: 100%;
    height: auto !important;
    min-height: 310px !important;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(8,35,72,.18);
}

#home_container .home-search-card {
    display: flex;
    flex-direction: column;
}

#home_container .home-search-card .panel-heading,
#home_container .featured-top-label {
    min-height: 58px;
    padding: 17px 22px;
    border: 0;
    border-bottom: 1px solid #dce5ef;
    background: #fff;
    color: #102d57;
}

#home_container .home-search-card .panel-title,
#home_container .featured-top-label {
    font-size: 19px;
    line-height: 24px;
    font-weight: 700;
}

#home_container .home-search-card .panel-title .glyphicon {
    margin-right: 10px;
    color: #005fc8;
    font-size: 20px;
    vertical-align: -1px;
}

#home_container .featured-top-label {
    display: block;
}

#home_container .featured-top-label .glyphicon {
    margin-right: 8px;
    color: #f5b43c;
}

#home_container .home-search-card .panel-body {
    flex: 1;
    padding: 18px 22px 14px;
}

#home_container .home-search-fields,
#home_container .home-keyword-row {
    margin-left: -7px;
    margin-right: -7px;
}

#home_container .home-search-fields > [class*="col-"],
#home_container .home-keyword-row > [class*="col-"] {
    padding-left: 7px;
    padding-right: 7px;
}

#home_container .home-search-card select,
#home_container .home-search-card input[type="text"] {
    width: 100%;
    height: 48px;
    margin: 0 0 14px;
    padding: 0 14px;
    border: 1px solid #cbd6e3;
    border-radius: 5px;
    background: #fff;
    color: #24364d;
    font-size: 14px;
    box-shadow: none;
}

#home_container .home-search-card select:focus,
#home_container .home-search-card input[type="text"]:focus {
    border-color: #1473d4;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(20,115,212,.12);
}

#home_container .home-search-card #main_search_button {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: linear-gradient(180deg, #0874df, #0061c9);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 48px;
    text-align: center;
    text-shadow: none;
    box-shadow: 0 3px 8px rgba(0,87,182,.18);
}

#home_container .home-search-card #main_search_button:hover,
#home_container .home-search-card #main_search_button:focus {
    background: #0059ba;
}

#home_container .home-search-card #main_search_button .glyphicon {
    margin-right: 6px;
}

#home_container .home-search-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #e4e9ef;
    background: #fbfcfe;
}

#home_container .home-search-benefits > div {
    position: relative;
    min-height: 76px;
    padding: 16px 10px 12px 48px;
    color: #17345f;
}

#home_container .home-search-benefits > div + div {
    border-left: 1px solid #e4e9ef;
}

#home_container .home-search-benefits .glyphicon {
    position: absolute;
    top: 20px;
    left: 17px;
    color: #0569d2;
    font-size: 22px;
}

#home_container .home-search-benefits strong,
#home_container .home-search-benefits small {
    display: block;
}

#home_container .home-search-benefits strong {
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 1.25;
}

#home_container .home-search-benefits small {
    color: #5e6f84;
    font-size: 11px;
    line-height: 1.3;
}

#home_container .featured-top-vacancy {
    display: flex;
    flex-direction: column;
    color: #1c2f49;
    text-decoration: none;
}

#home_container .featured-top-vacancy:hover,
#home_container .featured-top-vacancy:focus {
    color: #1c2f49;
    text-decoration: none;
    transform: none;
}

#home_container .featured-top-content {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-height: 0 !important;
    padding: 22px;
}

#home_container .featured-top-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding-right: 22px;
}

#home_container .featured-top-copy h2 {
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 11px;
    overflow: visible !important;
    color: #0063cf;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
}

#home_container .featured-top-city {
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 12px !important;
    color: #263e5f;
    font-weight: 700;
}

#home_container .featured-top-city .glyphicon {
    margin-right: 4px;
}

#home_container .featured-top-intro {
    display: -webkit-box !important;
    min-height: 0 !important;
    max-height: 64px !important;
    margin: 0 0 18px !important;
    overflow: hidden !important;
    color: #34465d;
    font-size: 13px;
    line-height: 1.6 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
}

#home_container .featured-top-link {
    display: block;
    height: auto;
    margin-top: auto;
    color: #0063cf;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

#home_container .featured-top-link span {
    margin-left: 7px;
    font-size: 22px;
    line-height: 12px;
    vertical-align: -2px;
}

#home_container .featured-top-logo-wrap {
    display: flex;
    flex: 0 0 155px;
    align-items: center;
    justify-content: center;
    padding-left: 18px;
    border-left: 1px solid #e4e9ef;
}

#home_container .featured-top-logo-wrap img {
    max-width: 135px;
    max-height: 108px;
    width: auto;
    height: auto;
    object-fit: contain;
}

#home_container .home-vacancy-grid {
    display: flex;
    margin-left: -8px;
    margin-right: -8px;
}

#home_container .home-vacancy-grid > [class*="col-"] {
    display: flex;
    padding-left: 8px;
    padding-right: 8px;
}

#home_container .home-list-panel {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #dce4ed;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(25,55,85,.06);
}

#home_container .home-list-panel > .panel-heading {
    padding: 15px 20px;
    border: 0;
    border-bottom: 1px solid #dfe6ed;
    background: #fff;
}

#home_container .home-list-panel > .panel-heading .panel-title {
    color: #17345f;
    font-size: 18px;
    font-weight: 700;
}

#home_container .home-list-panel > .panel-heading .glyphicon {
    margin-right: 10px;
    color: #17345f;
}

#home_container .home-list-panel > .panel-body {
    padding: 0 24px;
}

#home_container .home-top-vacancy {
    display: flex;
    align-items: center;
    min-height: 130px;
    padding: 18px 0;
    border-bottom: 1px solid #e7ebf0;
    color: #273c58;
    text-decoration: none;
}

#home_container .home-top-vacancy:nth-of-type(n+3) {
    display: none;
}

#home_container .home-top-copy {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 22px;
}

#home_container .home-top-copy > strong {
    display: block;
    margin-bottom: 4px;
    color: #0063cf;
    font-size: 15px;
    line-height: 1.35;
}

#home_container .home-vacancy-city {
    display: block;
    margin-bottom: 5px;
    color: #263b55;
    font-size: 13px;
    font-weight: 700;
}

#home_container .home-top-copy p {
    position: relative;
    display: block;
    max-height: 52.2px;
    margin: 0;
    overflow: hidden;
    color: #536276;
    font-size: 12px;
    line-height: 1.45;
}

/* Toon drie tekstregels; laat de derde regel onderaan subtiel uitfaden. */
#home_container .home-top-copy p::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 11px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 55%, rgba(255,255,255,.72) 100%);
    pointer-events: none;
}

#home_container .home-top-logo {
    display: flex;
    flex: 0 0 145px;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    padding-left: 20px;
    border-left: 1px solid #e5e9ee;
}

#home_container .home-top-logo img {
    max-width: 125px;
    max-height: 65px;
    width: auto;
    height: auto;
    object-fit: contain;
}

#home_container .home-new-list {
    padding: 0 24px !important;
}

#home_container .home-new-vacancy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 11px 0;
    border-bottom: 1px solid #e7ebf0;
    color: #0063cf;
    text-decoration: none;
}

#home_container .home-new-vacancy:nth-of-type(n+5) {
    display: none;
}

#home_container .home-new-vacancy strong,
#home_container .home-new-vacancy small {
    display: block;
}

#home_container .home-new-vacancy strong {
    margin-bottom: 3px;
    color: #0063cf;
    font-size: 14px;
    line-height: 1.35;
}

#home_container .home-new-vacancy small {
    color: #42536a;
    font-size: 12px;
}

#home_container .home-list-arrow {
    padding-left: 12px;
    color: #17345f;
    font-size: 24px;
}

#home_container .home-list-more {
    display: block;
    padding: 16px 0 18px;
    color: #0063cf;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

#home_container .home-list-more span {
    margin-left: 6px;
    font-size: 20px;
    vertical-align: -2px;
}

#home_container .home-top-vacancy:hover strong,
#home_container .home-new-vacancy:hover strong,
#home_container .home-list-more:hover {
    color: #004eaa;
    text-decoration: underline;
}

@media (max-width: 991px) {
    #home_container {
        padding-left: 15px;
        padding-right: 15px;
    }

    #home_container .home-hero-pro {
        padding: 28px 26px 24px;
        background-position: center, center center;
    }

    #home_container .home-seo-intro h1 {
        font-size: 34px;
    }

    #home_container .home-hero-row,
    #home_container .home-vacancy-grid {
        display: block;
    }

    #home_container .home-hero-row > [class*="col-"],
    #home_container .home-vacancy-grid > [class*="col-"] {
        display: block;
    }

    #home_container .home-search-column {
        margin-bottom: 18px;
    }

    #home_container .home-search-card,
    #home_container .featured-top-vacancy {
        min-height: 0 !important;
    }
}

@media (max-width: 767px) {
    #home_container {
        padding-left: 10px;
        padding-right: 10px;
    }

    #home_container .home-hero-pro {
        margin-top: 10px;
        padding: 24px 16px 18px;
        border-radius: 8px;
        background-image: linear-gradient(180deg, rgba(2,47,105,.98), rgba(2,63,135,.94)), var(--home-hero-image, none);
    }

    #home_container .home-seo-intro {
        margin-bottom: 20px;
    }

    #home_container .home-seo-intro h1 {
        font-size: 29px;
        line-height: 1.18;
    }

    #home_container .home-seo-intro p {
        font-size: 15px;
    }

    #home_container .home-search-card .panel-heading,
    #home_container .featured-top-label {
        padding: 14px 16px;
    }

    #home_container .home-search-card .panel-title,
    #home_container .featured-top-label {
        font-size: 16px;
    }

    #home_container .home-search-card .panel-body {
        padding: 16px;
    }

    #home_container .home-search-benefits {
        grid-template-columns: 1fr;
    }

    #home_container .home-search-benefits > div {
        min-height: 62px;
        padding-top: 13px;
        padding-bottom: 10px;
    }

    #home_container .home-search-benefits > div + div {
        border-top: 1px solid #e4e9ef;
        border-left: 0;
    }

    #home_container .featured-top-content {
        display: block;
        padding: 18px 16px;
    }

    #home_container .featured-top-copy {
        padding-right: 0;
    }

    #home_container .featured-top-logo-wrap {
        margin-top: 16px;
        padding: 16px 0 0;
        border-top: 1px solid #e4e9ef;
        border-left: 0;
    }

    #home_container .home-list-panel > .panel-body,
    #home_container .home-new-list {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #home_container .home-top-vacancy {
        min-height: 0;
    }

    #home_container .home-top-logo {
        flex-basis: 105px;
        padding-left: 12px;
    }

    #home_container .home-top-logo img {
        max-width: 90px;
        max-height: 54px;
    }
}

@media (max-width: 480px) {
    #home_container .home-hero-pro {
        padding-left: 12px;
        padding-right: 12px;
    }

    #home_container .home-seo-intro h1 {
        font-size: 25px;
    }

    #home_container .home-top-vacancy {
        display: block;
    }

    #home_container .home-top-copy {
        padding-right: 0;
    }

    #home_container .home-top-logo {
        min-height: 60px;
        margin-top: 12px;
        padding: 12px 0 0;
        border-top: 1px solid #e5e9ee;
        border-left: 0;
    }
}

/* ---------------------------------------------------------
   Kennisbank 2026 - branche-onafhankelijke presentatie
   --------------------------------------------------------- */
.knowledge-page-shell{max-width:1180px}.knowledge-breadcrumb{margin-top:24px;margin-bottom:22px;color:#65727d}.knowledge-breadcrumb a{color:#3179b7}.knowledge-hub-modern,.knowledge-article-modern,.knowledge-related-articles{font-family:"Segoe UI",Arial,sans-serif;color:#263642}.knowledge-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:36px;overflow:hidden;margin-bottom:24px;padding:48px 52px;border:1px solid #e0e8ee;border-radius:16px;background:linear-gradient(135deg,#f8fbfd 0%,#eef7fa 100%);box-shadow:0 10px 30px rgba(28,62,84,.06)}.knowledge-hero:after{content:"";position:absolute;right:-85px;bottom:-125px;width:330px;height:330px;border:54px solid rgba(0,157,204,.07);border-radius:50%}.knowledge-hero-copy{position:relative;z-index:1;max-width:760px}.knowledge-eyebrow,.knowledge-category{display:inline-block;color:#078bb7;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.075em;text-transform:uppercase}.knowledge-hero h1{margin:8px 0 14px;color:#293b47;font-size:38px;font-weight:600;line-height:1.18}.knowledge-hero p{max-width:720px;margin:0;color:#536671;font-size:18px;line-height:1.65}.knowledge-hero-mark{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:0 0 110px;width:110px;height:110px;border-radius:28px;background:#fff;color:#079bc7;font-size:44px;box-shadow:0 12px 35px rgba(14,85,116,.12)}.knowledge-filter-bar{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 28px}.knowledge-filter-pill{display:inline-flex;align-items:center;min-height:36px;padding:8px 14px;border:1px solid #d9e4ea;border-radius:999px;background:#fff;color:#52636e;font-size:13px;font-weight:600}.knowledge-filter-pill.is-active{border-color:#0a9bc7;background:#0a9bc7;color:#fff}.knowledge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:34px}.knowledge-card{min-width:0;margin:0;border:1px solid #dce5ea;border-radius:13px;background:#fff;box-shadow:0 5px 18px rgba(25,60,80,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.knowledge-card:hover{transform:translateY(-3px);border-color:#b9d7e3;box-shadow:0 14px 34px rgba(25,60,80,.11)}.knowledge-card-link{display:flex;min-height:235px;height:100%;flex-direction:column;padding:27px 29px;color:inherit;text-decoration:none!important}.knowledge-card-link:hover,.knowledge-card-link:focus{color:inherit;text-decoration:none}.knowledge-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:19px}.knowledge-readtime{color:#84929a;font-size:12px;white-space:nowrap}.knowledge-readtime .glyphicon{margin-right:4px}.knowledge-card h2{margin:0 0 11px;color:#263b48;font-size:24px;font-weight:600;line-height:1.25}.knowledge-card p{margin:0 0 22px;color:#60717b;font-size:15px;line-height:1.6}.knowledge-read-more{margin-top:auto;color:#087da7;font-size:14px;font-weight:700}.knowledge-read-more span{display:inline-block;margin-left:4px;transition:transform .15s ease}.knowledge-card:hover .knowledge-read-more span{transform:translateX(4px)}.knowledge-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:36px 0 50px;padding:30px 34px;border-radius:14px;background:#263f50;color:#fff}.knowledge-cta h2{margin:5px 0 5px;color:#fff;font-size:25px;font-weight:600}.knowledge-cta p{max-width:690px;margin:0;color:#dbe6ec;font-size:15px;line-height:1.55}.knowledge-cta .knowledge-eyebrow{color:#7ed4ed}.knowledge-cta-button{flex:0 0 auto;padding:11px 18px;border-radius:7px;font-weight:700}

.knowledge-article-modern{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:42px;align-items:start}.knowledge-article-main{min-width:0}.knowledge-article-header{margin-bottom:31px;padding:40px 44px;border:1px solid #e0e8ed;border-radius:15px;background:#f8fbfc}.knowledge-article-meta{display:flex;align-items:center;gap:16px;margin-bottom:13px}.knowledge-article-header h1{max-width:780px;margin:0 0 15px;color:#263a47;font-size:39px;font-weight:600;line-height:1.16}.knowledge-article-intro{max-width:780px;margin:0;color:#526771;font-size:19px;line-height:1.62}.knowledge-body{padding:2px 12px 10px 4px;color:#374b57;font-size:16px;line-height:1.78}.knowledge-body h2{margin:34px 0 12px;color:#263b48;font-size:26px;font-weight:600}.knowledge-body h2:first-child{margin-top:8px}.knowledge-body h3{margin:28px 0 9px;color:#2e4654;font-size:21px;font-weight:600}.knowledge-body p{margin-bottom:18px}.knowledge-body ul,.knowledge-body ol{margin-bottom:20px}.knowledge-body a{font-weight:600}.knowledge-back-link{margin:24px 0 14px;padding-top:20px;border-top:1px solid #e3eaee}.knowledge-back-link a{color:#317eb4;font-weight:600}.knowledge-sidebar{position:sticky;top:22px}.knowledge-sidebar-card{padding:28px;border:1px solid #dce6eb;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(25,60,80,.07)}.knowledge-sidebar-card h2{margin:7px 0 10px;color:#293e4b;font-size:23px;line-height:1.25}.knowledge-sidebar-card p{margin-bottom:17px;color:#63737c;font-size:14px;line-height:1.6}.knowledge-vacancy-links{margin:0 0 19px;padding:0;list-style:none;border-top:1px solid #e5ebee}.knowledge-vacancy-links li{border-bottom:1px solid #e5ebee}.knowledge-vacancy-links a{display:flex;justify-content:space-between;gap:10px;padding:12px 2px;color:#2879ad;font-weight:600;text-decoration:none}.knowledge-vacancy-links a:hover{text-decoration:none;color:#075f86}.knowledge-related-articles{margin:56px 0 48px;padding-top:34px;border-top:1px solid #dfe7eb}.knowledge-section-heading{margin-bottom:19px}.knowledge-section-heading h2{margin:6px 0 0;color:#293e4b;font-size:27px;font-weight:600}.knowledge-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.knowledge-related-card{display:flex;min-height:155px;flex-direction:column;padding:20px 22px;border:1px solid #dce5ea;border-radius:12px;background:#fff;color:#2c4050;text-decoration:none!important;transition:transform .15s ease,box-shadow .15s ease}.knowledge-related-card:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(25,60,80,.09);color:#2c4050}.knowledge-related-card strong{margin:9px 0 16px;font-size:18px;line-height:1.35}.knowledge-related-card>span:last-child{margin-top:auto;color:#087da7;font-size:13px;font-weight:700}

@media(max-width:991px){.knowledge-hero{padding:36px}.knowledge-hero-mark{flex-basis:90px;width:90px;height:90px}.knowledge-article-modern{grid-template-columns:1fr;gap:26px}.knowledge-sidebar{position:static}.knowledge-sidebar-card{max-width:none}.knowledge-related-grid{grid-template-columns:1fr 1fr}.knowledge-cta{align-items:flex-start;flex-direction:column}.knowledge-cta-button{width:auto}}
@media(max-width:767px){.knowledge-page-shell{padding-left:16px;padding-right:16px}.knowledge-hero{padding:29px 24px;border-radius:12px}.knowledge-hero h1{font-size:30px}.knowledge-hero p{font-size:16px}.knowledge-hero-mark{display:none}.knowledge-filter-bar{gap:7px}.knowledge-filter-pill{font-size:12px}.knowledge-grid{grid-template-columns:1fr;gap:15px}.knowledge-card-link{min-height:0;padding:23px}.knowledge-card h2{font-size:22px}.knowledge-cta{margin-bottom:34px;padding:25px 23px}.knowledge-article-header{padding:29px 24px}.knowledge-article-header h1{font-size:31px}.knowledge-article-intro{font-size:17px}.knowledge-body{padding-right:0;font-size:15px}.knowledge-related-grid{grid-template-columns:1fr}.knowledge-sidebar-card{padding:23px}}

/* WerQin multi-domain branding overrides */
body { border-top-color: var(--werqin-primary) !important; }
.audience-switch-button:hover,
.audience-switch-button:focus {
    color: var(--werqin-primary) !important;
    border-color: color-mix(in srgb, var(--werqin-primary) 45%, #ffffff) !important;
}
.audience-switch-button.is-active,
.audience-switch-employee.is-active {
    background: var(--werqin-primary) !important;
    border-color: var(--werqin-primary) !important;
}

/* WerQin branchegerichte functiekeuze: eerst groep, daarna specifieke functie. */
.werqin-function-group-select {
    margin-bottom: 8px;
}
.werqin-function-select-waiting {
    opacity: .72;
}
.home-search-card .werqin-function-group-select,
.home-search-card .werqin-function-select {
    width: 100%;
}

/* ==========================================================
   WerQin multi-brand themalaag
   De werkgeversomgeving neemt automatisch de kleur van de
   actieve branche/tenant over via de CSS-variabelen uit Header.php.
   ========================================================== */
.audience-switch-button:hover,
.audience-switch-button:focus {
    color: var(--werqin-primary);
    border-color: var(--werqin-primary-border);
}
.audience-switch-button.is-active,
.audience-switch-employee.is-active,
.audience-switch-employer.is-active {
    background: var(--werqin-primary);
    border-color: var(--werqin-primary);
    color: var(--werqin-on-primary);
}

.mode-employer a:not(.btn):not(.audience-switch-button) {
    color: var(--werqin-primary-dark);
}
.mode-employer a:not(.btn):not(.audience-switch-button):hover,
.mode-employer a:not(.btn):not(.audience-switch-button):focus {
    color: var(--werqin-primary-darker);
}
.mode-employer .btn-primary,
.mode-employer .btn-primary:focus {
    border-color: var(--werqin-primary-dark);
    background-color: var(--werqin-primary);
    background-image: none;
    color: var(--werqin-on-primary);
    text-shadow: none;
}
.mode-employer .btn-primary:hover,
.mode-employer .btn-primary:active,
.mode-employer .btn-primary.active {
    border-color: var(--werqin-primary-darker);
    background-color: var(--werqin-primary-dark);
    color: var(--werqin-on-primary);
}
.mode-employer .panel-primary {
    border-color: var(--werqin-primary-border);
}
.mode-employer .panel-primary > .panel-heading {
    border-color: var(--werqin-primary-dark);
    background-color: var(--werqin-primary);
    background-image: none;
    color: var(--werqin-on-primary);
}
.mode-employer .nav-pills > li.active > a,
.mode-employer .nav-pills > li.active > a:hover,
.mode-employer .nav-pills > li.active > a:focus,
.mode-employer .pagination > .active > a,
.mode-employer .pagination > .active > span,
.mode-employer .pagination > .active > a:hover,
.mode-employer .pagination > .active > span:hover {
    border-color: var(--werqin-primary);
    background-color: var(--werqin-primary);
    color: var(--werqin-on-primary);
}

.employer-marketing-hero,
.employer-portal-intro,
.employer-portal .employer-portal-intro {
    background: linear-gradient(135deg, var(--werqin-primary-dark) 0%, var(--werqin-primary) 100%);
    box-shadow: 0 12px 28px rgba(var(--werqin-primary-rgb), .16);
    color: var(--werqin-on-primary);
}
.employer-marketing-hero h1,
.employer-portal-intro h1,
.employer-portal .employer-portal-intro h1,
.employer-portal .employer-portal-benefits,
.employer-portal .employer-portal-subline {
    color: var(--werqin-on-primary);
}
.employer-section-heading span,
.employer-sidebar-brand > .glyphicon,
.employer-dashboard-summary .glyphicon,
.employer-feature-label,
.employer-feature-link,
.employer-portal .employer-feature-label,
.employer-portal .employer-feature-link,
.employer-portal .topvacature-title,
.employer-portal .credit-highlight,
.employer-portal .employer-usp-content h2,
.employer-portal .employer-usp-icon {
    color: var(--werqin-primary);
}
.employer-benefit-card .glyphicon,
.employer-feature-icon,
.employer-portal .employer-feature-icon,
.employer-portal .employer-usp-icon {
    background: var(--werqin-primary-soft);
    color: var(--werqin-primary-dark);
}
.employer-access-panel {
    border-left-color: var(--werqin-primary);
    background: var(--werqin-primary-soft);
}
.employer-sidebar .nav > li.active > a,
.employer-sidebar .nav > li.active > a:hover,
.employer-sidebar .nav > li.active > a:focus {
    background: var(--werqin-primary);
    color: var(--werqin-on-primary);
}
.employer-sidebar .nav > li.active > a .glyphicon {
    color: var(--werqin-on-primary);
}
.employer-feature-card:hover,
.employer-portal .employer-feature-card:hover {
    border-color: var(--werqin-primary-border);
    box-shadow: 0 7px 18px rgba(var(--werqin-primary-rgb), .10);
}
.employer-portal .employer-usp-strip {
    border-color: var(--werqin-primary-border);
}
.employer-portal .employer-usp-item + .employer-usp-item {
    border-color: var(--werqin-primary-soft-strong);
}

/* Focusrand, overal gelijk: geen zwarte rechthoek na een muisklik (bijv. als je via de terugknop
   terugkomt), wél een duidelijke blauwe rand voor wie met het toetsenbord navigeert (toegankelijkheid).
   Tekstvelden en keuzelijsten houden hun eigen focusstijl. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
input[type="reset"]:focus:not(:focus-visible),
summary:focus:not(:focus-visible) { outline: none !important; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
summary:focus-visible { outline: 2px solid #009bc2 !important; outline-offset: 2px !important; }

#logo_div a:focus-visible { outline-offset: 4px !important; border-radius: 6px; }

/* Paginakop voor werkgeverspagina's (Mijn vacatures, Kandidaten, Agenda, Cijfers): overal dezelfde opbouw. */
#input_container .page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 22px 0 18px; padding: 0 2px; }
#input_container .page-head-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
#input_container .page-head-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: #0b67c9; color: #fff; font-size: 20px; box-shadow: 0 5px 14px rgba(11, 103, 201, .18); }
#input_container .page-head h1 { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.15; color: #1e3553; }
#input_container .page-head p { margin: 5px 0 0; color: #748397; font-size: 13px; }
@media (max-width: 767px) {
	#input_container .page-head { margin-top: 16px; }
	#input_container .page-head-icon { flex-basis: 40px; width: 40px; height: 40px; }
	#input_container .page-head h1 { font-size: 22px; }
}
/* Kop binnen een Bootstrap-kolom (Kandidaten): uitlijnen met de kop op de andere pagina's. */
#input_container .row > .col-md-12 > .page-head:first-child { margin-left: -15px; margin-right: -15px; margin-top: 2px; }

/* Bovenbalk voor gasten: Voor werkgevers · Inloggen · Gratis account */
#header_buttons.header-guest-actions { align-items: center; gap: 10px; margin-top: 18px; }
.header-audience-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; color: var(--werqin-primary, #0b5cc4); font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-audience-link:hover, .header-audience-link:focus { text-decoration: underline; }
#login_div p { margin: 18px 0 0; }
@media (max-width: 767px) {
    #header_buttons.header-guest-actions { margin: 10px auto; justify-content: center; flex-wrap: wrap; }
    #header_buttons.header-guest-actions .header-audience-link { flex: 1 1 100%; justify-content: center; }
    #header_buttons.header-guest-actions .audience-switch-button { flex: 1 1 40%; }
}

/* Kandidaatmenu: teller (alleen bij openstaande contactverzoeken) rechts in de menuregel in plaats van op een eigen regel. */
.employee-sidebar .nav-pills > li > a { position: relative; }
.employee-sidebar .nav-pills > li > a:has(.badge) { padding-right: 34px; }
.employee-sidebar .nav-pills > li > a .badge { position: absolute; right: 6px; top: 50%; float: none !important; margin: 0; transform: translateY(-50%); }

/* Topvacature in zoekresultaten en vacaturepagina's per functie/plaats: label en lichte gele rand. */
.vacancy-card.is-top{border:2px solid #f2c14e;background:#fffdf5}.vacancy-top-badge{display:inline-flex;align-items:center;gap:5px;margin:0 0 4px;padding:2px 10px;border-radius:999px;background:#fff1c2;color:#7a5200;font-size:12px;font-weight:700;line-height:20px}.vacancy-top-badge::before{content:'\2605';color:#e0a100}

/* Vacaturekaart (vacaturepagina en pagina's per functie/plaats/provincie): hele kaart klikbaar. */
.vcard{position:relative;display:flex;gap:18px;align-items:flex-start;margin:0 0 12px;padding:16px 18px;border:1px solid #dfe7ef;border-radius:12px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.vcard:hover{border-color:#9fbde3;box-shadow:0 4px 14px rgba(15,46,84,.08)}
.vcard:focus-within{border-color:var(--werqin-primary,#0b5cc4);box-shadow:0 0 0 3px rgba(11,92,196,.15)}
.vcard.is-top{border:2px solid #f2c14e;background:#fffdf5}
.vcard-body{flex:1 1 auto;min-width:0}
.vcard-badges{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.vcard-new{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:#e3f5ea;color:#1d6b3c;font-size:12px;font-weight:700;line-height:20px}
.vcard-title{margin:0 0 3px;font-size:19px;font-weight:700;line-height:1.3}
.vcard-link{color:#0b4fa8;text-decoration:none}
.vcard-link::after{content:'';position:absolute;inset:0;border-radius:12px}
.vcard-link:hover,.vcard-link:focus{text-decoration:underline;outline:none}
.vcard-meta{margin:0 0 7px;color:#4f6475;font-size:14px}
.vcard-km{display:inline-block;margin-left:8px;padding:0 8px;border-radius:999px;background:#eef4fb;color:#21456b;font-size:12px;font-weight:700;line-height:20px}
.vcard-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.vcard-facts span{padding:2px 9px;border-radius:999px;background:#eef4fb;color:#21456b;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap}
.vcard-intro{max-height:54px;margin:0 0 6px;overflow:hidden;color:#536276;font-size:13px;line-height:20px;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 30px,transparent 54px);mask-image:linear-gradient(to bottom,#000 0,#000 30px,transparent 54px)}
.vcard-age{margin:0;color:#7a8b96;font-size:12px}
.vcard-logo{flex:0 0 112px;display:flex;align-items:center;justify-content:center;min-height:72px}
.vcard-logo img{max-width:112px;max-height:64px;object-fit:contain}
.vcard-initials{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:14px;background:#e8f1fc;color:#0b5cc4;font-size:22px;font-weight:800}
@media(max-width:600px){.vcard{padding:14px;gap:12px}.vcard-logo{flex-basis:48px;min-height:0}.vcard-logo img{max-width:48px;max-height:36px}.vcard-initials{width:44px;height:44px;font-size:16px;border-radius:10px}.vcard-title{font-size:17px}}

/* Accountmenu rechtsboven (werkgevers) */
#login_div.account-menu-wrap { margin-top: 18px; }
.account-menu { position: relative; }
.account-menu > summary { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 8px 14px; border: 1px solid #d5e0ea; border-radius: 999px; background: #fff; color: #173f55; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; user-select: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { border-color: #9fbbd4; background: #f5f9fd; }
.account-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050; min-width: 220px; padding: 6px; border: 1px solid #dfe7ef; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(15, 46, 84, .14); text-align: left; }
.account-menu-email { padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid #edf2f6; color: #5b6f7c; font-size: 12px; overflow-wrap: anywhere; }
.account-menu-list a, .account-menu-list button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: #263c47; font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu-list a:hover, .account-menu-list button:hover, .account-menu-list a:focus, .account-menu-list button:focus { background: #eef4fb; color: #0b4fa8; text-decoration: none; }
.account-menu-list form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid #edf2f6; }
@media (max-width: 767px) {
    #login_div.account-menu-wrap { margin: 8px auto 4px; }
    .account-menu-list { right: 50%; transform: translateX(50%); }
}

/* Werkgeversmenu op mobiel: één veegbare regel in plaats van een lange lijst onder elkaar. */
@media (max-width: 767px) {
    .employer-nav-bar { min-height: 0; }
    .employer-nav-bar .container-fluid { padding: 0; }
    .employer-nav-bar .navbar-collapse { padding: 0; margin: 0 !important; border: 0; box-shadow: none; }
    .employer-nav-bar .navbar-nav { display: flex; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .employer-nav-bar .navbar-nav::-webkit-scrollbar { display: none; }
    .employer-nav-bar .navbar-nav > li { float: none; flex: 0 0 auto; }
    .employer-nav-bar .navbar-nav > li > a { padding: 12px 10px !important; white-space: nowrap; }
}
@media (max-width: 767px) {
    /* Ingelogde werkgever: alleen het accountmenu in de kop, dus geen lege ruimte eronder. */
    #header:has(> #login_div.account-menu-wrap) { min-height: 0; padding-bottom: 6px; }
}

/* Adres volgt uit de postcode */
.address-locked { background: #f3f6f9 !important; color: #34495a !important; cursor: not-allowed; }
select.address-locked { pointer-events: auto; appearance: none; -webkit-appearance: none; background-image: none !important; }
.address-hint { margin: 2px 0 10px; padding: 8px 12px; border-radius: 8px; background: #eef5fd; color: #21456b; font-size: 13px; line-height: 1.45; }
.address-hint.is-ok { background: #e9f7ef; color: #1d6b3c; }
.address-hint.is-warn { background: #fff4e0; color: #7a4a00; }
.address-hint.is-err { background: #fdecea; color: #a3261b; font-weight: 600; }

/* Logo op telefoon en tablet (het grote logo is daar verborgen) */
.mobile-brand { display: none; }
@media (max-width: 991px) {
    .mobile-brand { display: inline-flex; align-items: center; padding: 8px 0 4px; }
    .mobile-brand img { height: 44px; width: auto; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .mobile-brand { float: left; margin: 10px 0 0 10px; }
}
@media (max-width: 767px) {
    .mobile-brand { order: 0; width: 100%; justify-content: center; }
    /* Ingelogde werkgever: logo links, accountmenu rechts op één regel. */
    #header:has(> #login_div.account-menu-wrap) { flex-wrap: nowrap; align-items: center; justify-content: space-between; min-height: 0; padding: 6px 4px; }
    #header:has(> #login_div.account-menu-wrap) .mobile-brand { width: auto; padding: 0; }
    #header:has(> #login_div.account-menu-wrap) .mobile-brand img { height: 38px; }
    #login_div.account-menu-wrap { width: auto; margin: 0; flex: 0 1 auto; min-width: 0; }
    .account-menu > summary { max-width: 46vw; padding: 7px 12px; font-size: 13px; }
    .account-menu-list { right: 0; transform: none; }
    /* Werkgeversmenu: zichtbaar dat je opzij kunt vegen. */
    .employer-nav-bar .navbar-nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; scroll-snap-type: x proximity; }
    .employer-nav-bar .navbar-nav > li { scroll-snap-align: start; }
}
@media (max-width: 767px) {
    .employer-nav-bar .navbar-nav.at-end { -webkit-mask-image: none; mask-image: none; }
}

/* Werkgeversmenu op telefoon en smal venster: één vaste rij pictogrammen met korte labels, alles in beeld
   (geen veegrij). Over ons en Contact staan in de footer. */
.employer-nav-bar .nav-short { display: none; }
@media (max-width: 767px) {
    .employer-nav-bar .navbar-nav { display: grid !important; grid-template-columns: repeat(var(--nav-items, 6), minmax(0, 1fr)); overflow: visible; padding: 4px 2px !important;
        -webkit-mask-image: none !important; mask-image: none !important; scroll-snap-type: none; }
    .employer-nav-bar .navbar-nav > li.nav-secondary { display: none; }
    .employer-nav-bar .navbar-nav::before, .employer-nav-bar .navbar-nav::after { display: none !important; content: none !important; }
    .employer-nav-bar .navbar-nav > li { min-width: 0; }
    .employer-nav-bar.navbar { margin-left: 0; margin-right: 0; }
    .employer-nav-bar .navbar-nav > li > a { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 54px; padding: 7px 0 !important; border-radius: 10px; font-size: 10.5px !important; line-height: 1.15; letter-spacing: -.1px; text-align: center; white-space: nowrap; }
    .employer-nav-bar .navbar-nav > li > a .glyphicon { font-size: 17px; margin: 0 !important; }
    .employer-nav-bar .navbar-nav > li > a > span:not(.glyphicon) { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .employer-nav-bar .nav-full { display: none; }
    .employer-nav-bar .nav-short { display: inline; }
}
@media (max-width: 439px) {
    /* Smalle telefoon: 2 rijen van 3, zodat elk label volledig leesbaar is. */
    .employer-nav-bar .navbar-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2px; }
    .employer-nav-bar[data-level="start"] .navbar-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .employer-nav-bar .navbar-nav > li > a { flex-direction: row; gap: 6px; min-height: 40px; font-size: 12.5px !important; letter-spacing: 0; }
    .employer-nav-bar .navbar-nav > li > a .glyphicon { font-size: 14px; }
}

/* Tabellen die op een telefoon onder elkaar komen: elke rij een kaartje met labels (td[data-label]). */
.wq-stack-table td.wq-stack-action { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
    .wq-stack-table, .wq-stack-table tbody, .wq-stack-table tr, .wq-stack-table td { display: block; width: 100% !important; }
    .wq-stack-table thead { display: none; }
    .wq-stack-table tr { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #dfe7ef; border-radius: 10px; background: #fff !important; }
    .wq-stack-table td { background: transparent !important; display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 !important; border: 0 !important; text-align: right; overflow-wrap: anywhere; }
    .wq-stack-table td[data-label]::before { content: attr(data-label); flex: 0 0 auto; color: #5b6f7c; font-weight: 600; text-align: left; }
    .wq-stack-table td.wq-stack-action { justify-content: flex-start; padding-top: 8px !important; }
    .wq-stack-table td.wq-stack-action .btn { width: 100%; }
    .wq-stack-table td.dataTables_empty { display: block; text-align: center; }
    .wq-logs .dataTables_wrapper .dataTables_length, .wq-logs .dataTables_wrapper .dataTables_info, .wq-logs .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; margin: 6px 0; }
}

/* Werkwijze in het accountmenu */
.account-menu-list a.account-menu-level { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; background: #f3f8ff; }
.account-menu-level strong { color: #173f55; }
.account-menu-level-change { color: var(--werqin-primary, #0b5cc4); font-size: 12px; font-weight: 700; }
.work-level-flash { margin: 0 0 14px; padding: 12px 16px; border: 1px solid #cfe9d8; border-radius: 12px; background: #f1faf4; color: #1d4d33; font-size: 14.5px; line-height: 1.5; }
.work-level-flash a { font-weight: 700; white-space: nowrap; }

/* Kop voor gasten: knop Vacature plaatsen (op smalle schermen staat hij op de homepage zelf) */
.header-guest-actions .header-post-vacancy { background: #fff; border-color: var(--werqin-primary, #0b5cc4) !important; color: var(--werqin-primary, #0b5cc4) !important; }
.header-guest-actions .header-post-vacancy .glyphicon { font-size: 11px; margin-right: 2px; }
@media (max-width: 991px) { .header-guest-actions .header-post-vacancy { display: none !important; } }
a.employer-portal-benefit { color: inherit; text-decoration: none; }
a.employer-portal-benefit:hover span:last-child { text-decoration: underline; }
.employer-feature-card h2 a { color: inherit; text-decoration: none; }
.employer-feature-card h2 a:hover { text-decoration: underline; }
.home-employer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 14px 0 0; padding: 12px 16px; border: 1px solid #dfe7ef; border-radius: 12px; background: #fff; color: #34495a; font-size: 15px; text-align: center; }
.home-employer-cta a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--werqin-primary, #0b5cc4); color: #fff !important; font-weight: 700; text-decoration: none !important; }
.account-menu-list a.account-menu-sep { margin-top: 4px; padding-top: 10px; border-top: 1px solid #e3eaf1; border-radius: 0 0 8px 8px; }

/* Tabellen in kennisbankartikelen */
.knowledge-body table{width:100%;margin:6px 0 22px;border-collapse:collapse;font-size:15px;line-height:1.5}
.knowledge-body th,.knowledge-body td{padding:9px 12px;border:1px solid #dce5ea;text-align:left;vertical-align:top}
.knowledge-body thead th{background:#f1f6f9;color:#263b48;font-weight:700}
@media(max-width:767px){.knowledge-body table{font-size:14px}.knowledge-body th,.knowledge-body td{padding:7px 8px}}