﻿.adminElementHolder .tab-content {
	height:auto;
}
.adminElementHolder {
	position: relative;
}
.adminElementHolder .nav-tabs {
	display:none;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	width: fit-content;
	max-width: 100%;
	margin-top: 0;
	padding: .25rem;
	border: 1px solid #ddd;
	border-radius: .25rem;
	background-color: rgba(255,255,255,.96);
	color: #111 !important;
	box-shadow: 0 .35rem 1.25rem rgba(0,0,0,.08);
	column-count: unset;
	overflow: visible;
	position: absolute;
	top: calc(100% - .35rem);
	transform: none;
	left: .5rem;
	z-index: 1042;
	list-style: none;
}
.customGrid .gridItem:hover > .gridItemToolbar,
.customGrid .gridItem:focus-within > .gridItemToolbar,
.customGrid .gridItem > .gridItemToolbar:hover,
.adminElementHolder.active .nav-tabs {
	display:flex;
}



.gridItem > .gridItemToolbar {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	width: fit-content;
	max-width: 100%;
	margin-top: 0;
	padding: .25rem;
	border: 1px solid #ddd;
	border-radius: .25rem;
	background-color: rgba(255,255,255,.96);
	color: #111 !important;
	box-shadow: 0 .35rem 1.25rem rgba(0,0,0,.08);
	column-count: unset;
	overflow: visible;
	position: absolute;
	top: calc(100% - .35rem);
	transform: none;
	left: calc(var(--bs-gutter-x)* .5 + .5rem);
	z-index: 1101 !important;
	list-style: none;
}

.cke,
.cke_chrome,
.cke_float,
.cke_top,
.cke_panel,
.cke_combopanel,
.cke_notifications_area {
	z-index: 1200 !important;
}

.gridItem:hover > .gridItemToolbar,
.gridItem:focus-within > .gridItemToolbar,
.gridItem > .gridItemToolbar:hover {
	display: flex;
}
.adminElementHolder  .nav-tabs > li,
.gridItem > .gridItemToolbar > li {
	margin:0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	position: static !important;
	float: none !important;
}
.adminElementHolder  .nav-tabs > li:before
{
	content:""
}
.adminElementHolder  .nav-tabs > li > a,
.gridItem > .gridItemToolbar > li > a,
.gridPresetControl .gridPropertiesToggle,
.gridActionGroup button,
.gridDragHandle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-width: 0;
	height: 1.9rem;
	padding: .25rem .65rem;
	line-height: 1.1;
	border: 1px solid #ddd;
	border-radius: .2rem;
	background-color: #fff;
	color: #111 !important;
	font-size: .72rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}

.adminElementHolder .nav-tabs > .dragBtn > .nav-link,
.gridItem > .gridItemToolbar > .dragBtn > .nav-link,
.gridActionGroup button {
	width: 2rem;
	min-width: 2rem;
	max-width: 2rem;
	padding-right: 0;
	padding-left: 0;
	flex: 0 0 2rem;
}

.adminElementHolder .nav-tabs > .dragBtn > .nav-link i,
.gridItem > .gridItemToolbar > .dragBtn > .nav-link i,
.gridActionGroup button i {
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-align: center;
	margin: 0;
}

.gridActionGroup {
	display: inline-flex !important;
	align-items: center;
	gap: .25rem;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	float: none !important;
	list-style: none !important;
}

.gridActionGroup .copyBtn,
.gridActionGroup .deleteBtn {
	display: inline-flex !important;
	margin: 0 !important;
	position: static !important;
	float: none !important;
}
.adminElementHolder  .nav-tabs > li > a img,
.gridItemToolbar > li > a img
{
	width:16px;
	height:10px;
	object-fit: cover;
	flex: 0 0 auto;
	vertical-align:middle;
}

.adminElementHolder .nav-tabs i,
.gridItemToolbar i,
.gridPresetControl i,
.gridActionGroup i {
	color: #111 !important;
}
.adminElementHolder  .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #111;
cursor: default;
background-color:#f2f2f2;
border-color: #ddd;
}
.adminElements.editField
{
		min-height:50px;
}
.adminElements.editField.empty
{
	min-height:50px;
	border:1px dotted rgba(255,221,222,1.00);
}
.bgImageElement,
.bgVideoElement
{
	position:relative
}
.bgImageElement .editBgImageElementBtn,
.bgVideoElement .editBgImageElementBtn,
.bgVideoElement .editBgVideoElementBtn
{
	position:absolute;
	top:10px;
	right:10px;
	font-size:12px;
	z-index:999;
}

.bgVideoElement .editBgVideoElementBtn {
	top: 75px;
}

/* .pageList a
{
	padding:15px;
	display:block;
	margin-top:30px;
	text-decoration:none;
	background-color:#FFF;
}


.pageList a:hover h3
{
	color:#025183;
}
.pageList a .thumb
{
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	background-color:rgba(245,245,245,1.00);
	width:100%;
	padding-top:80%;
}
.pageList a h3
{
	text-align:center;
	font-size:14px;
	font-weight:800;
	text-transform:uppercase;
	height:2.5em;
	overflow:hidden;
	color:#333;
}

h2.pageListHeader
{
	font-size:22px;
	font-weight:300;
	text-align:center;
} */

.overzichtPageImgList article
{
	margin-bottom:15px;
	margin-top:15px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-image: var(--std-background);
}
.overzichtPageImgList article a {
	display:block;
	background-color:rgba(var(--color-prim-rgb),0.18);
	color:#FFF;
	text-decoration:none;
	position:relative;
	padding-top:80%;
	overflow:hidden;
}

.overzichtPageImgList article h1
{
	position:absolute;
	color:#FFF;
	font-weight:700;
	font-size:26px;
	bottom:0px;
	left:0px;
	padding:15px;
	transition: all .5s ease-out;

}
.overzichtPageImgList article a .intro {
	line-height:normal;
	background-color:rgba(var(--color-prim-rgb),0.85);
	position:absolute;
	color:#FFF;
	font-weight:100;
	font-size:14px;
	padding:15px;
	bottom:-30px;
	left:0px;
	width:100%;	
	height:0px;
	overflow:hidden;
	transition: all .5s ease-out;
}
 .overzichtPageImgList article a:hover .intro
{
	bottom:0px;
	padding:15px;	
	height:50%;
	overflow:hidden;
	
}
 .overzichtPageImgList article a:hover h1 {
	margin-bottom:40%;
}

.customGrid {
	/* padding: 0; */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;

	padding-left: 0;
	padding-right: 0;
}
/* 
.customGrid::before, .customGrid::after {
	content: " ";
	display: table;
}

.customGrid::after {
	clear: both;
} */

.dropdown-menu.gridSelector {
	/* Keep the block picker above the editor's page-level tab bars. */
	z-index: 1102;
	min-width: min(520px, calc(100vw - 2rem));
	padding: 1rem;
}

.gridPresetSelector {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
	margin: .75rem 0 1rem;
}

.gridPresetSelector button {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem .65rem;
	border: 1px solid #d7d7d7;
	border-radius: .25rem;
	background-color: #fff;
	font-size: .8rem;
	text-align: left;
}

.gridPresetSelector button span {
	flex: 0 0 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: .2rem;
	border: 1px solid #cfcfcf;
	background-color: #fff;
}

.gridPresetSelector button[data-preset="card"] span {
	box-shadow: 0 .2rem .5rem rgba(0,0,0,.18);
}

.gridPresetSelector button[data-preset="light"] span {
	background-color: var(--color-sec);
}

.gridPresetSelector button[data-preset="dark"] span {
	background-color: var(--color-black);
}

.gridPresetSelector button[data-preset="accent"] span {
	background-color: var(--color-cta);
}

.gridPresetSelector button[data-preset="image"] span {
	background: linear-gradient(135deg, var(--color-black) 0%, var(--color-black) 48%, var(--color-sec) 49%, var(--color-sec) 100%);
}

.gridPresetSelector button[data-preset="video"] span {
	background: linear-gradient(135deg, var(--color-black) 0%, var(--color-black) 38%, var(--color-cta) 39%, var(--color-cta) 62%, var(--color-sec) 63%, var(--color-sec) 100%);
}

.gridPresetSelector button[data-preset="videoInline"] span,
.gridElementModal .gridModalPresets button[data-preset="videoInline"] span {
	background: linear-gradient(to bottom, var(--color-black) 0%, var(--color-black) 70%, var(--color-cta) 71%, var(--color-cta) 100%);
}

.gridPresetSelector button[data-preset="imageInline"] span,
.gridElementModal .gridModalPresets button[data-preset="imageInline"] span {
	background: linear-gradient(to bottom, var(--color-sec) 0%, var(--color-sec) 70%, #fff 71%, #fff 100%);
}

.gridPresetSelector button[data-preset="splitImage"] span,
.gridElementModal .gridModalPresets button[data-preset="splitImage"] span {
	background: linear-gradient(to right, var(--color-sec) 0%, var(--color-sec) 48%, #fff 49%, #fff 100%);
}

.gridPresetSelector button[data-preset="quote"] span,
.gridElementModal .gridModalPresets button[data-preset="quote"] span {
	background: linear-gradient(to right, var(--color-cta) 0%, var(--color-cta) 18%, #fff 19%, #fff 100%);
}

.gridPresetSelector button.active {
	border-color: #111;
	box-shadow: inset 0 0 0 1px #111;
}

.grid-selector button.grid-item {
	border: 0;
	text-align: center;
}

.grid-selector button.grid-item.active {
	outline: 2px solid #111;
	outline-offset: 2px;
}

.gridAddSelectedBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	margin-top: 1rem;
	padding: .75rem 1rem;
	border: 0;
	border-radius: .25rem;
	background-color: #111;
	color: #fff;
	font-weight: 700;
}

.gridOpenAddModalBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1rem;
	border: 0;
	border-radius: .25rem;
	background-color: #111;
	color: #fff;
	font-weight: 700;
}

.gridPresetControl {
	position: relative;
	padding: 0;
	background-color: transparent;
	z-index: 1043;
}

.gridPresetControl.open {
	z-index: 1055;
}

.gridDragHandle {
	cursor: grab;
}

.gridDragHandle:active {
	cursor: grabbing;
}

.adminElementHolder .nav-tabs > li > a:hover,
.gridItem > .gridItemToolbar > li > a:hover,
.gridPresetControl .gridPropertiesToggle:hover,
.gridActionGroup button:hover,
.gridDragHandle:hover {
	background-color: #f2f2f2;
	border-color: #ddd;
}

.gridPresetControl.open .gridPropertiesToggle {
	border-color: #111;
	box-shadow: inset 0 0 0 1px #111;
}

.gridPresetControl .gridPropertiesPanel {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483000;
	min-width: 280px;
	padding: .85rem;
	gap: .75rem;
	border: 1px solid #ddd;
	border-radius: .25rem;
	background-color: #fff;
	box-shadow: 0 .75rem 2rem rgba(0,0,0,.14);
}

.gridPresetControl.open .gridPropertiesPanel {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.gridPresetControl .gridPropertiesPanel label {
	display: grid;
	gap: .3rem;
	margin: 0;
	color: #333;
	font-size: .7rem;
	font-weight: 700;
}

.gridPresetControl .gridPropertiesPanel .form-select {
	min-width: 0;
	height: 2rem;
	font-size: .75rem;
}

.gridElementModal .modal-body {
	display: grid;
	gap: .9rem;
	padding-top: .85rem;
	padding-bottom: .85rem;
}

/* Keep the block picker above editor toolbars and CMS content layers. */
.modal.gridElementModal {
	z-index: 1200;
}

.gridPresetControl .gridPropertiesPanel {
	z-index: 1100;
}

.gridElementModal .gridModalGroup {
	display: grid;
	gap: .5rem;
}

.gridElementModal .gridModalGroup > strong {
	font-size: .85rem;
}

.gridElementModal .gridModalPresets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .45rem;
}

.gridElementModal .gridModalWidths {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: .45rem;
	padding: .45rem;
	border: 1px solid #eee;
	border-radius: .25rem;
	background-color: #f7f7f7;
}

.gridElementModal .gridModalPresets button,
.gridElementModal .gridModalWidths button {
	display: flex;
	align-items: center;
	gap: .45rem;
	min-height: 2.45rem;
	padding: .5rem;
	border: 1px solid #ddd;
	border-radius: .25rem;
	background-color: #fff;
	color: #111;
	text-align: left;
	font-size: .85rem;
}

.gridElementModal .gridModalWidths button {
	justify-content: center;
	text-align: center;
	font-weight: 700;
	min-height: 3rem;
	padding: .5rem .35rem;
	background-color: #fff;
	line-height: 1.2;
}

.gridElementModal .gridModalWidths button span {
	display: none;
}

.gridElementModal .gridModalWidths button.gi-12 {
	grid-column: span 12;
}

.gridElementModal .gridModalWidths button.gi-9 {
	grid-column: span 9;
}

.gridElementModal .gridModalWidths button.gi-8 {
	grid-column: span 8;
}

.gridElementModal .gridModalWidths button.gi-6 {
	grid-column: span 6;
}

.gridElementModal .gridModalWidths button.gi-4 {
	grid-column: span 4;
}

.gridElementModal .gridModalWidths button.gi-3 {
	grid-column: span 3;
}

.gridElementModal .gridModalWidths button.gi-2 {
	grid-column: span 2;
}

@media(max-width: 575.98px) {
	.gridElementModal .gridModalWidths {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.gridElementModal .gridModalWidths button.gi-12,
	.gridElementModal .gridModalWidths button.gi-9,
	.gridElementModal .gridModalWidths button.gi-8 {
		grid-column: span 6;
	}
}

.gridElementModal .gridModalPresets button.active,
.gridElementModal .gridModalWidths button.active {
	border-color: #111;
	box-shadow: inset 0 0 0 1px #111;
}

.gridElementModal .gridModalPresets button span {
	flex: 0 0 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
	border: 1px solid #cfcfcf;
	border-radius: .2rem;
	background-color: #fff;
}

.gridElementModal .gridModalPresets button[data-preset="card"] span {
	box-shadow: 0 .2rem .5rem rgba(0,0,0,.18);
}

.gridElementModal .gridModalPresets button[data-preset="light"] span {
	background-color: var(--color-sec);
}

.gridElementModal .gridModalPresets button[data-preset="dark"] span {
	background-color: var(--color-black);
}

.gridElementModal .gridModalPresets button[data-preset="accent"] span {
	background-color: var(--color-cta);
}

.gridElementModal .gridModalPresets button[data-preset="image"] span {
	background: linear-gradient(135deg, var(--color-black) 0%, var(--color-black) 48%, var(--color-sec) 49%, var(--color-sec) 100%);
}

.gridElementModal .gridModalPresets button[data-preset="video"] span {
	background: linear-gradient(135deg, var(--color-black) 0%, var(--color-black) 38%, var(--color-cta) 39%, var(--color-cta) 62%, var(--color-sec) 63%, var(--color-sec) 100%);
}

.gridElementModal .gridModalCustomClass {
	display: grid;
	gap: .25rem;
	margin: 0;
	font-size: .8rem;
	font-weight: 700;
}

.gridElementModal .gridModalCustomClass .form-control {
	height: 2.15rem;
	font-size: .85rem;
}

.gridElementModal .modal-footer {
	justify-content: space-between;
	padding-top: .75rem;
	padding-bottom: .75rem;
}

.gridElementModal .gridModalPaste {
	margin-right: auto;
}

@media(min-width: 768px) {
	.gridElementModal .modal-dialog {
		max-width: 820px;
	}

	.gridElementModal .modal-body {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		align-items: start;
	}

	.gridElementModal .gridModalPresets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.customGrid .gridItem {
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
	margin-bottom: 2rem;

	flex: 1 1 auto;
	position: relative;
	cursor: default;
}

.customGrid .gridItem * {
	cursor: auto;
}

.customGrid .gridItem a,
.customGrid .gridItem button {
	cursor: pointer;
}

.customGrid .gridItem .gridDragHandle {
	cursor: grab;
}

.customGrid .gridItem.gridPropertiesOpen {
	z-index: 1041;
}

.customGrid .gridItem .deleteBtn:hover a {
	background-color: #FFF;
}

/* .customGrid .gridItem.col-md-6 img {
	max-height: 400px;
} */

.customGrid .gridItem:is(.col-md-4, .customCol20) img {
	/* max-height: 300px; */
	/* max-height: 175px; */
}

.modal {
	color: #333;
}

@media(max-width: 768px) {
	.customGrid .gridItem.col-sm-6 {
		/* width: 50%; */
		float: left;
	}
}
@media(max-width: 992px) {
	/* .customGrid .gridItem.col-md-12, 
	.customGrid .gridItem.col-md-8 {
		width: 100%;
		float: left;
	} */
}

@media screen and (min-width: 480px) {
	
} 
@media screen and (min-width: 768px) {
	.customGrid .gridItem.customCol20 {
		width: 50%;
		display: inline-block;
	}
} 
@media (min-width: 992px) {
	.customGrid .gridItem {
		flex: 0 1 auto;
	}

	.customGrid .gridItem.customCol20 {
		width: 20%;
	}

	/* .customGrid {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	} */
}
@media (min-width:1024px){

}
@media (min-width: 1200px) {

}

/* Generieke blockbuilder presets */
.mainSite .customGrid .blockPreset-card .blockPresetContent,
.mainSite .customGrid .blockPreset-light .blockPresetContent,
.mainSite .customGrid .blockPreset-dark .blockPresetContent,
.mainSite .customGrid .blockPreset-accent .blockPresetContent,
.mainSite .customGrid .blockPreset-quote .blockPresetContent,
.mainSite .customGrid .blockPreset-image .blockPresetBg,
.mainSite .customGrid .blockPreset-video .bgVideoElement,
.mainSite .customGrid .blockPreset-videoInline .bgVideoElement {
    min-height: 100%;
    border-radius: .375rem;
    overflow: hidden;
}

.mainSite .customGrid .blockPreset-card .blockPresetContent,
.mainSite .customGrid .blockPreset-light .blockPresetContent,
.mainSite .customGrid .blockPreset-dark .blockPresetContent,
.mainSite .customGrid .blockPreset-accent .blockPresetContent,
.mainSite .customGrid .blockPreset-quote .blockPresetContent {
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.mainSite .customGrid .blockPreset-card .blockPresetContent {
    background-color: var(--color-white);
    box-shadow: 0 .75rem 2rem rgba(0,0,0,.08);
}

.mainSite .customGrid .blockPreset-light .blockPresetContent {
    background-color: var(--color-sec);
}

.mainSite .customGrid .blockPreset-dark .blockPresetContent {
    background-color: var(--color-black);
    color: var(--color-white);
}

.mainSite .customGrid .blockPreset-accent .blockPresetContent {
    background-color: var(--color-cta);
    color: var(--color-white);
}

.mainSite .customGrid .blockPreset-quote .blockPresetContent {
    background-color: var(--color-white);
    border-left: .35rem solid var(--color-cta);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.55;
}

.mainSite .customGrid .blockPreset-quote .blockPresetContent blockquote {
    margin: 0;
}

.mainSite .customGrid .blockPreset-dark .blockPresetContent a,
.mainSite .customGrid .blockPreset-accent .blockPresetContent a,
.mainSite .customGrid .blockPreset-image .blockPresetContent a,
.mainSite .customGrid .blockPreset-video .blockPresetContent a {
    color: currentColor;
}

.mainSite .customGrid .blockPreset-image .blockPresetBg,
.mainSite .customGrid .blockPreset-video .bgVideoElement {
    display: flex;
    align-items: flex-end;
    min-height: clamp(280px, 32vw, 520px);
    background-color: var(--color-black);
}

.mainSite .customGrid .blockPreset-image .blockPresetBg::before,
.mainSite .customGrid .blockPreset-video .bgVideoElement::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 70%, rgba(0,0,0,.08) 100%);
    pointer-events: none;
}

.mainSite .customGrid .blockPreset-image .blockPresetContent,
.mainSite .customGrid .blockPreset-video .blockPresetContent {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    color: var(--color-white);
}

.mainSite .customGrid .blockPreset-videoInline .bgVideoElement {
    aspect-ratio: 16 / 9;
    min-height: unset;
    width: 100%;
    background-color: var(--color-black);
}

.mainSite .customGrid .blockPreset-imageInline .gridImageElement,
.mainSite .customGrid .blockPreset-splitImage .gridImageElement {
    overflow: hidden;
    border-radius: .375rem;
    background-color: var(--color-sec);
}

.mainSite .customGrid .gridImageElement img {
    display: block;
    width: 100%;
    height: auto;
}

.mainSite .customGrid .blockPreset-imageInline .gridImageElement {
    min-height: 120px;
}

.mainSite .customGrid .blockPreset-imageInline .gridImageElement:empty {
    aspect-ratio: 16 / 10;
}

.mainSite .customGrid .blockPreset-imageInline .gridImageElement img {
    object-fit: contain;
}

.mainSite .customGrid .blockPreset-splitImage .blockPresetSplit {
    display: grid;
    gap: 1.5rem;
    align-items: stretch;
    min-height: 100%;
    overflow: hidden;
    border-radius: .375rem;
    background-color: var(--color-white);
}

.mainSite .customGrid .blockPreset-splitImage .gridImageElement {
    min-height: 260px;
}

.mainSite .customGrid .blockPreset-splitImage .gridImageElement img {
    height: 100%;
    object-fit: cover;
}

.mainSite .customGrid .blockPreset-splitImage .blockPresetContent {
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

@media (min-width: 768px) {
    .mainSite .customGrid .blockPreset-splitImage .blockPresetSplit {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
}

