:root 	{
	--BLUE 			: 	#173c8a;
	--BLUE2 		: 	#1a9cfe;
	}



* {
	box-sizing	:	border-box;
}

body {
	margin			:	0;
	font-family		:	'Elms Sans',Arial, sans-serif;
	background		:	#f5f7fb;
	color			:	var(--BLUE);
}
.luckiest-guy-regular {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
}


.gif-crop {
	width			:	80px;   /* 120 - 20 */
	height			:	70px;    /* 90 - 20 */
	overflow		:	hidden;
	display 		: 	inline-block;
	margin-top 		: 	10px;
}

.gif-crop img {
	width			:	120px;
	height			:	90px;
	position:relative;
	left:-20px;
	top:-10px;
	display:block;
}

a.top :hover 			{color:var(--BLUE2) ;text-decoration:none}
.password-wrap 			{position:relative;}
.password-wrap input 	{width:100%;padding-right:50px;}
.password-toggle 		{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;padding:6px;color:var(--BLUE);}
.password-toggle i 		{font-size:20px;}
.password-toggle:hover 	{opacity:0.8;}
a.oeps 					{width:120px;display:inline-block;margin:0px auto;text-decoration:none;}
a.oeps:hover 			{text-decoration:none;color:var(--BLUE2);}
.bling 					{position:absolute;top:-2px;right:-2px;pointer-events:none;}
.bling i 				{font-size:10px;opacity:0;transform:scale(0.5) rotate(0deg);animation:blingAnim 2s infinite;}

.logo-wrap 				{position:relative;display:inline-block;}
.logo-wrap img  		{display:block;}

.logo-wrap .bling  		{position:absolute;top:35%;right:30%;pointer-events:none;}
.logo-wrap .bling i 	{font-size:14px;color:#FFD700;opacity:0;transform:scale(0.5) rotate(0deg);animation:blingAnim 2s infinite;}

.trash 					{margin-top:10px;display:block;background-color:#c00;color:#fff;padding:20px;border-radius:5px;border:solid 1px #c00;}
#installer 				{background-color:#eee;border-radius:10px;padding:10px;margin-bottom:25px;display:block;}
.boodschappen 			{margin-top:10px;border:solid 1px #000;padding:15px;border-radius:5px;margin-bottom:10px;	}
.qr 					{margin-top:10px;margin-bottom:10px;padding:20px;border-radius:5px;}

.forgot-password-link {
	text-align		:	right;
	margin			:	-4px 0 16px 0;
	position		:	relative;
	z-index			:	5;
}

.forgot-password-link a {
	display			:	inline-block;
	padding			:	8px 0 8px 12px;
	font-size		:	14px;
	line-height		:	1.4;
	color			:	var(--BLUE);
	text-decoration	:	none;
}

.forgot-password-link a:hover {
	text-decoration	:	underline;
}
#fac{font-size:20px;display:inline-block;}
#fac:hover{text-decoration:none;color:var(--BLUE2);}
@keyframes blingAnim {
	0% {opacity:0;transform:scale(0.5) rotate(0deg);}
	20% {opacity:1;transform:scale(1.3) rotate(20deg);}
	40% {opacity:0.8;transform:scale(1) rotate(-10deg);}
	60% {opacity:0;transform:scale(0.6) rotate(0deg);}
	100% {opacity:0;}
}

.faq-accordion {
	max-width		:	760px;
	margin			:	0 auto;
}

.faq-item {
	margin-bottom		:	10px;
	border			:	1px solid #dde4ef;
	border-radius		:	14px;
	background-color	:	#fff;
	overflow			:	hidden;
	box-shadow		:	0 6px 18px rgba(0,0,0,0.06);
}

.faq-question {
	width			:	100%;
	display			:	flex;
	align-items		:	center;
	gap			:	12px;
	padding			:	16px;
	border			:	none;
	background-color	:	#fff;
	color			:	var(--BLUE);
	font-size		:	16px;
	font-weight		:	700;
	text-align		:	left;
	cursor			:	pointer;
}
.faq-item.active .faq-question:after {
	transform		:	rotate(180deg);
	color			:	var(--BLUE2);
}

.faq-question:after {
	content			:	"\f078";
	font-family		:	"Font Awesome 7 Pro";
	font-weight		:	900;
	margin-left		:	auto;
	color			:	var(--BLUE);
	transition		:	transform 0.25s ease, color 0.25s ease;
}

.faq-icon {
	width			:	34px;
	height			:	34px;
	min-width		:	34px;
	display			:	flex;
	align-items		:	center;
	justify-content	:	center;
	border-radius	:	50%;
	background-color:	rgba(24,104,185,0.1);
	color			:	var(--BLUE);
	font-size		:	14px;
	transition		:	all 0.25s ease;
}

.faq-item.active .faq-icon {
	background-color:	var(--BLUE);
	color			:	#fff;
}

.faq-answer {
	max-height		:	0;
	overflow			:	hidden;
	transition		:	max-height 0.35s ease;
	text-align:left;
}

.faq-answer div {
	padding			:	0 16px 16px 62px;
	color			:	#333;
	font-size		:	14px;
	line-height		:	1.6;
}

.faq-item.active .faq-answer {
	max-height		:	220px;
}

.faq-item.active .faq-question:after {
	transform		:	rotate(180deg);
}


a.plusbutton  		{border:solid 1px #FFD700;position:fixed;right:25px;bottom:25px;width:60px;height:60px;border-radius:50%;background:var(--BLUE);color:#FFD700;display:flex;align-items:center;justify-content:center;font-size:38px;line-height:1;text-decoration:none;box-shadow:0 8px 25px rgba(0,0,0,0.50);z-index:9999;transition:0.25s ease;}
a.plusbutton:hover  {background:#0f4f91;color:#fff;text-decoration:none;transform:scale(1.08);}
a.plusbds  			{margin-left:20px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;text-decoration:none;transition:0.25s ease;}
a.plusbds:hover 	{text-decoration:none;transform:scale(1.08);}
a.offline 			{background-color:#c00 !important;}
a.online 			{}
.notFotoMaken 		{width:153px;margin:0px auto;font-weight:bold;display:inline-block;color:#fff;background-color:#c00;padding:6px 12px;border-radius:10px;margin-bottom:10px;}
.codes 				{display:none;}
.delback 			{display:none;}
.card-full {
    grid-column: 1 / -1; /* neemt volledige breedte */
}

.picturetakerer {
	display			:	inline-block;
	border			:	solid 1px #336699;
	border-radius	:	10px;
	margin-bottom	:	10px;
	padding			:	10px;
	background-color:	var(--BLUE);
	color			:	#fff;
}

a.picturetakerer:hover {
	background-color:	#fff;
	color			:	#336699;
	text-decoration	:	none;
}

input {
	text-align		:	center;
	font-size		:	15px;
	width			:	100%;
	padding			:	14px;
	margin			:	0 0 16px 0;
	border			:	1px solid #ccc;
	border-radius:	10px;
}
input,button,select,radio,checkbox {font-family		:	'Elms Sans',Arial, sans-serif;}

a.resultStore {
	border			:	solid 1px #FFF;
	display			:	block;
	padding			:	10px;
	cursor			:	pointer;
	font-size		:	20px;
	text-transform	:	uppercase;
	color			:	#fff;
	border-radius	:	10px;
	
}

a.resultStore:hover {
	background-color:	#fff !important;
	color			:	var(--BLUE);
	text-decoration	:	none;
	border			:	solid 1px var(--BLUE);
}

a.annuleren {
	border			:	solid 1px #336699;
	padding			:	5px;
	display			:	inline-block;
	border-radius	:	5px;
}

a.annuleren:hover {
	text-decoration		:	none;
}

a.no-hover:hover {
	background		:	inherit !important;
	transform		:	none !important;
	box-shadow		:	none !important;
}

a.scan {
	display			:	block;
	text-align		:	center;
	background-color:	#eee;
	border-radius	:	10px;
	padding			:	30px 0;
	margin-top		:	10px;
}

.grid-6 {
	display					:	grid;
	grid-gap				:	20px;
	grid-template-columns	:	repeat(6,1fr);
}

.grid-5 {
	display					:	grid;
	grid-gap				:	30px;
	grid-template-columns	:	repeat(5,1fr);
}

.grid-4 {
	display					:	grid;
	grid-gap				:	40px;
	grid-template-columns	:	repeat(4,1fr);
}

.grid-3 {
	display					:	grid;
	grid-gap				:	50px;
	grid-template-columns	:	repeat(3,1fr);
}

.grid-2 {
	display					:	grid;
	grid-gap				:	5px;
	grid-template-columns	:	1fr 1fr;
}

.grid-2 > * {
	min-width		:	0;
	overflow		:	hidden;
}
.grid-2-inner {
	display					:	grid;
	grid-gap				:	5px;
	grid-template-columns	:	1fr 1fr;
}

.grid-2-inner > * {
	min-width		:	0;
	overflow		:	hidden;
}

a.centered {
	overflow		:	hidden;
	display			:	flex;
	justify-content	:	center;
	align-items		:	center;
	flex-direction	:	column;
	min-height		:	80px;
	border-radius	:	5px;
	font-size		:	18px;
	text-transform	:	uppercase;
	text-align		:	center;
	color			:	#fff;
	text-decoration	:	none;
	box-sizing		:	border-box;
}
.veryBig{font-size:25px;}
@media screen and (max-width: 480px) {
	a.centered {min-height		:	70px;font-size		:	15px;}
	
}

a.centered:hover {
	text-decoration	:	none;
}

.back {
	border-radius	:	10px;
	text-decoration	:	none;
	color			:	#fff;
	display			:	block;
	text-align		:	center;
	padding			:	30px;
	background-color:	#000;
	margin-bottom	:	10px;
}

.colorFirst::first-letter {
	color			:	red;
	font-size		:	130%;
	font-weight		:	bold;
}

.popup {
	position		:	fixed;
	top				:	0;
	left			:	0;
	width			:	100%;
	height			:	100%;
	background		:	rgba(0,0,0,0.6);
	display			:	none;
	align-items		:	center;
	justify-content	:	center;
	z-index			:	9999;
}

.popup.show {
	display			:	flex;
}

.popup-box {
	background		:	#fff;
	padding			:	30px;
	border-radius	:	16px;
	width			:	90%;
	max-width		:	400px;
	text-align		:	center;
	animation		:	popupIn .25s ease;
}

.popup-box h3 {
	margin-top		:	0;
	color			:	#1868b9;
}

#popup-content {
	margin			:	15px 0 25px 0;
	color			:	#444;
	line-height		:	1.5;
}

@keyframes popupIn {
	from {
		transform	:	scale(0.8);
		opacity		:	0;
	}

	to {
		transform	:	scale(1);
		opacity		:	1;
	}
}

.wrap {
	min-height		:	100vh;
	display			:	flex;
	align-items		:	center;
	justify-content	:	center;
	padding			:	10px;
}

.card {
	width			:	100%;
	max-width		:	460px;
	background		:	#fff;
	border			:	1px solid #d9d9d9;
	border-radius	:	16px;
	box-shadow		:	0 10px 30px rgba(0,0,0,.08);
}

.card.center {
	text-align	:	center;
}

h1 {
	margin			:	0 0 20px 0;
	color			:	var(--BLUE);
	font-size		:	15px;
	font-weight 	: 	normal;
}
h3 {
	margin			:	0 0 20px 0;
	color			:	var(--BLUE2);
	font-size		:	20px;
	font-weight 	: 	normal;
}
strong {
	color			:	var(--BLUE2);
}

p {
	margin			:	0 0 20px 0;
}

label {
	display			:	block;
	margin			:	0 0 6px 0;
	font-weight		:	700;
}

.spin {
	animation	:	spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform	:	rotate(0deg);
	}

	to {
		transform	:	rotate(360deg);
	}
}

.btn {
	display			:	block;
	width			:	100%;
	padding			:	14px 18px;
	text-decoration	:	none;
	border-radius	:	10px;
	font-weight		:	700;
	border			:	0;
	cursor			:	pointer;
	transition		:	.2s;
	text-align		:	center;
}

.btn-primary {
	background		:	var(--BLUE);
	color			:	#fff;
}

.btn-primary:hover {
	background		:	#14589d;
}

.btn-secondary {
	background		:	#fff;
	color			:	var(--BLUE);
	border			:	1px solid #cfcfcf;
}

.btn-secondary:hover {
	background		:	#f2f6fb;
}

.error {
	background		:	#ffe8e8;
	color			:	#b30000;
	border			:	1px solid #f3b3b3;
	padding			:	12px;
	border-radius	:	10px;
	margin			:	0 0 16px 0;
}

.bottom {
	margin-top		:	18px;
	text-align		:	center;
}

a {
	color			:	var(--BLUE);
	text-decoration	:	none;
}

a:hover {
	text-decoration	:	none;
}

.loading-popup {
	position		:	fixed;
	top				:	0;
	left			:	0;
	width			:	100%;
	height			:	100%;
	display			:	none;
	align-items		:	center;
	justify-content	:	center;
	background		:	rgba(0,0,0,0.55);
	z-index			:	99999;
}

.loading-popup.show {
	display	:	flex;
}

.loading-popup-box {
	width			:	calc(100% - 40px);
	max-width		:	380px;
	padding			:	30px 25px;
	border-radius	:	16px;
	background		:	#fff;
	text-align		:	center;
	box-shadow		:	0 20px 60px rgba(0,0,0,0.18);
}

.loading-popup-gif {
	width			:	80px;
	height			:	auto;
	margin			:	0 0 15px 0;
}

.loading-popup-title {
	margin			:	0 0 10px 0;
	font-size		:	22px;
	color			:	#111;
}

.loading-popup-text {
	color			:	#555;
	line-height		:	1.5;
}

.taal,
.taal2 {
	display			:	block;
	text-align		:	center;
	text-decoration	:	none;
	background-color:	#000;
	color			:	#fff;
	padding			:	15px;
	position		:	relative;
	font-size		:	12px;
}

.taal2 {
	padding			:	10px;
	font-size		:	20px;
}

.grfr {
	border-bottom	:	solid 1px #fff;
}

.grfr1 {
	display			:	inline-block;
	width			:	70%;
	color			:	#fff;
	padding			:	8px;
}

.grfr2 {
	text-align		:	right;
	display			:	inline-block;
	width			:	25%;
	color			:	#fff;
	padding			:	8px;
	padding-right	:	40px;
	font-weight		:	bold;
}

.actif {
	position		:	absolute;
	right			:	5px;
	top				:	5px;
}

.mainContainer {
	width			:	100%;
	max-width		:	400px;
	margin			:	0 auto;
	background-color:	#fff;
	border-left		:	solid 1px #fff;
	border-right	:	solid 1px #fff;
}

.wat {
	display			:	block;
	text-align		:	center;
	text-decoration	:	none;
	background-color:	#000;
	color			:	#fff;
	padding			:	15px;
	position		:	relative;
}

#talen {
	gap				:	5px;
	margin-bottom 	:	5px;
	border-top		:	solid white 5px;
}

#zoek {
	display			:	none;
	padding-top		:	8px;
	padding-left	:	20px;
	background-color:	#000;
	color			:	#fff;
	border-bottom	:	solid 5px #fff;
}

#zoek div:first-child {
	display			:	inline-block;
	width			:	25%;
}

#zoek div:nth-child(2) {
	display			:	inline-block;
	width			:	70%;
	padding-right	:	20px;
	padding-top		:	8px;
}

#wat {
	gap				:	5px;
	margin-bottom	:	5px;
}

a.terug {
	color			:	#c00;
	font-size		:	25px;
	margin-left		:	8px;
}

.gr100 {
	padding			:	4px;
	text-align		:	right;
	padding-left	:	5px;
	background-color:	#86b9f0;
	color			:	#fff;
	margin-bottom	:	5px;
}

.actif img {
	width			:	20px;
}

#topper a {
	display			:	block;
	background-color:	#000;
	color			:	#fff;
	text-decoration	:	none;
	padding			:	10px 20px;
	text-align		:	center;
	border-radius	:	10px;
	margin-bottom	:	5px;
	margin-top		:	5px;
}

#sendDiv1 {
	display			:	none;
}

#codeDiv1 {
	display			:	none;
}

.shop_submit {
	background-color:	#000;
	color			:	#fff;
	text-transform	:	uppercase;
	border-radius	:	3px;
	display			:	inline-block;
	font-size		:	14px;
	margin-top		:	0;
	padding			:	10px 15px;
	text-decoration	:	none;
	line-height		:	normal;
}

.shop_submit:hover {
	background-color:	#000;
	color			:	#fff;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance	:	none;
	margin				:	0;
}

input[type=number] {
	-moz-appearance	:	textfield;
}


.boodschap-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    z-index: 99999;
}

.boodschap-popup.show {
    display: flex;
}

.boodschap-popup-box {
    width: calc(100% - 40px);
    max-width: 380px;
    padding: 30px 25px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.boodschap-popup-input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

.boodschap-popup-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.btn-cancel,
.btn-add {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

.btn-cancel {
    background: #ddd;
}

.btn-add {
    background: #4CAF50;
    color: #fff;
}