/* maatwerk css klant Rijken Gerechtsdeurwaarders (rijkendeurwaarders.nl, WordPress/Elementor) > huisstijl nagebouwd voor template all_index.doc.php
   kleuren/typografie/maten gemeten op de website (1400px breed); aanpassen als de website wijzigt */

:root {
	--rk-primary: #EB6608;			/* oranje: koppen, actief menu, knoppen */
	--rk-primary-alt: #ec640b;		/* oranje variant (iconen/zoekknop website) */
	--rk-secondary: #4C565C;		/* donkergrijs: logo, uitklapmenu, burger */
	--rk-text: #7A7A7A;				/* grijs: menu-items, social-icons */
	--rk-text-light: #828282;		/* grijs: topbalk tekst */
	--rk-body: #444444;				/* tekstkleur body */
	--rk-link: #1bb0ce;				/* blauw: tekstlinks (website) */
	--rk-grey: #F4F4F4;				/* lichtgrijs: topbalk, uitklapmenu, lijnen */
	--rk-grey-hover: #eaeaea;
	--rk-sep: #d3d3d3;
	--rk-white: #fff;
	--rk-font-heading: 'Montserrat', sans-serif;
	--rk-font-text: 'Open Sans', sans-serif;
	--rk-container: 1370px;			/* elementor container (boxed) */
}

/* ------------------------------------------------------------------ basis */
html {
	-webkit-font-smoothing: antialiased;
}
body {
	font-family: var(--rk-font-text);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--rk-body);
	background: var(--rk-white);
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--rk-font-heading);
	font-weight: 600;
	color: var(--rk-primary);
	line-height: 1.33;
}
/* px ipv rem: bootstrap zet html op 10px */
h1, .h1 { font-size: 36px; line-height: 48px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 22px; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }

a,
a:visited {
	color: var(--rk-link);
	text-decoration: none !important;
}
a:hover,
a:active,
a:focus {
	color: var(--rk-primary);
	text-decoration: none;
}

.rk-container {
	width: 100%;
	max-width: var(--rk-container);
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------ topbalk (online dossier + zoeken) */
#rk-topbar {
	background: var(--rk-grey);
	padding: 15px;
}
#rk-topbar .rk-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	min-height: 40px;
}
#rk-topbar .rk-topbar-left {
	display: flex;
	align-items: center;
	flex: 1 1 50%;
}
#rk-topbar .rk-topbar-link {
	display: inline-flex;
	align-items: center;
	font-family: var(--rk-font-text);
	font-size: 14px;
	line-height: 21px;
	color: var(--rk-text-light);
	text-decoration: none;
	transition: color .3s;
}
#rk-topbar .rk-topbar-link i {
	color: var(--rk-primary-alt);
	font-size: 15px;
	width: 19px;
	margin-right: 10px;
	text-align: center;
}
#rk-topbar .rk-topbar-link span {
	padding-left: 5px;
}
#rk-topbar .rk-topbar-link:hover {
	color: var(--rk-primary);
}
/* ------------------------------------------------------------------ header (logo + menu) */
#top {
	background: var(--rk-white);
	padding: 15px;
	border-bottom: 2px solid var(--rk-grey);
	position: relative;
	z-index: 20;
}
#top .rk-container {
	display: flex;
	align-items: center;
	min-height: 76px;
}
#top .rk-logo-col {
	flex: 0 0 auto;
	width: 389px;
	padding: 0 15px;
	display: flex;
	align-items: center;
}
#top #logo {
	display: block;
	line-height: 0;
	margin-bottom: -10px; /* logo (schild) steekt onder de lijn uit, zoals op de website */
	position: relative;
	top: 17px; /* website: logo op y=100 (30px onder de topbalk), schild over de onderlijn heen */
	z-index: 58;
}
#top #logo img {
	width: 300px;
	height: 90px;
	display: block;
}
#top .rk-nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 15px;
	min-width: 0;
}
#top .rk-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
#top .rk-menu > li {
	margin: 0;
	padding: 0;
	display: flex;
}
#top .rk-menu > li > a {
	position: relative;
	display: block;
	font-family: var(--rk-font-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 20px;
	color: var(--rk-text);
	text-decoration: none;
	padding: 0;
	margin: 0 15px 0 0;
	white-space: nowrap;
	transition: color .3s;
}
#top .rk-menu > li:last-child > a {
	margin-right: 0;
}
/* e--pointer-underline: lijn onder actief/hover item */
#top .rk-menu > li > a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 100%;
	height: 3px;
	background-color: var(--rk-primary);
	opacity: 0;
	transition: opacity .3s;
}
#top .rk-menu > li > a:hover,
#top .rk-menu > li > a:focus,
#top .rk-menu > li.active > a {
	color: var(--rk-primary);
}
#top .rk-menu > li > a:hover:after {
	opacity: 1; /* website: actief item alleen oranje, lijn alleen bij hover */
}
#top .rk-nova {
	display: flex;
	align-items: center;
	margin-left: 24px;
	font-family: var(--rk-font-heading);
	font-size: 28px;
	font-weight: 600;
	color: var(--rk-secondary);
}

/* burger (alleen mobiel/tablet), cf. elementor-menu-toggle */
#top .rk-toggle {
	display: none;
	background: rgba(0, 0, 0, .05);
	border: 0;
	border-radius: 3px;
	padding: 5.5px;
	margin: 0 0 0 auto;
	cursor: pointer;
	color: var(--rk-secondary);
	font-size: 22px;
	line-height: 22px;
	width: 33px;
	height: 33px;
	align-items: center;
	justify-content: center;
	transition: color .3s, background .3s;
}
#top .rk-toggle:hover {
	color: var(--rk-primary);
}
#top .rk-toggle .rk-toggle-close { display: none; }
#top .rk-toggle[aria-expanded="true"] .rk-toggle-open { display: none; }
#top .rk-toggle[aria-expanded="true"] .rk-toggle-close { display: inline; }

/* bootstrap .navbar-collapse overrulen: desktop altijd zichtbaar */
#top .navbar-collapse {
	padding: 0;
	border: 0;
	box-shadow: none;
	overflow: visible;
}

/* ------------------------------------------------------------------ content */
#content {
	flex: 1 0 auto;
	padding: 80px 15px 60px 15px; /* website: main start 80px onder header */
	background: var(--rk-white);
}
#content .content-container {
	position: relative;
	padding: 0 15px;
}
#content h1 {
	text-align: center;
	margin: 0 0 40px 0;
}

/* ------------------------------------------------------------------ footer */
#bottom {
	position: relative;
	background-color: #bcbcbc;
	/* achtergrondfoto via inline style in template */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0 0 58px 0; /* website: 55px boven (schild staat erin), onder zo dat totale hoogte 334px is */
	color: var(--rk-white);
	font-family: var(--rk-font-text);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .5px;
	line-height: 24px;
}
#bottom .rk-footer-overlay {
	position: absolute;
	inset: 0;
	background-color: #bcbcbc;
	opacity: .85;
}
#bottom .rk-footer-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
}
#bottom .rk-footer-col {
	padding: 0 15px;
	text-align: center;
}
#bottom .rk-footer-col--side {
	flex: 0 0 25%;
	max-width: 25%;
}
#bottom .rk-footer-col--main {
	flex: 0 0 50%;
	max-width: 50%;
	align-self: flex-start;
}
#bottom .rk-footer-shield {
	display: block;
	width: 72px;
	height: 80px;
	margin: 0 auto 20px auto;
}
#bottom .rk-footer-text {
	margin: 0 0 20px 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .5px;
	line-height: 24px;
	color: var(--rk-white);
}
#bottom .rk-footer-text p {
	margin: 0;
	font-size: 14px;
	line-height: 24px;
}
#bottom .rk-footer-text .rk-sep {
	color: #dcdcdc;
}
#bottom .rk-footer-text a,
#bottom .rk-footer-text a:visited,
#bottom .rk-footer-credit a,
#bottom .rk-footer-credit a:visited {
	color: var(--rk-link);
	transition: color .3s;
}
#bottom .rk-footer-text a:hover,
#bottom .rk-footer-credit a:hover {
	color: var(--rk-primary);
}
#bottom .rk-footer-social {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 0 0 20px 0;
}
#bottom .rk-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background-color: var(--rk-text);
	border-radius: 10%;
	color: var(--rk-white);
	font-size: 21px;
	line-height: 21px;
	transition: background .3s;
}
#bottom .rk-footer-social a:hover {
	background-color: var(--rk-primary);
	color: var(--rk-white);
}
#bottom .rk-footer-credit {
	margin: 0;
	font-size: 14px;
	line-height: 24px;
	color: var(--rk-white);
}
#bottom .rk-footer-col--huur {
	padding: 0 40px;
	text-align: left;
}
#bottom .rk-footer-col--huur h5 {
	font-family: var(--rk-font-heading);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 18px;
	color: var(--rk-primary);
	margin: 0 0 20px 0;
}
#bottom .rk-footer-col--huur img {
	display: block;
	width: 270px;
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ knoppen cf. huisstijl (oranje, witte tekst) */
.btn {
	font-family: var(--rk-font-text);
	font-weight: 600;
	letter-spacing: .5px;
	border-radius: 3px !important;
	transition: background-color .3s, color .3s;
}
.btn-primary,
.btn-primary:focus,
.btn-primary:visited,
.btn-circle {
	background-color: var(--rk-primary);
	border-color: var(--rk-primary);
	color: var(--rk-white);
}
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:hover,
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-circle:hover {
	background-color: var(--rk-secondary);
	border-color: var(--rk-secondary);
	color: var(--rk-white);
}
.btn-primary-active-check,
.btn-primary-active-check:active,
.btn-primary-active-check:enabled,
.btn-primary-active-check:focus,
.btn-primary-active-check:visited,
.btn-primary-active-check:hover {
	color: var(--rk-primary);
}

/* ------------------------------------------------------------------ OthoOnline componenten (overgenomen uit praclox.mtw.css, kleuren aangepast) */

/* export table niet netjes door css Praclox */
li {
	padding-bottom: 0px;
	margin-left: 0px;
}

th {
	color: var(--rk-secondary);
	font-size: 13px;
}

select {
	padding: 3px 0px;
}

#content .nav > li {
	margin-left: 0px;
	/* margin-bottom: 5px; */
}

/* praclox css past grootte knop sluiten modal aan */
.close > span {
	font-size: 21px;
}

.glyphicon {
	color: var(--rk-primary);
}

/* knop bevat standaard schaduw, deze verwijderen voor exportknop tabel */
.export > .btn,
.export > .btn:active,
.export > .btn:enabled,
.export > .btn:focus,
.export > .btn:hover,
.export > .btn:visited {
	top: 0px;
	box-shadow: none;
	height: 34px;
}

.glyphicon-chevron-right {
	font-size: 13px;
}

/* overrule van margin in template css */
.oo-dossier-ideal {
	margin: 10px !important;
}

/* kleur tabs in dossierplaatje */
.oo-dossier-tabs .nav > li > a {
	font-family: var(--rk-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .5px;
	color: var(--rk-text);
	text-transform: uppercase;
}
.oo-dossier-tabs .nav > li > a:focus,
.oo-dossier-tabs .nav > li > a:hover,
.oo-dossier-tabs .nav-tabs > li.active > a,
.oo-dossier-tabs .nav-tabs > li.active > a:focus,
.oo-dossier-tabs .nav-tabs > li.active > a:hover {
	background-color: var(--rk-primary);
	color: var(--rk-white);
}

.oo-exp-icon-line-active {
	border-color: var(--rk-primary);
}

/* default marge overrulen */
.oo-invoer-bijl-comment {
	margin: 5px 0px 0px 0px;
	font-style: italic;
	color: var(--rk-text);
}

/* knop actief kunnen zetten */
.oo-tab-active {
	box-shadow: 0 2px var(--rk-secondary);
	top: 2px;
}

.oo-pay-extra-icon-active,
.oo-regeling-aantal-active {
	color: var(--rk-primary);
}

/* specificatie zichtbaar maken met kleur */
.oo-saldo-spec > td:first-child {
	color: var(--rk-primary);
}

/* grootte pagination table */
.pagination-info,
.page-list,
.page-size {
	font-size: 13px;
}

.panel-heading a {
	font-size: 14px;
}

/* in geval van tabel kleiner maken */
.detail-view, .table, .select2-results__option, .select2-selection__rendered, .select2-search__field, div, td {
	font-size: 13px;
}

/* kaders/panels cf. website (lichtgrijs, lijn #d6d6d6) */
.panel,
.well,
.modal-content {
	border-radius: 3px;
	border-color: #d6d6d6;
}
.panel-default > .panel-heading {
	background-color: var(--rk-grey);
	border-color: #d6d6d6;
	color: var(--rk-secondary);
	font-family: var(--rk-font-heading);
	font-weight: 600;
}
.form-control {
	border-radius: 0;
	border-color: #d6d6d6;
	font-family: var(--rk-font-text);
	box-shadow: none;
}
.form-control:focus {
	border-color: var(--rk-primary);
	box-shadow: 0 0 0 2px rgba(235, 102, 8, .2);
}

#content .nav { margin-top: 0px; /* margin-bottom: 20px; */ }
#content .oo-tabs-boven { border-bottom: 0px; }
#content .oo-dossier-pdf { width: 25px !important; float: right !important; margin: 10px !important; }
#content .oo-nav > li > a { border-radius: 0px !important; padding: 15px !important; border: none !important; }
#content .oo-nav > li { padding-bottom: 0px; margin: 0px; }
#content .oo-nav { margin: 0px; }

/* ------------------------------------------------------------------ responsive (website: tablet-breakpoint 1024px, mobiel 767px) */
@media (max-width: 1024px) {
	#top .rk-logo-col {
		width: auto;
		flex: 1 1 auto;
	}
	#top .rk-nav {
		flex: 0 0 auto;
	}
	#top .rk-toggle {
		display: flex;
	}
	/* uitklapmenu onder de header, over de hele breedte, cf. elementor dropdown */
	#top .navbar-collapse {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: auto;
		margin: 0;
		padding: 0;
		background: var(--rk-grey);
		z-index: 30;
		box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
	}
	#top .navbar-collapse.collapse {
		display: none !important;
	}
	#top .navbar-collapse.collapse.in {
		display: block !important;
	}
	#top .rk-menu {
		flex-direction: column;
		align-items: stretch;
	}
	#top .rk-menu > li > a {
		font-family: var(--rk-font-text);
		font-size: 14px;
		font-weight: 500;
		letter-spacing: .5px;
		color: var(--rk-secondary);
		padding: 20px 15px;
		margin: 0;
		width: 100%;
		border-bottom: 1px solid var(--rk-grey-hover);
		transition: background .3s, color .3s;
	}
	#top .rk-menu > li:last-child > a {
		border-bottom: 0;
	}
	#top .rk-menu > li > a:after {
		display: none;
	}
	#top .rk-menu > li > a:hover,
	#top .rk-menu > li.active > a {
		background-color: var(--rk-grey-hover);
		color: var(--rk-primary);
	}
	#top .rk-nova {
		font-size: 20px;
		margin-left: 12px;
		margin-right: 12px;
	}
	#content {
		padding-top: 40px;
	}
	#bottom .rk-footer-inner {
		flex-direction: column;
		gap: 30px;
	}
	#bottom .rk-footer-col--side,
	#bottom .rk-footer-col--main {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}
	#bottom .rk-footer-col--huur {
		text-align: center;
		padding: 0 15px;
	}
	#bottom .rk-footer-col--huur img {
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	#rk-topbar .rk-container {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	#rk-topbar .rk-topbar-left {
		flex: 0 0 auto;
	}
	#top .rk-logo-col {
		padding: 0;
	}
	#top #logo img {
		width: 300px;
		max-width: 100%;
		height: auto;
	}
	#top .rk-nav {
		padding: 0;
	}
	#content {
		padding: 30px 15px 40px 15px;
	}
	#content .content-container {
		padding: 0;
		margin-left: 0px;
		margin-right: 0px;
	}
	#content h1 {
		font-size: 28px;
		line-height: 36px;
		margin-bottom: 24px;
	}
	#bottom {
		padding-bottom: 30px;
	}
}