/* =========================================== */
/* Overzichtspagina - Variable-Based Values */
/* =========================================== */
/* Card Settings */
@media only screen and (max-width: 768px) {
	#t2m-job .t2m-job-overview .t2m-job-card {
		min-width: 100%;
	}
}

#t2m-job[data-template="Default"] .t2m-job-overview .t2m-job-card {
	width: 100% !important;
}

#t2m-job[data-template="Grid"] .t2m-job-overview .t2m-job-card {
	width: var(--t2m-job-columns-overview-size) !important;
}

#t2m-job[data-template="Overlay"] .t2m-job-overview .t2m-job-card {
	width: var(--t2m-job-columns-overview-size) !important;
}

.t2m-bg-color-overview {
	background-color: var(--t2m-bg-color-overview) !important;
}

.t2m-border-overview {
	border: var(--t2m-border-overview) !important;
}

.t2m-border-radius-overview {
	border-radius: var(--t2m-border-radius-overview) !important;
}

.t2m-box-shadow-overview {
	box-shadow: var(--t2m-box-shadow-overview) !important;
}

/* Title Settings */
.t2m-title-overview-color {
	color: var(--t2m-title-overview-color) !important;
}

.t2m-title-overview-font-size {
	font-size: var(--t2m-title-overview-font-size) !important;
}

.t2m-title-overview-font {
	font-family: var(--t2m-title-overview-font), sans-serif !important;
}

/* Text Settings */
.t2m-text-overview-color {
	color: var(--t2m-text-overview-color) !important;
}

.t2m-text-overview-font-size {
	font-size: var(--t2m-text-overview-font-size) !important;
}

.t2m-text-overview-font {
	font-family: var(--t2m-text-overview-font), sans-serif !important;
}

/* Details Settings */
.t2m-details-overview-font-size {
	font-size: var(--t2m-text-overview-font-size) !important;
}

.t2m-details-text-overview-font {
	font-family: var(--t2m-details-text-overview-font), sans-serif !important;
}

/* =========================================== */
/* Overzichtspagina - Variable-Based Values */
/* =========================================== */
/* Template Settings */
#t2m-job .t2m-job-thumb {
	border-radius: var(--t2m-border-radius-overview) var(--t2m-border-radius-overview) 0 0;
}

/* =========================================== */
/* Detailpagina - Variable-Based Values */
/* =========================================== */
.t2m-header-bg {
	background-color: var(--t2m-header-bg) !important;
}

.t2m-header-vacancy-overlay {
	background-color: var(--t2m-header-vacancy-overlay) !important;
}

/* Title Settings */
.t2m-header-icon-vacancy-color {
	fill: var(--t2m-header-icon-vacancy-color) !important;
}

.t2m-title-vacancy-color {
	color: var(--t2m-title-vacancy-color) !important;
}

.t2m-title-vacancy-font-size {
	font-size: var(--t2m-title-vacancy-font-size) !important;
}

.t2m-title-vacancy-font {
	font-family: var(--t2m-title-vacancy-font), sans-serif !important;
}

/* ======================================================================= */
/* Heading-override met hogere specificity (ID-scope)                       */
/* Sommige thema's stylen kop-tags via een ID, bijv. Divi:                  */
/*   body h2, #page-container h2 { font-size/line-height !important }       */
/*   #page-container h1..h6 { font-family !important }                      */
/* (specificity 1-0-1). Een losse class-selector (0-1-0) verliest daarvan,  */
/* ook met !important: een ID slaat altijd classes. Onze frontend-koppen    */
/* staan allemaal in #t2m-job (titel, video-titel, sidebar-titel/subtitel,  */
/* sollicitatie-titel) of in #t2m-header (header-titel). Door onder die     */
/* ID's te scopen wordt het 1-1-0 (resp. 1-1-1) en winnen we van 1-0-1.     */
/* Geldt voor standaard- en overlay-template. Alleen font-size + font +     */
/* color: line-height (1.2) laten we met rust.                              */
/* ======================================================================= */

/* Detailtitel (h2) */
#t2m-job .t2m-title-vacancy-font-size {
	font-size: var(--t2m-title-vacancy-font-size) !important;
}
#t2m-job .t2m-title-vacancy-font {
	font-family: var(--t2m-title-vacancy-font), sans-serif !important;
}
#t2m-job .t2m-title-vacancy-color {
	color: var(--t2m-title-vacancy-color) !important;
}

/* Overzichtstitel (h2) */
#t2m-job .t2m-title-overview-font-size {
	font-size: var(--t2m-title-overview-font-size) !important;
}
#t2m-job .t2m-title-overview-font {
	font-family: var(--t2m-title-overview-font), sans-serif !important;
}
#t2m-job .t2m-title-overview-color {
	color: var(--t2m-title-overview-color) !important;
}

/* Video-titel (h2) */
#t2m-job .t2m-video-title-font-size {
	font-size: var(--t2m-video-title-font-size) !important;
}
#t2m-job .t2m-video-title-font {
	font-family: var(--t2m-video-title-font), sans-serif !important;
}
#t2m-job .t2m-video-title-color {
	color: var(--t2m-video-title-color) !important;
}

/* Sidebar-titel (h3) */
#t2m-job .t2m-sidebar-title-font-size {
	font-size: var(--t2m-sidebar-title-font-size) !important;
}
#t2m-job .t2m-sidebar-title-font {
	font-family: var(--t2m-sidebar-title-font), sans-serif !important;
}
#t2m-job .t2m-sidebar-title-color {
	color: var(--t2m-sidebar-title-color) !important;
}

/* Sidebar-subtitel (h4) */
#t2m-job .t2m-sidebar-subtitle-font-size {
	font-size: var(--t2m-sidebar-subtitle-font-size) !important;
}
#t2m-job .t2m-sidebar-subtitle-font {
	font-family: var(--t2m-sidebar-subtitle-font), sans-serif !important;
}
#t2m-job .t2m-sidebar-subtitle-color {
	color: var(--t2m-sidebar-subtitle-color) !important;
}

/* Sollicitatie-titel (h3, styling via parent-class -> descendant h3) */
#t2m-job .t2m-title-apply-font-size h3 {
	font-size: var(--t2m-title-apply-font-size) !important;
}
#t2m-job .t2m-title-apply-font h3 {
	font-family: var(--t2m-title-apply-font), sans-serif !important;
}
#t2m-job .t2m-title-apply-color h3 {
	color: var(--t2m-title-apply-color) !important;
}

/* Header-titel (h1) buiten #t2m-job -> eigen ID #t2m-header */
#t2m-header .t2m-header-title {
	font-size: var(--t2m-title-vacancy-font-size) !important;
	font-family: var(--t2m-title-vacancy-font), sans-serif !important;
	color: var(--t2m-title-vacancy-color) !important;
}

.t2m-video-title-color {
	color: var(--t2m-video-title-color) !important;
}

.t2m-video-title-font-size {
	font-size: var(--t2m-video-title-font-size) !important;
}

.t2m-video-title-font {
	font-family: var(--t2m-video-title-font), sans-serif !important;
}
.t2m-header-text-vacancy-color {
	color: var(--t2m-header-text-vacancy-color) !important;
}

.t2m-header-text-vacancy-font-size {
	font-size: var(--t2m-header-text-vacancy-font-size) !important;
}

.t2m-header-text-vacancy-font * {
	font-family: var(--t2m-header-text-vacancy-font), sans-serif !important;
}

.t2m-header-detail-vacancy-color {
	color: var(--t2m-header-detail-vacancy-color) !important;
}

.t2m-header-text-vacancy-font-size {
	font-size: var(--t2m-header-detail-vacancy-font-size) !important;
}

.t2m-header-text-vacancy-font * {
	font-family: var(--t2m-header-detail-vacancy-font), sans-serif !important;
}


/* Text Settings */
.t2m-text-vacancy-color {
	color: var(--t2m-text-vacancy-color) !important;
}

.t2m-text-vacancy-font-size,
.t2m-text-vacancy-font-size * {
	font-size: var(--t2m-text-vacancy-font-size) !important;
}

.t2m-text-vacancy-font,
.t2m-text-vacancy-font * {
	font-family: var(--t2m-text-vacancy-font), sans-serif !important;
}

/* Tag Settings */
.t2m-text-vacancy-tag-color,
.t2m-text-vacancy-tag-color .t2m-job-tag {
	color: var(--t2m-text-vacancy-tag-color) !important;
}

.t2m-text-vacancy-tag-font-size {
	font-size: var(--t2m-text-vacancy-tag-font-size) !important;
}

.t2m-text-vacancy-tag-font {
	font-family: var(--t2m-text-vacancy-tag-font), sans-serif !important;
}

/* =========================================== */
/* Sollicitatie pagina - Variable-Based Values */
/* =========================================== */
/* Title Settings */
.t2m-title-apply-color h3 {
	color: var(--t2m-title-apply-color) !important;
}

.t2m-title-apply-font-size h3 {
	font-size: var(--t2m-title-apply-font-size) !important;
}

.t2m-title-apply-font h3 {
	font-family: var(--t2m-title-apply-font), sans-serif !important;
}

/* Text Settings */
.t2m-text-apply-color,
.t2m-text-apply-color label,
.t2m-text-apply-color input,
.t2m-text-apply-color span,
.t2m-text-apply-color p {
	color: var(--t2m-text-apply-color) !important;
}

.t2m-text-apply-font-size,
.t2m-text-apply-font-size label,
.t2m-text-apply-font-size input,
.t2m-text-apply-font-size span,
.t2m-text-apply-font-size p {
	font-size: var(--t2m-text-apply-font-size) !important;
}

.t2m-text-apply-font,
.t2m-text-apply-font label,
.t2m-text-apply-font input,
.t2m-text-apply-font span,
.t2m-text-apply-font p {
	font-family: var(--t2m-text-apply-font), sans-serif !important;
}

/* General Settings */
.t2m-bg-color-apply {
	background-color: var(--t2m-bg-color-apply) !important;
}

/* Tijdelijk uitgezet op klantverzoek (2026-05-11) - check SD-groep gebruik voordat verwijderen.
.t2m-sidebar-title-bg {
	background-color: var(--t2m-sidebar-title-bg) !important;
}
*/

/* =========================================== */
/* Filter element styling - Variable-Based Values */
/* =========================================== */
.t2m-filter-border-radius {
	border-radius: var(--t2m-filter-border-radius, 0) !important;
}

.t2m-filter-border {
	border-width: var(--t2m-filter-border-width, 0) !important;
	border-style: var(--t2m-filter-border-style, solid) !important;
	border-color: var(--t2m-filter-border-color, #000) !important;
}

.t2m-filter-padding {
	padding: var(--t2m-filter-padding, 10px 20px) !important;
}

.t2m-filter-bg-color {
	background-color: var(--t2m-filter-bg-color, transparent) !important;
}

.t2m-filter-bg-color-hover:hover {
	background-color: var(--t2m-filter-bg-color-hover, transparent) !important;
}

.t2m-filter-box-shadow {
	box-shadow: var(--t2m-filter-box-shadow, unset) !important;
}

/* =========================================== */
/* Button styling - Variable-Based Values */
/* =========================================== */
/* Reset native button defaults zodat .t2m-submit-button (button-element)
   visueel gelijk rendert aan de andere job-button anchors. De externe
   widget (static.tool2match.nl/widgets.js) injecteert deze button, dus
   we kunnen de t2m_btn_* classes niet via PHP toevoegen en moeten
   styling via dubbele selectors koppelen. */
button.t2m-submit-button,
#t2m-job .t2m-submit-button {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	line-height: inherit;
	font-family: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	box-sizing: border-box;
	cursor: pointer;
	text-decoration: none;
}

.t2m-btn-bg-color,
#t2m-job .t2m-submit-button {
	background-color: var(--t2m-btn-bg-color) !important;
}

.t2m-btn-bg-color-hover:hover,
#t2m-job .t2m-submit-button:hover {
	background-color: var(--t2m-btn-bg-color-hover) !important;
}

.t2m-btn-text-color,
#t2m-job .t2m-submit-button {
	color: var(--t2m-btn-text-color) !important;
}

.t2m-btn-text-color-hover:hover,
#t2m-job .t2m-submit-button:hover {
	color: var(--t2m-btn-text-color-hover) !important;
}

.t2m-btn-font,
#t2m-job .t2m-submit-button {
	font-family: var(--t2m-btn-font), sans-serif !important;
}

.t2m-btn-font-size,
#t2m-job .t2m-submit-button {
	font-size: var(--t2m-btn-font-size) !important;
}

.t2m-btn-border,
#t2m-job .t2m-submit-button {
	border: var(--t2m-btn-border) !important;
}

.t2m-btn-border-hover:hover,
#t2m-job .t2m-submit-button:hover {
	border: var(--t2m-btn-border-hover) !important;
}

.t2m-btn-border-radius,
#t2m-job .t2m-submit-button {
	border-radius: var(--t2m-btn-border-radius) !important;
}

.t2m-btn-padding,
#t2m-job .t2m-submit-button {
	padding: var(--t2m-btn-padding) !important;
}

.t2m-btn-box-shadow,
#t2m-job .t2m-submit-button {
	box-shadow: var(--t2m-btn-box-shadow) !important;
}

.t2m-secondary-btn-bg-color,
a.t2m-secondary-button,
.t2m-secondary-button {
	background-color: var(--t2m-secondary-btn-bg-color) !important;
}

.t2m-secondary-btn-bg-color-hover:hover,
a.t2m-secondary-button:hover,
.t2m-secondary-button:hover {
	background-color: var(--t2m-secondary-btn-bg-color-hover) !important;
}

.t2m-secondary-btn-text-color,
a.t2m-secondary-button,
.t2m-secondary-button {
	color: var(--t2m-secondary-btn-text-color) !important;
}

.t2m-secondary-btn-text-color-hover:hover,
a.t2m-secondary-button:hover,
.t2m-secondary-button:hover {
	color: var(--t2m-secondary-btn-text-color-hover) !important;
}

.t2m-secondary-btn-font,
a.t2m-secondary-button,
.t2m-secondary-button {
	font-family: var(--t2m-secondary-btn-font), sans-serif !important;
}

.t2m-secondary-btn-font-size,
a.t2m-secondary-button,
.t2m-secondary-button {
	font-size: var(--t2m-secondary-btn-font-size) !important;
}

.t2m-secondary-btn-border,
a.t2m-secondary-button,
.t2m-secondary-button {
	border: var(--t2m-secondary-btn-border) !important;
}

.t2m-secondary-btn-border-hover:hover,
a.t2m-secondary-button:hover,
.t2m-secondary-button:hover {
	border: var(--t2m-secondary-btn-border-hover) !important;
}

.t2m-secondary-btn-border-radius,
a.t2m-secondary-button,
.t2m-secondary-button {
	border-radius: var(--t2m-secondary-btn-border-radius) !important;
}

.t2m-secondary-btn-padding,
a.t2m-secondary-button,
.t2m-secondary-button {
	padding: var(--t2m-secondary-btn-padding) !important;
}

.t2m-secondary-btn-box-shadow,
a.t2m-secondary-button,
.t2m-secondary-button {
	box-shadow: var(--t2m-secondary-btn-box-shadow) !important;
}

.t2m-sidebtn-border-radius {
	border-radius: var(--t2m-sidebtn-border-radius) !important;
}

/* Vacature overzicht button */
.t2m-overview-btn-bg-color {
	background-color: var(--t2m-overview-btn-bg-color) !important;
}

.t2m-overview-btn-bg-color-hover:hover {
	background-color: var(--t2m-overview-btn-bg-color-hover) !important;
}

.t2m-overview-btn-text-color {
	color: var(--t2m-overview-btn-text-color) !important;
}

.t2m-overview-btn-text-color-hover:hover {
	color: var(--t2m-overview-btn-text-color-hover) !important;
}

.t2m-overview-btn-font {
	font-family: var(--t2m-overview-btn-font), sans-serif !important;
}

.t2m-overview-btn-font-size {
	font-size: var(--t2m-overview-btn-font-size) !important;
}

.t2m-overview-btn-border {
	border: var(--t2m-overview-btn-border) !important;
}

.t2m-overview-btn-border-hover:hover {
	border: var(--t2m-overview-btn-border-hover) !important;
}

.t2m-overview-btn-border-radius {
	border-radius: var(--t2m-overview-btn-border-radius) !important;
}

.t2m-overview-btn-padding {
	padding: var(--t2m-overview-btn-padding) !important;
}

.t2m-overview-btn-box-shadow {
	box-shadow: var(--t2m-overview-btn-box-shadow) !important;
}

/* =========================================== */
/* Sidebar styling - Variable-Based Values */
/* =========================================== */
/* General sidebar */
.t2m-sidebar-bg {
	background-color: var(--t2m-sidebar-bg) !important;
}

.t2m-sidebar-padding {
	padding: var(--t2m-sidebar-padding) !important;
}

.t2m-sidebar-border {
	border: var(--t2m-sidebar-border) !important;
}

.t2m-sidebar-border-radius {
	border-radius: var(--t2m-sidebar-border-radius) !important;
}

/* Titel sidebar */
.t2m-sidebar-title-font {
	font-family: var(--t2m-sidebar-title-font), sans-serif !important;
}

.t2m-sidebar-title-font-size {
	font-size: var(--t2m-sidebar-title-font-size) !important;
}

.t2m-sidebar-title-color {
	color: var(--t2m-sidebar-title-color) !important;
}

/* Subtitle sidebar */
.t2m-sidebar-subtitle-font {
	font-family: var(--t2m-sidebar-subtitle-font), sans-serif !important;
}

.t2m-sidebar-subtitle-font-size {
	font-size: var(--t2m-sidebar-subtitle-font-size) !important;
}

.t2m-sidebar-subtitle-color {
	color: var(--t2m-sidebar-subtitle-color) !important;
}

/* Text sidebar */
.t2m-sidebar-text-font {
	font-family: var(--t2m-sidebar-text-font), sans-serif !important;
}

.t2m-sidebar-text-font-size {
	font-size: var(--t2m-sidebar-text-font-size) !important;
}

.t2m-sidebar-text-color {
	color: var(--t2m-sidebar-text-color) !important;
}

/* Icons sidebar */
.t2m-sidebar-icons-color a > svg {
	fill: var(--t2m-sidebar-icons-color) !important;
	transition: 250ms ease;
}

.t2m-sidebar-icons-color-hover a:hover > svg {
	fill: var(--t2m-sidebar-icons-color-hover) !important;
}

/* Privacy policy */
#t2m-job .t2m-agreement-box span a {
	color: var(--t2m-sidebar-agreement-box) !important;
}

/* Linkjes recruiter */
#t2m-job .t2m-job-recruiter-detail a {
	color: var(--t2m-sidebar-recruiter) !important;
}

.t2m-job-title-sollicitatie.t2m-title-apply-font-size {
	padding-bottom: 25px !important;
}