/* DEFAULTS */

html, body {
  height: 100%;
  color:#fff;
}

/* Fallback: body nooit permanent onzichtbaar als JS faalt */
body {
	display: none;
}
html.js-ready body,
body.datic-visible {
	display: block !important;
}
#divLoading
{
    display : none;
}
#divLoading.show{
    display : block;
}
#divLoading.show .fa-spinner{
    display: block;
    position: fixed;
    z-index: 999;
    opacity: 1;
    color: #474d59;
    top: 45%;
    left: calc(50% - 30px)
}

#divLoadingModal
{
    display : none;
}
#divLoadingModal.show{
    display : block;
}
#divLoadingModal.show .fa-spinner{
    display: block;
    position: fixed;
    z-index: 999;
    opacity: 1;
    color: #474d59;
    top: 45%;
    left: calc(50% - 30px)
}
.addSpacingFieldset {
	margin-top: 20px;
}

.identifier{
	background-color:#f7f7f9;
	padding-top:60px;
}

.cc_banner-wrapper {
	height: 63px;
    max-height: 63px;
    position: absolute!important;
}

.bg-default {
	background-color: #f7f7f9;
}

.current {
	font-size: 14pt;
}
.with-errors {
	color:#f95133;
}
.error-template {
	color:#818a91;
	padding: 40px 15px;
	text-align: center;
}
.error-template h1 {
	color: #1e1a17;
	margin-bottom: 0.5rem;
}
.error-template .error-details {
	font-size: 1.05rem;
	line-height: 1.5;
	margin: 1rem auto 1.5rem;
	max-width: 32rem;
}
.error-template .error-actions {
	margin-top: 1.25rem;
}
.error-template .error-actions .btn {
	margin: 0.25rem;
}
.img-circle-chat {
	width: 85px!important;
	height:85px!important;
	margin-right:10px;
}
.unread-circle {
	font-size:70%;
}
.list-unstyled {
	margin-bottom: 0px;
}
.no-cursor {
	cursor: default;
}
.cursor-pointer {
	cursor: pointer;
}
.navbar {
    border-radius: 0;
}
.no-padding {
	padding:0;
}
.modal-title  {
	color: #1e1a17;
	font-family: "Fraunces", Georgia, serif;
	font-weight: 700;
}
.modal-footer {
	border-top: none;
}
.modal {
	color: #6a635c;
}

.scrambled{
	color: transparent !important;
	text-shadow: 0 0 7px rgba(30, 26, 23, 0.45);
	user-select: none;
	pointer-events: none;
}

/* Avatar thumb + loader */
.datic-thumb {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
	background: #d8d2ca;
}
.datic-thumb.rounded-circle,
.datic-thumb .datic-thumb-img.rounded-circle {
	border-radius: 50%;
}
.datic-thumb .datic-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.2s ease;
	position: relative;
	z-index: 1;
}
.datic-thumb.is-loaded .datic-thumb-img {
	opacity: 1;
}
.datic-thumb__shine {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, #d8d2ca 0%, #efeae3 45%, #d8d2ca 90%);
	background-size: 200% 100%;
	animation: daticThumbShine 1.1s linear infinite;
}
.datic-thumb.is-loaded .datic-thumb__shine {
	display: none;
}
@keyframes daticThumbShine {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}
/* Zorg dat class rounded-circle op de img ook de wrap rond maakt */
.datic-thumb:has(.rounded-circle),
.datic-thumb:has(.img-circle-chat) {
	border-radius: 50%;
}
img.datic-photo-locked,
.datic-thumb--locked .datic-thumb-img {
	filter: blur(10px);
	-webkit-filter: blur(10px);
	transform: scale(1.08);
	object-fit: cover;
	background-color: #bdbdbd;
}

/* Cookie banner */
.datic-cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10050;
	background: rgba(30, 26, 23, 0.96);
	color: #f5f1ea;
	padding: 0.85rem 1rem;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
}
.datic-cookie__inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	justify-content: space-between;
}
.datic-cookie__msg {
	margin: 0;
	flex: 1 1 240px;
	font-size: 0.9rem;
	line-height: 1.45;
}
.datic-cookie__msg a {
	color: #9fdf9f;
	text-decoration: underline;
}
.datic-cookie__btn {
	appearance: none;
	border: 0;
	background: #5cb85c;
	color: #fff;
	font-weight: 700;
	border-radius: 8px;
	padding: 0.55rem 1.1rem;
	cursor: pointer;
}
.datic-cookie__btn:hover {
	background: #449d44;
}

.profile-locked-value {
	display: inline-block;
	max-width: 100%;
	color: #8a8278 !important;
	font-style: italic;
	font-size: 0.92em;
	line-height: 1.4;
	user-select: none;
}

.profile-locked-value a {
	color: #2f6fed !important;
	font-style: normal;
	text-decoration: underline;
}

img {
	object-fit: cover;
    font-family: 'object-fit: cover;'
}

/* Doorstart-melding (index / zoeken / groepen) */
.datic-relaunch {
	margin: 0 0 1rem;
}
.datic-relaunch[hidden] {
	display: none !important;
}
.datic-relaunch__inner {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
	border-radius: 10px;
	background: linear-gradient(135deg, #eef8ee 0%, #f4faf7 55%, #e8f5e9 100%);
	border: 1px solid rgba(92, 184, 92, 0.35);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.datic-relaunch__icon {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #5cb85c;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.1rem;
}
.datic-relaunch__body {
	flex: 1 1 auto;
	min-width: 0;
}
.datic-relaunch__title {
	display: block;
	color: #2f5d2f;
	font-size: 1.05rem;
	line-height: 1.3;
	margin-bottom: 0.2rem;
}
.datic-relaunch__text {
	margin: 0;
	color: #4a5a4a;
	font-size: 0.92rem;
	line-height: 1.45;
}
.datic-relaunch__close {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: #6a7a6a;
	padding: 0.15rem 0.35rem;
	cursor: pointer;
	line-height: 1;
	opacity: 0.75;
}
.datic-relaunch__close:hover,
.datic-relaunch__close:focus {
	opacity: 1;
	color: #2f5d2f;
}
@media (max-width: 575px) {
	.datic-relaunch__inner {
		padding: 0.75rem 0.8rem;
		gap: 0.65rem;
	}
	.datic-relaunch__title {
		font-size: 1rem;
	}
	.datic-relaunch__text {
		font-size: 0.88rem;
	}
}

/* App-install promo */
.datic-app-promo {
	margin: 0 0 1rem;
}
.datic-app-promo[hidden] {
	display: none !important;
}
.datic-app-promo__inner {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.95rem 1rem;
	border-radius: 12px;
	background: linear-gradient(135deg, #fff8f0 0%, #fff4ea 50%, #f3f1ed 100%);
	border: 1px solid rgba(240, 120, 60, 0.28);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.datic-app-promo__icon {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #e8673a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.1rem;
}
.datic-app-promo__body {
	flex: 1 1 auto;
	min-width: 0;
}
.datic-app-promo__title {
	display: block;
	color: #1e1a17;
	font-size: 1.05rem;
	line-height: 1.3;
	margin-bottom: 0.25rem;
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 700;
}
.datic-app-promo__text {
	margin: 0 0 0.7rem;
	color: #6a635c;
	font-size: 0.92rem;
	line-height: 1.45;
}
.datic-app-promo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.datic-app-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 0;
	border-radius: 999px;
	padding: 0.55rem 1rem;
	font-size: 0.9rem;
	font-weight: 700;
	font-family: "Outfit", system-ui, sans-serif;
	background: #5cb85c;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(68, 157, 68, 0.28);
}
.datic-app-promo__cta--ghost {
	background: transparent;
	color: #1e1a17;
	border: 1px solid rgba(30, 26, 23, 0.18);
	box-shadow: none;
}
.datic-app-promo__cta--ghost:hover {
	background: rgba(30, 26, 23, 0.05);
	color: #1e1a17;
}
.datic-app-promo__hint {
	margin: 0.55rem 0 0;
	font-size: 0.85rem;
	color: #6a635c;
	line-height: 1.4;
}
.datic-app-promo__close {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: #8a8178;
	padding: 0.15rem 0.35rem;
	cursor: pointer;
	line-height: 1;
	opacity: 0.75;
}
.datic-app-promo__close:hover,
.datic-app-promo__close:focus {
	opacity: 1;
	color: #1e1a17;
}
@media (max-width: 575px) {
	.datic-app-promo__inner {
		padding: 0.8rem 0.85rem;
		gap: 0.65rem;
	}
	.datic-app-promo__cta {
		width: 100%;
		justify-content: center;
	}
}

/* Profiel-aanvul nudge (nav, score < 60%) */
.datic-nav-wrap {
	background: transparent !important;
}
.datic-profile-nudge {
	position: relative;
	background: linear-gradient(135deg, #eef8ee 0%, #f4faf7 55%, #e8f5e9 100%);
	border-bottom: 1px solid rgba(92, 184, 92, 0.35);
	padding: 0.65rem 0;
}
.datic-profile-nudge[hidden] {
	display: none !important;
}
.datic-profile-nudge__inner {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 2.6rem 0 0.75rem;
}
.datic-profile-nudge__close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(47, 93, 47, 0.12);
	color: #2f5d2f;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
}
.datic-profile-nudge__close:hover,
.datic-profile-nudge__close:focus {
	background: rgba(47, 93, 47, 0.22);
	outline: none;
}
.datic-profile-nudge__icon {
	flex: 0 0 auto;
	width: 2.15rem;
	height: 2.15rem;
	border-radius: 50%;
	background: #5cb85c;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.datic-profile-nudge__body {
	flex: 1 1 220px;
	min-width: 0;
}
.datic-profile-nudge__title {
	display: block;
	color: #2f5d2f;
	font-size: 0.98rem;
	line-height: 1.3;
	margin-bottom: 0.15rem;
}
.datic-profile-nudge__text {
	margin: 0;
	color: #4a5a4a;
	font-size: 0.88rem;
	line-height: 1.4;
}
.datic-profile-nudge__action {
	flex: 0 0 auto;
}
.datic-profile-nudge__cta,
a.datic-profile-nudge__cta.btn-success {
	color: #fff !important;
	border-radius: 999px;
	padding: 0.4rem 1rem;
	white-space: nowrap;
}
body.has-profile-nudge .identifier {
	padding-top: 130px !important;
}
@media (max-width: 767px) {
	.datic-profile-nudge__inner {
		gap: 0.55rem;
	}
	.datic-profile-nudge__action {
		width: 100%;
	}
	.datic-profile-nudge__cta {
		display: inline-block;
		width: 100%;
		text-align: center;
	}
	body.has-profile-nudge .identifier {
		padding-top: 160px !important;
	}
}

/* Handmatige AdSense-units: begrens hoogte op mobiel (geen half scherm) */
@media (max-width: 767px) {
	.adsbygoogle {
		max-height: 280px !important;
		overflow: hidden !important;
	}
	ins.adsbygoogle[data-ad-format="fluid"],
	ins.adsbygoogle[data-ad-format="auto"] {
		max-height: none !important;
		overflow: visible !important;
	}
	/* Sidebar/profiel-ad (300x250) mag op mobiel kleiner blijven */
	fieldset .adsbygoogle[data-ad-slot="6227639775"] {
		max-height: 250px !important;
		width: 100% !important;
		max-width: 300px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

input.form-control.btn-secondary:hover {
    background-color: #eceeef;
    border-color: #ccc;
}

select.form-control:not([size]):not([multiple]) {
    height: initial!important;
}

.webui-popover.in {
	padding:0;
	border:none;
}
.webui-popover .webui-popover-content {
    padding: 0;
}
.webui-popover-content {
	padding: 0;
}
.webui-popover-inverse {
    background-color: #5cb85c!important;
    color: #818a91;
}

.webui-popover-inverse.top > .webui-arrow,
.webui-popover-inverse.top-left > .webui-arrow,
.webui-popover-inverse.top-right > .webui-arrow,
.webui-popover-inverse.top > .webui-arrow:after,
.webui-popover-inverse.top-left > .webui-arrow:after,
.webui-popover-inverse.top-right > .webui-arrow:after {
  border-top-color: #5cb85c!important;
}
.webui-popover-inverse.right > .webui-arrow,
.webui-popover-inverse.right-top > .webui-arrow,
.webui-popover-inverse.right-bottom > .webui-arrow,
.webui-popover-inverse.right > .webui-arrow:after,
.webui-popover-inverse.right-top > .webui-arrow:after,
.webui-popover-inverse.right-bottom > .webui-arrow:after {
  border-right-color: #5cb85c!important;
}
.webui-popover-inverse.bottom > .webui-arrow,
.webui-popover-inverse.bottom-left > .webui-arrow,
.webui-popover-inverse.bottom-right > .webui-arrow,
.webui-popover-inverse.bottom > .webui-arrow:after,
.webui-popover-inverse.bottom-left > .webui-arrow:after,
.webui-popover-inverse.bottom-right > .webui-arrow:after {
  border-bottom-color: #5cb85c!important;
}
.webui-popover-inverse.left > .webui-arrow,
.webui-popover-inverse.left-top > .webui-arrow,
.webui-popover-inverse.left-bottom > .webui-arrow,
.webui-popover-inverse.left > .webui-arrow:after,
.webui-popover-inverse.left-top > .webui-arrow:after,
.webui-popover-inverse.left-bottom > .webui-arrow:after {
  border-left-color: #5cb85c!important;
}
.popoverCard .card-header {
	background-color: #5cb85c!important;
}

.popoverCard {
	margin-bottom: 0px;
	border:none;
}
.popoverCard img {
	height: 50px;
    width: 50px;
}
.popoverCard .pull-left:first-child {
	margin-right:10px;
}
.emptyMessage {
	color:#c0c0c0;
	padding-bottom: 10px;
	display: block;
	padding-top: 10px;
}
.wrapper {
	min-height: 100% !important;
    height: 100%;
	position:relative;
}

.lb-dataContainer{
	display: none!important;
}

.heart {
	color: #d9534f!important;
}
.tag-black {
	color:#000000!important;
}
.tag-gold {
	color:#ffd700!important;
}
.tag-grey {
	color:#c0c0c0!important;
}
.tag-red {
	color:#a94442!important;
}
.tag-blue {
	color:#5cb85c!important;
}
.tag-green {
	color:#5cb85c!important;
}

/* MODAL CENTERED + warme huisstijl */
.modal:not(#loginmodal) {
  text-align: center;
  padding: 0!important;
}

.modal:not(#loginmodal):before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.modal-content {
	padding: 0.65rem 0.85rem 0.9rem;
	border: 1px solid #e6e2dc;
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(30, 26, 23, 0.14);
	background: #fff;
	color: #1e1a17;
	font-family: "Outfit", system-ui, sans-serif;
}

.modal-header {
	border-bottom: none;
	padding-bottom: 0.35rem;
}

.modal-footer {
	border-top: none;
	padding-top: 0.35rem;
}

.modal .close {
	color: #1e1a17;
	opacity: 0.45;
	text-shadow: none;
}
.modal .close:hover {
	opacity: 0.85;
}

.modal .form-control {
	border-color: #e6e2dc;
	color: #1e1a17;
}
.modal .form-control:focus {
	border-color: #5cb85c;
	box-shadow: 0 0 0 0.15rem rgba(92, 184, 92, 0.22);
}

.modal .input-group-addon.bg-primary,
.modal .bg-primary.input-group-addon {
	background-color: #5cb85c !important;
	border-color: #5cb85c !important;
	color: #fff !important;
}

.modal .btn-primary:not(.remove) {
	background-color: #5cb85c !important;
	border-color: #5cb85c !important;
	border-radius: 999px;
	font-weight: 600;
	padding: 0.55rem 1.35rem;
	color: #fff !important;
}
.modal .btn-primary:not(.remove):hover,
.modal .btn-primary:not(.remove):focus {
	background-color: #449d44 !important;
	border-color: #419641 !important;
}

.modal .btn-primary.remove,
.modal .btn-primary.remove:hover,
.modal .btn-primary.remove:focus {
	background-color: #d9534f !important;
	border-color: #c9302c !important;
	border-radius: 999px;
	font-weight: 600;
	color: #fff !important;
}

.modal .btn-secondary,
.modal .btn-default {
	border-radius: 999px;
	font-weight: 600;
	border-color: #e6e2dc;
	color: #1e1a17;
	background: #f3f1ed;
}

.modal .text-muted,
.modal .form-text.text-muted {
	color: #6a635c !important;
}

#loginmodal .modal-dialog {
	display: block;
	max-width: 420px;
	margin: 1.75rem auto;
}

#loginmodal .modal-content {
	padding: 1rem 1.15rem 1.25rem;
}

#loginmodal .modal-title {
	color: #1e1a17 !important;
	font-size: 1.35rem;
}

#loginmodal .modal-body .fa {
	color: #fff;
}

#loginmodal .modal-footer {
	text-align: center;
	justify-content: center;
}

/* LIGHTBOX */
#lightboxOverlay {
	position: fixed !important;
	top: 0;
	left: 0;
	height: 100% !important;
	width: 100% !important;
}
#lightbox {
	position: fixed !important;
	top: 50% !important;
	transform: translateY(-50%);
	-webkit-transition: top 100ms;
	-moz-transition: top 100ms;
	-o-transition: top 100ms;
	transition: top 100ms;
}

/* Notify */
.notifyjs-bootstrap-error {
    background-image: none!important;
}
.notifyjs-bootstrap-base {
    padding: 8px 15px!important;
}
.notifyjs-bootstrap-success {
	background-image: none!important;
}

/* SMALL DEVICE */
@media (max-width: 576px) {
	.modal {
		bottom: initial;
	}
	nav .navbar {
		padding-left:5px;
		padding-right:5px;
	}
	.form-inline .form-control {
	    display: inline-block;
	    width: 100%;
	    vertical-align: middle;
	}
	.form-inline .input-group {
	    display: inline-table;
	    width: 100%;
	    vertical-align: middle;
	}
}
@media (max-width: 768px) {

	.identifier{
		min-height: 100%;
    	height: auto !important;
	}
}

/* */
@supports (-ms-accelerator:true) {
  img .img-thumbnail {
        border: 4px solid #fff!important;
  }
}

@media only screen and (min-width : 768px) and (max-width : 992px) {
	.container{
		width: 100%;
	}

}