* {
	margin: 0;
	box-sizing: border-box;
}

body{
	font-family: "Lucida Sans", sans-serif;	
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	letter-spacing: -0.5px;
	background-color: #11bdf2;
	margin-bottom:30px;
}


.groups{
	padding:20px 20px 0px 20px;
	font-size:0px;
	max-width:1600px;
}

.groups#privelinks{
	display:none;	
	padding-top:18px;
}

.group {
	display:block;
	margin-right:12px;
	margin-bottom: 16px;
	width: fit-content;
	max-width: 100%;
}

.group h2 {
	margin: 0;
	font-size: 16px;
	padding: 3px 8px 2px 8px;
	display: inline-block;
	background-color: rgba(255,255,255,0.5);
	border-radius: 3px 3px 0px 0px;
	font-weight: 500;
	cursor:pointer;
	user-select: none;
	min-width:90px;
}

.items {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	background-color: rgba(255,255,255,0.5);
	padding:8px 8px 8px 8px;
	border-radius: 0px 3px 3px 3px;
}

.items.hidden{
	display:none;
}

.groups .items > a {
	display:block;
	width:200px;
	background-color: #ffffff;
	text-align: center;
	border-radius:2px;
	padding-top: 12px;
	font-size: 20px;
	align-content: center;
	text-decoration:none;
	color:#333;
	display:flex;
	flex-direction: column;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 4px 0px, rgba(60, 64, 67, 0.15) 0px 2px 8px 1px;
}

.groups .items > a span.name{
	display:block;
	padding-top:10px;
	flex: 1;
	align-content: end;
	border-top:1px solid rgba(0,0,0,0.1);
	padding-bottom:10px;
	padding-left:4px;
	padding-right:4px;
	margin-top:10px;
	border-radius: 0px 0px 10px 10px;
	background-image: linear-gradient(to bottom , rgba(0,0,0,0.04), rgba(0,0,0,0.0));
	white-space: nowrap;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	user-select: none;
}
.groups .items > a span.logo{
	display:block;
	background-repeat:no-repeat;
	background-position:center;
	background-size: contain;
	height:40px;
}

#showPriveWrapper{
	padding:30px 0px 0px 20px;
}

.tabs{
	margin-bottom:280px;
}
.tabs .tab{
	display: inline-block;
}
.tabs h2{
	border: 1px solid transparent;
	margin: 0;
	font-size: 16px;
	padding: 3px 8px 2px 8px;
	display: inline-block;
	background-color: rgba(255,255,255,0.5);
	border-radius: 3px 3px 0px 0px;
	font-weight: 500;
	cursor:pointer;
	user-select: none;
	min-width:90px;
	margin-right:6px;
}
.tabs h2.active{
	border: 1px solid white;
	border-bottom: none;
	color: darkblue;
	border-bottom: 2px solid #88def9;
	top: 1px;
	position: relative;
	z-index: 5;
}
.tabs .items{
	position:absolute;
	left: 20px;
	border: 1px solid white;
	min-width: 475px;
}





a{
	color:#333;
}

a.rn365 span.logo{
	background-image:url('/img/rn365.png');
}
a.kiss span.logo{
	background-image:url('/img/deklimmuur.png');
}
a.gitlab span.logo{
	background-image:url('/img/gitlab.svg');
}
a.redrap span.logo, a.pmaRedrap span.logo{
	background-image:url('/img/knrm.png');
}
a.loginDhz span.logo{
	background-image:url('/img/dhz.png');
}
a.loginBespeak span.logo{
	background-image:url('/img/bespeak.png');
}
a.tweakers span.logo{
	background-image:url('/img/tweakers.png');
}
a.google span.logo{
	background-image:url('/img/Google.png');
}
a.mantis span.logo{
	background-image:url('/img/mantis.png');
}
a.loginSycaCloud span.logo, a.loginSyca span.logo{
	background-image:url('/img/syca.png');
}
a.pmaSycaCloud span.logo {
	background-image:url('/img/PhpMyAdmin.svg');
}
a.SVH span.logo, a.loginSVH span.logo, a.SVHHorecatalent span.logo{
	background-image:url('/img/SVH.webp');
}
a.HA span.logo{
	background-image:url('/img/Home_Assistant.png');
}
a.synology span.logo{
	background-image:url('/img/Synology.png');
}
a.telegraaf span.logo{
	background-image:url('/img/Telegraaf.png');
}
a.geenstijl span.logo{
	background-image:url('/img/geenstijl.png');
}
a.unifi span.logo{
	background-image:url('/img/unifi.webp');
}
a.nuc span.logo{
	background-image:url('/img/vscode.png');
}
a.loginRmmbr span.logo, a.DVLP span.logo{
	background-image:url('/img/rmmbr.png');
}
a.dumpert span.logo{
	background-image:url('/img/dumpert.svg');
}
a.gmail span.logo{
	background-image:url('/img/Gmail.png');
}
a.sonarqube span.logo{
	background-image:url('/img/SonarQubeIcon.png');
}
a.VAL span.logo{
	background-image:url('/img/rmmbr.png');
}
a.EKH span.logo{
	background-image:url('/img/rmmbr.png');
}
a.Mennens span.logo{
	background-image:url('/img/rmmbr.png');
}


		
@media only screen and (max-width: 768px) {
	body{
		letter-spacing: -0.7px;
	}
	.groups {
		padding:10px 10px 0px 10px;
	}
	.groups .items > a {
		padding-top: 8px;
		font-size: 14px;
		width:118px;
	}
	.groups .items > a span.logo{
		height:25px;
	}
	.groups .items > a span.name{
		padding-top:6px;
		padding-bottom:6px;
		margin-top:6px;
	}
	#showPriveWrapper{
		padding:25px 0px 0px 10px;
	}
	.groups#privelinks{
		padding-top:6px;
	}

	.group {
		margin-right:3px;
	}
	.items {
		gap: 9px;
		padding:5px 3px 5px 3px;
	}
	
	.group h2 {
		font-size: 13px;
		padding: 2px 5px 1px 5px;
	}
	.tab h2 {
		font-size: 13px;
		padding: 2px 5px 1px 5px;
		min-width: 60px;
  		margin-right: 4px;
	}

	.tabs .items{
		left: 10px;
		right: 10px;
		min-width: 321px;
	}

	
	.tabs{
		margin-bottom:200px;
	}

}