/* === Variabelen === */

:root {
	--background_color: #eef9f6;
	--header_1_textcolor: #121212;
	--headers_textcolor: #121212;
	--textcolor: #121212;
	--linkcolor: #ed4177;

	--fullwidth_background: #dfe8e6;
	--shadow_color: rgba(0,0,0,0);

	--border_width: 0;
	--border_color: #dfe8e6;
	--border_radius: 5px;

	--header_background: white;
	--header_textcolor: #121212;

	--nav_background: white;
	--nav_submenu: white;
	--nav_color_active: rgb(152,35,202);
	--nav_color_hover: rgb(237,65,119);
	--nav_color_passive: #121212;

	--footer_background: #dfe8e6;
	--footer_textcolor: #121212;


	--btn_background_primary_1: rgb(184, 183, 185);
	--btn_background_primary_2: rgb(193, 192, 192);
	--btn_background_secondary_1: rgb(152,35,202); 
	--btn_background_secondary_2: rgb(237,65,119);
	--btn_textcolor_primary: white;
	--btn_textcolor_secondary: white;


	--card_header: white;
	--card_header_textcolor: #121212;

	--card_background: white;
	--card_textcolor: #121212;

	--jumbotron_background: #dfe8e6;
	--jumbotron_textcolor: #121212;
}

/* microtip z-index issue */
[aria-label][role~="tooltip"]:hover::before, [aria-label][role~="tooltip"]:hover::after, [aria-label][role~="tooltip"]:focus::before, [aria-label][role~="tooltip"]:focus::after{
	z-index: 100000;
}

/* === Styling basis blokken === */
html {
  scroll-behavior: smooth;
}

body {
	
	color: var(--textcolor);
	font-family: "Arial", Helvetica, sans-serif;
	/*background: #eef9f6 url("/template/images/background.webp") no-repeat top center;*/
	height: 100%;
	width: 100%;
	background: linear-gradient(25deg,rgb(242, 239, 255) -12%,rgb(227, 249, 255) 0,rgb(249, 235, 255) 100%);
}

body.top #scroll-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background-color: #c27dc9;
	border: 2px solid #ffffff;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-decoration: none;
	font-size: 24px;
	opacity: 0; /* Begin onzichtbaar */
	visibility: hidden; /* Begin onzichtbaar */
	transition: opacity 0.3s ease, visibility 0.3s ease; /* Voeg overgang toe */
  }
  
  body.top #scroll-to-top::before {
	content: ''; /* Leeg inhoud, voeg je eigen stijl toe */
	width: 0;
	height: 0;
	border-left: 12px solid transparent; /* Aanpassen voor de breedte van de pijlpunt */
	border-right: 12px solid transparent; /* Aanpassen voor de breedte van de pijlpunt */
	border-bottom: 20px solid #fff; /* Aanpassen voor de hoogte en kleur van de pijl */
	position: relative;
	top: -2px; /* Aanpassing om het verticaal te centreren */
  }
  
  body.top.show-scroll #scroll-to-top {
	opacity: 1; /* Maak zichtbaar */
	visibility: visible; /* Maak zichtbaar */
  }
  






* {
	line-height: 170%;
	letter-spacing: 0.2pt;
}

.h1, h1, h2, .h2 {
	color: var(--header_1_textcolor) !important;
}

h1 {font-size: 1.7rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.3rem;}
h4 {font-size: 1.1rem;}

.h3, h3, .h4, h4, .h5, h5, .h6, h6 {
	color: var(--headers_textcolor) !important;
}
a {
	color: var(--linkcolor) !important;
	font-weight: bold;

}
a:hover {
	color: var(--textcolor);

}
b, strong {
	font-weight: bold;
}
p, ul, li, ol {
	font-size: 11pt;
}
table {
	width: 100%;
}
td {
	vertical-align: baseline;
	padding: 2px 5px;
	font-size: 11pt;
}
tr:nth-child(even) {
	background-color: #fbf9f6;
}

.font-12 {font-size:12px;}
.br-10 {border-radius: 10px;}

header {
	color: var(--header_textcolor);
    font-weight: 300;

}
.lead {
	color: var(--header_textcolor);
}
.lead p {
	font-size: 1.25rem;
}
.lead h1, .lead-single h1 {
	font-size: 2rem;
}
header h1 {
	color: var(--header_textcolor) !important;
	font-size: 1.9rem;
    font-weight: 300;
    line-height: 1.2;
}
header h2, header h3 {
	color: var(--header_textcolor) !important;
}

.blockquote{
  font-size: 1.4em;
  width:100%;
  margin:50px auto;
  border-radius: 5px;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 10px 75px;
  border-left:8px solid var(--linkcolor);
  line-height:1.6;
  position: relative;
  background:#ffffff;
}

.blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:var(--linkcolor);
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

.blockquote::after{
  content: '';
}

.blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

.breadcrumb {background: none; margin-bottom: 0;}
#breadcrumbs {background: #f4f4f4;}

.card {
	background-color: var(--card_background);
	color: var(--card_textcolor);
	border: var(--border_width) solid var(--border_color);
	border-radius: var(--border_radius);
	-o-box-shadow: 0px 0px 10px var(--shadow_color);
	-icab-box-shadow: 0px 0px 10px var(--shadow_color);
	-khtml-box-shadow: 0px 0px 10px var(--shadow_color);
	-moz-box-shadow: 0px 0px 10px var(--shadow_color);
	-webkit-box-shadow: 0px 0px 10px var(--shadow_color);
	box-shadow: 0px 0px 10px var(--shadow_color);
}
.card-header, .card-footer {
	background-color: var(--card_background);
	border: var(--border_width) solid var(--border_color);
	border-radius: var(--border_radius);
}
.card-body {
	padding: 1.25rem 1.25rem 0 1.25rem;
}
.card-body h4 {
	text-transform: inherit;
}
.card-footer:last-child {
	border-radius: var(--border_radius);
}
.card-img-top img {
	border-top-left-radius: var(--border_radius) !important;
	border-top-right-radius: var(--border_radius) !important;
}
.card p img {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}
.card-title {
	
}
.table td {border:none;}

.pros {background: #b6f799 !important;}
.pros .card-header {background: #9adc7c !important;}
.cons {background: #f79999 !important;}
.cons .card-header {background: #e27979 !important;}

.pros .card-header, .cons .card-header {font-weight: bold !important;}

.pros ul, .cons ul {list-style: outside none none; margin:0; padding:0; margin-bottom:30px;}
.pros li, .cons li {margin-left:25px;}
.pros li::after {
  position: absolute;
  content: "\2714";
  left:0;
  margin-left:20px;
  color:#1f6805;
}

.cons li::after {
  position: absolute;
  content: "\274C";
  left:0;
  margin-left:20px;
}



#accordion {
	border-radius: var(--border_radius) !important;
	background-color: var(--card_background) !important;
}
#accordion .card {
	-o-box-shadow: none;
	-icab-box-shadow: none;
	-khtml-box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin: 0 !important;
	border-bottom: 1px solid #eaeaea;
	border-radius: 0px !important;
	background-color: transparent !important;
}
#accordion .card:last-of-type {
	border-bottom: 0px solid #eaeaea;
}
#accordion .btn {
	background: none;
	color: var(--card_textcolor) !important;
	margin: 0 !important;
	padding: 0 !important;
}
#accordion .card-body {
	padding: 0 1.25rem .75rem 1.25rem;
	text-align: left;
}
#accordion .btn {
	max-width: 100%;
	text-align: left;
}

.jumbotron {
	background-color: var(--jumbotron_background);
	color: var(--jumbotron_textcolor);
	border-radius: var(--border_radius);
	-o-box-shadow: 0px 0px 10px var(--shadow_color);
	-icab-box-shadow: 0px 0px 10px var(--shadow_color);
	-khtml-box-shadow: 0px 0px 10px var(--shadow_color);
	-moz-box-shadow: 0px 0px 10px var(--shadow_color);
	-webkit-box-shadow: 0px 0px 10px var(--shadow_color);
	box-shadow: 0px 0px 10px var(--shadow_color);
	padding: 1rem !important;
}
.jumbotron img {
	margin: 0.5em;
}
.jumbotron .img-thumbnail {
	margin: 0 !important;
}


/* === Navigatie === */
body .navbar {
	z-index: 1021 !important;
}
.navbar {
	background-color: var(--nav_background) !important;
	padding: 0;
}
.navbar a {
	color: var(--nav_color_passive) !important;
	text-transform: uppercase;
	font-weight: normal !important;
}
.navbar .active a {
	color: var(--nav_color_active) !important;
}
.navbar a:hover, .navbar .active a:hover {
	color: var(--nav_color_hover) !important;
}
.navbar-toggler {
	margin-left: auto;
	margin-right: 0;
}
.navbar-brand img {
	max-height: 60px;
	height: 45px;
	width: auto;
}
.navbar-collapse {
	background-color: var(--nav_background) !important;
}
.navbar-brand img {
	max-width: 240px;
}

.dropdown-menu {
	border-radius: 0;
	background-color: var(--nav_submenu) !important;
	border: none;
}
.dropdown-item:hover {
	background-color: var(--nav_color_passive) !important;
}
.navbar .container .dropdown-menu a {
    color: var(--nav_color_active) !important;
}
.navbar .container .dropdown-menu a:hover {
    color: var(--nav_color_active) !important;
}

.quicknavbar {font-size:10px !important;}
.quicknavbar .navbar-light .navbar-toggler {border:none !important;;}
.quicknavbar li  {font-size:11px !important;}


@media (min-width: 1524px) {
    .navbar-expand-xxl .navbar-toggler {
        display: none;
    }
    .navbar-expand-xxl .navbar-collapse {
        display: flex !important;
    }

    .navbar-expand-xxl .navbar-toggler {
        display: none;
    }
    .navbar-expand-xxl .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-xxl .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-xxl .nav-item {
        display: inline-flex;
    }
    .navbar-expand-xxl .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }

}

/* === Knoppen === */
.btn {
	/* display: block;*/
	margin: 8px 0;
	padding: 6px 14px;
	background: var(--btn_background_secondary_1);
	background: -moz-linear-gradient(90deg, var(--btn_background_secondary_1) 0%, var(--btn_background_secondary_2) 100%);
	background: -webkit-linear-gradient(90deg, var(--btn_background_secondary_1) 0%, var(--btn_background_secondary_2) 100%);
	background: linear-gradient(90deg, var(--btn_background_secondary_1) 0%, var(--btn_background_secondary_2) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--btn_background_secondary_1)",endColorstr="var(--btn_background_secondary_2)",GradientType=1);
	border: none;
	width: 100%;
	text-transform: uppercase;

	color: var(--btn_textcolor_primary) !important;
	text-decoration: none;
	border-radius: var(--border_radius);
}
.btn:hover {
	opacity: .5;
}
.btn-secondary {
	background: var(--btn_background_primary_1);
	background: -moz-linear-gradient(90deg, var(--btn_background_primary_1) 0%, var(--btn_background_primary_2) 100%);
	background: -webkit-linear-gradient(90deg, var(--btn_background_primary_1) 0%, var(--btn_background_primary_2) 100%);
	background: linear-gradient(90deg, var(--btn_background_primary_1) 0%, var(--btn_background_primary_2) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--btn_background_primary_1)",endColorstr="var(--btn_background_primary_2)",GradientType=1);
	color: var(--btn_textcolor_secondary) !important;
}
.btn-secondary:hover {
	opacity: .5;
}
.btn-link:hover {
	opacity: .5;
	text-decoration: none;
}
.btn-max {
	max-width: 100% !important;
}
.btn-width {
	max-width: 300px !important;
	margin-left: auto;
    margin-right: auto;
}

/* === Filter === */

.filter .btn-secondary {
	border:none;
}

.filter label {font-weight: bold;}

.btn-secondary:not(:disabled):not(.disabled).active {
	background: linear-gradient(90deg,var(--btn_background_secondary_1) 0,var(--btn_background_secondary_2) 100%) !important;
}


.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:focus {box-shadow: none;}


/* === Casino Review Listing === */
.listhead {
	background-color: var(--btn_background_primary);
	border-top-left-radius: var(--border_radius) !important;
	border-top-right-radius: var(--border_radius) !important;
}
.listhead div {
	color: var(--btn_textcolor);
	padding-top: 6px;
    padding-bottom: 6px;
}
.listbody:nth-child(even) {
	background-color: var(--card_background) !important;
}

/* === Auteurs === */
.auteursinfo .auteurdiv {
	Background: rgba(255,255,255,0.5);
	padding:4px 5px;
	font-size:11px;
}

.auteurbox {
	background-color: white;;
}

.casinoreview .auteurdiv, .casinoreview .auteurdiv a {color:#fff !important;}


.authorheaderwrapper-justifycenter .auteursinfo {
    justify-content: center !important;
}

/* === Extra === */
.nopadding {
	margin: 0 !important;
	padding: 0 !important;
}

.order-first {
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 1;
	order: -1;
}

.no-background {
	background-color: transparent !important;
}

.depositicon {
	margin: 0 4px;
}
.col-md-4 .sticky-top {
	/*padding-top: 75px;*/
}


.score { background: var(--fullwidth_background); }
.progress-bar {background-color:#9923c9; }

/* === Template custom === */
.header-listing {
	background: var(--card_background);
}
.header-listing .col-md-2:first-of-type {
	padding-right: 0;
}
.header-listing .col-md-2:last-of-type {
	padding-left: 0;
}
.header-listing img, .header-listing .col-md-2 .btn {
	border-radius: 100px;
}
.header-listing img {
	height: 40px !important;
	width: 40px !important;
	max-width: none !important;
}
.header-listing .col-md-2 .btn {
	background: #eaff18;
	color: var(--card_text) !important;
	font-weight: bold;
}


.home-listing .row {
	background: var(--card_background);
	border-radius: var(--border_radius);
	position: relative;
}
.home-listing .col-md-3 {
	padding: 0;
}
.home-listing .card-text {
	margin-bottom: 0;
}
.home-listing .card-text svg {
	padding-right: 4px;
}
.home-listing .col-md-3:last-of-type {
	padding-right: 15px;
}
.home-listing .card-img-top {
	max-width: 90%;
	width: auto;
	max-height: 40px;
}

.logocell {height:90px; text-align: center;}

.software-listing .row {
	background: var(--card_background);
	border-radius: var(--border_radius);
	position: relative;
}

.software-listing .card-body {padding:10px;}

.number {
	position: absolute;
    z-index: 999;
    top: 0;
    display: block;
    background-color: white;
    border-radius: 100px;
    padding: 3px 10px;
    margin: 5px;
    overflow: hidden;
    font-weight: 600;
    font-size: 9pt;
}

.listingcta {
	position: relative;
	display: inline-block;
	background-color: #28a745;
	color: #fff; 
	font-size: 12px;
	border-radius: 0.25em; 
	margin-left: 10px;
	padding-right:10px;
	padding-left:3px;

  }
  
  .listingcta::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -0.75em; /* Position of the arrow */
	transform: translateY(-50%);
	width: 0; 
	height: 0; 
	border-top: 0.75em solid transparent;
	border-bottom: 0.75em solid transparent;
	border-right: 0.75em solid #28a745; /* Arrow color, same as background color */
  }


.faq {
	background: url("/template/images/background.png");
	background-color: var(--jumbotron_background);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}

.faqcard .card-header {
	background-color: rgb(248, 232, 255);
}

footer, .post-footer {
	background-color: var(--footer_background) !important;
	color: var(--footer_textcolor);
	height: auto;
}


.voorwaarde {background:none; border:none; text-align:center; font-size: 10px; color: rgba(255, 255, 255, 0.8); margin:0 auto;}



.footerhead {font-size: 1.3rem; font-weight: bold;}

.footer-logo img {
	height: fit-content;
	width: 100%;
}
.footer-nav {
	margin: 0 !important;
	padding: 0 !important;
    list-style-type: none;
	text-align: left;
}

.footer-nav li {margin-bottom: 5px;}

.footer-nav li a {
	padding: 0 !important;
  color: var(--footer_textcolor) !important;
  font-size: 11pt;
}

.footer-nav li a:hover {
  color: var(--linkcolor) !important;
}

.post-footer {
	text-align: center;
	border-top: 1px solid #c8d0cf;
}

.background-color {
	background: var(--jumbotron_background);
}


.review .card, .review .card img {
	border-radius: 0 !important;
}
.review .card-body {
	padding: 0 !important;
}
.review td:first-of-type {
	padding-left: 1.25rem !important;
}
.review td:last-of-type {
	text-align: right !important;
	padding-right: 1.25rem !important;
}
.review .card-title, .review p {
	padding: 0 1.25rem !important;
}

.review .card-title {font-size: 1.2rem; font-weight: bold;}

.header-box {
	margin-left: auto;
    margin-right: auto;
    background: black;
	border-radius: var(--border_radius);
	color: white;
}
.header-box b {
	color: white;
}
.header-review {
	background-image: none;
	background-color: #280f31 !important;
	position: relative;
}

.header-review::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/template/images/xxl-pattern.png');
    background-repeat: repeat; /* Adjust as necessary: no-repeat, repeat-x, repeat-y */
    opacity: 0.1; /* 10% opacity */
    z-index: 1; /* Ensures the pattern is above the background but below the content */
}

.header-review .container {
    position: relative;
    z-index: 2; /* Ensures the content is above the pattern */
}

.header-review h1 {
	color: white !important;
}

.header-list ul {
	column-count: 2;
	list-style-type: none;
    padding-left: 0 !important;
}


.steps .step { background:white; border-radius:10px; }
.steps .number {
	background: rgb(244,63,120);
	font-size: 24px;
	color: white;
  }

@media all and (max-width: 1200px) {
	.header-background {
		height: auto !important;
		min-height: auto;
	}
}

@media all and (max-width: 991px) {
	.btn {
		padding: 6px 0px !important;
	}
}

@media all and (max-width: 768px) {
	.header-listing .col-md-2 {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.header-listing .col-md-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.home-listing .col-md-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.home-listing .col-md-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	footer .col-3 {
		-ms-flex: 0 0 100%;
    	flex: 0 0 100%;
		max-width: 100%;
		text-align: center;
		margin-bottom: .5rem!important;
	}
	.footer-nav {
		text-align: center;
	}
}

/* blur popup */
.popup-image-container {
	width: 48%;
    position: relative;
    padding-top: 40%;
    margin-bottom: 16px; /* Space between rows */
}

.popup-image {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.bg-elements {
	background: rgb(204 129 222);
	border-radius: 0 var(--border_radius) var(--border_radius) 0;
}
.section-block__wrapper {
	background-color: var(--white);
	border-radius: var(--border_radius);
}
.section-block__wrapper > div {
	padding: 25px;
}
.section-block__wrapper > div:first-child {
	flex: 1 0 70%;
}
.section-block__wrapper > div:last-child {
	flex: 1 0 30%;
	gap: 3rem;
}
.section-block__wrapper > div:last-child img {
	width: auto;
	max-width: 100%;
}
@media (max-width: 768px) {
	.bg-elements {
		border-radius: var(--border_radius) var(--border_radius) 0 0;
	}
	.section-block__wrapper {
			flex-direction: column-reverse;
	}
}