@charset "utf-8";
/* CSS Document */
body {
	margin:0px;
	padding:0px;
}
hr{
	display: block;
	border:0px;
	background-image:url("images/hartimpuls.png");
	margin-left: 10px;
	height:10px;
	width:50%;
}
h3{
	color:#008000;
	font-size:23px;
}
@media only screen and (max-width: 600px){
	h3{
		color:#008000;
		font-size:15px;
	}
}
td{
	font-size: 18px;
}
@media only screen and (max-width: 600px){
	td{
		font-size: 15px;
	}
}
p{
	color:#505050;
	font-size:18px;
}
@media only screen and (max-width: 600px){
	p{
		color:#505050;
		font-size:16px;
	}
}

p a:link {
	color:blue;
	text-decoration:underline;
}
p a:hover {
	color:red;
	text-decoration:underline;
}
p a:visited {
	color:green;
	text-decoration:underline;
}
p a:active {
	color:darkorchid;
	text-decoration:underline;
}
li{
	color:#505050;
	font-size: 20px;
}
@media only screen and (max-width: 600px){
	li{
		color:#505050;
		font-size: 16px;
	}
}
ul.menu{
	list-style-type: none;
	margin:0px;
	padding: 0px;
	overflow:hidden;
	color:#00FF00;
}

li.menu{
	float:left;
}

li.menu a:link{
	border-color: #6C6C6C;
	border-radius: 10px;
	color:#000000;
	background-image:linear-gradient(to bottom,#FFFFFF,#73A4B2 );
	text-decoration: none;
}
li.menu a {
 	border-radius: 10px;
	border-color: #6C6C6C;
	border-width: 5px;
  	display: block;
	background-image:linear-gradient(to bottom,#FFFFFF,#9FC1CA );
	text-align:center;
  	padding: 4px 10px;
	margin:0px 5px ;
	overflow:hidden;

}
li.menu a:hover{
	border-radius: 10px;
	background-image:linear-gradient(to bottom,#505050,#9FC1CA );
	color:#FFFFFF;
}

li.menu a:actief{
	color:#000000;
}
li.menuActief a:link{
	border-radius: 10px;
	display:block;
	color:#000000;
	background-image:linear-gradient(to bottom,#FFFFFF,#4A9CF0 );
	text-align: center;
	padding:4px 10px;
	float:left;
	text-decoration: none;
}
li.menu a:visited{
	color:#000000;
}
th{
	color: fuchsia;
	text-align: left;
}

input[type=text]{
	font-size: 16px;
	border: none;
	border-bottom: 1px solid blue;
}
@media only screen and (max-width: 600px){
	input[type=text]{
		font-size: 15px;
		border: none;
		border-bottom: 1px solid blue;
	}
}
input[type=email]{
	font-size: 16px;
	border: none;
	border-bottom: 1px solid blue;
}
@media only screen and (max-width: 600px){
	input[type=email]{
		font-size: 15px;
		border: none;
		border-bottom: 1px solid blue;
	}
}
input[type=password]{
	font-size: 16px;
	border: none;
	border-bottom: 1px solid blue;
}
@media only screen and (max-width: 600px){
	input[type=password]{
		font-size: 15px;
		border: none;
		border-bottom: 1px solid blue;
	}
}
input[type=submit]{
	font-size: 16px;
}
@media only screen and (max-width: 600px){
	input[type=submit]{
		font-size: 15px;
	}
}
textarea{
	font-size: 16px;
	border: 1px solid blue;
}
@media only screen and (max-width: 600px){
	textarea{
		font-size: 15px;
		border: 1px solid blue;
	}
}

formgg{
	display:flex;
	flex-direction:column;
	width: 24rem;
}
.main {
	background:#D7EAEF;
	height:100vh;
	overflow: auto;
}

.sheet{
	width:100%;
	max-width: 1100px;
	margin: 10px auto;
	border-radius: 20px;
}

@media only screen and (max-width: 600px){
	.sheet{
		width:100%;
		margin: 10px auto;
		border-radius: 20px;
	}
}
.spacer{
	padding: 5px 10px ;
	background-color: #FFFFFF;
	border-radius: 13px;
}
.header{
	margin:0px auto;
	padding:0px;
	border-radius: 13px;
	height: 180px;
	background-image: url("images/seniornetlogo.png"),url("images/griekshuis.png"),url("images/header.jpg");
	background-size: 117px 102px,120px 80px,1100px 226px;
	background-position: 3px 20px, 893px 7px,0px 0px;
	background-repeat: no-repeat;
}

@media only screen and (max-width: 600px){
	.header{
		height: 80px;
		background-image: url("images/seniornetlogo-small.png"),url("images/header-small.jpg");
		background-size: 58px 51px,500px 75px;
		background-position: 4px 7px, 3px 0px;
	}
}

.headline{
    font-size: 36px;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color: #4a9cf0;
    position: relative;
    top: 50px;
    left: 30%;

}
@media only screen and (max-width: 600px){
	.headline{
		font-size: 16px;
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		position: relative;
		top:20px;
		left:30%;
	}
}


.slogan{
	font-size: 28px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color:#4a9cf0;
	position:relative;
	top:50px;
	left:40%;
}
@media only screen and (max-width: 600px){
	.slogan{
		font-size: 16px;
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		position:relative;
		top:17px;
		left:40%;
	}
}
@media print {

	html, body {
	  height:100%; 
	  margin: 0 !important; 
	  padding: 0 !important;
	  overflow: hidden;
	}
  
}

.blue a, a:link, a:visited{
	color:#0000FF;
}
.navigatie{
	padding: 5px;
}

.content {
	margin:10px auto;
	border-radius: 13px;
	height: 100%;
	background-color:#F1FFFF;
}
.contentLeft{
	float:left;
	margin: 10px;
	border-radius: 13px;
	width: 54%;
	background-color: #E1FFFF;
}
.contentRight{
	float:right;
	margin: 10px;
	border-radius: 13px;
	width : 39%;
	background-color : #E1FFFF;
}
.contentHeader {
    color: #234D57;
    margin: 5px 20px;
    font-size: 26px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
@media only screen and (max-width: 600px){
	.contentHeader {
    	color: #234D57;
    	margin: 5px 20px;
    	font-size: 20px;
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	}
}
.contentHeader a:link{
    color: #099EC1;
    margin: 5px 20px;
    font-size: 26px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
@media only screen and (max-width: 600px){
	.contentHeader a:link{
    	color: #099EC1;
    	margin: 5px 20px;
    	font-size: 20px;
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	}
}

.contentTekst {
    color: #008000;
    margin: 5px 20px;
    font-size: 23px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight: normal;
}
@media only screen and (max-width: 600px){
	.contentTekst {
    	color: #008000;
    	margin: 5px 20px;
    	font-size: 15px;
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		font-weight: normal;
	}
}
.contentTekstNormal{
    color: #0192C6;;
    margin: 5px 20px;
    font-size: 15px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight: normal;
}
@media only screen and (max-width: 600px){
	.contentTekstNormal{
    	color: #0192C6;;
    	margin: 5px 20px;
    	font-size: 14px;
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		font-weight: normal;
	}
}
.contentTekstSup {
    color: #5991A1;
	margin: 5px 20px;
    font-size: 20px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight: normal;
}
@media only screen and (max-width: 600px){
	.contentTekstSup {
    	color: #5991A1;
		margin: 5px 20px;
    	font-size: 14px;
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
		font-weight: normal;
	}
}
.text a:link {
	color:blue;
	text-decoration: underline;
}
.text a:hover {
	color:red;
	text-decoration: underline;	
}
.text a:visited {
	color:green;
	text-decoration: underline;
}
.text a:active {
	color:darkorchid;
	text-decoration: underline;	
}

.footer{
	margin:0px auto;
	border-radius: 13px 13px 13px 13px;
	height: 30px;
	background-image: url("images/header.jpg");
	background-size: 1100px 30px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
@media only screen and (max-width: 600px){
	.footer{
		margin:0px auto;
		border-radius: 13px 13px 13px 13px;
		height: 20px;
		background-image: url("images/header-small.jpg");
		background-size: 500px 20px;
		background-position: 0px 0px;
		background-repeat: no-repeat;
	}
}
.footerTekst{
	color: #5991A1;
	padding:8px;
	font-size:15px;
	text-align:center;
}
@media only screen and (max-width: 600px){
	.footerTekst{
		color: #5991A1;
		padding:0px;
		font-size:15px;
		text-align:center;
	}
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.colsize{
	width:100%;
}
@media only screen and (max-width: 600px){
	.colsize{
		width:100%;
	}	
}
@media print {
	header, footer, aside, form, … {
	  display: none;
	}
	content {
	  width:100%!important;
	  padding:0!important;
	  margin:0!important;
	}
  }
  
  /* Algemene bannerstijl */
.cookie-banner.snp-style {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 3px solid #1a4c8f; /* SeniornetPlus blauw */
  padding: 20px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
  font-family: Arial, sans-serif;
  z-index: 9999;
}

.cookie-content {
  max-width: 900px;
  margin: 0 auto;
}

.cookie-content h2 {
  color: #1a4c8f;
  margin-top: 0;
}

.cookie-options label {
  display: block;
  margin: 10px 0;
  font-size: 15px;
}

/* Knoppen in SeniornetPlus-stijl */
.btn-primary {
  background: #1a4c8f;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background: #e6e6e6;
  color: #333;
  padding: 10px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary:hover {
  background: #163f78;
}

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

/* Melding op het index.php scherm */

.messageBox {
    padding: 12px 16px;
    margin: 10px 0 20px 0;
    border-radius: 6px;
    font-size: 1.1em;
    opacity: 0;
    animation: fadeIn 0.6s forwards;
}

.messageBox.error {
    background-color: #ffe9e9;
    border: 1px solid #cc0000;
    color: #660000;
}

.messageBox.success {
    background-color: #e9ffe9;
    border: 1px solid #009900;
    color: #003300;
}

/* Fade-out na 6 seconden */
.messageBox.fadeOut {
    animation: fadeOut 1s forwards;
    animation-delay: 6s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Flexbox formulier */
.form-flex {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 380px;
    padding: 1rem 0;
}

/* Form group */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Labels */
.form-group label {
    font-weight: bold;
    font-size: 0.95rem;
}

/* Input */
.form-group input {
    padding: 0.6rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

/* Captcha row */
.captcha-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.captcha-row img {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.captcha-refresh {
    font-size: 0.9rem;
}


/* Knop */
.btn-primary {
    padding: 0.7rem 1rem;
    background-color: #2a6ad6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s ease;
}

.btn-primary:hover {
    background-color: #1f54a8;
}

/* Responsive */
@media (max-width: 480px) {
    .form-flex {
        max-width: 100%;
    }
	
    .captcha-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.formFlex {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 420px;
}

.formRow {
    display: flex;
    flex-direction: column;
}

.formRow label {
    font-weight: bold;
    margin-bottom: 6px;
}

.formRow input {
    padding: 8px;
    font-size: 1rem;
}

.infoText {
    font-size: 0.9rem;
    color: #444;
}

button[type="submit"] {
    padding: 10px 15px;
    font-size: 1rem;
    cursor: pointer;
}