:root
{
    --hoofdachtergrond: #ececec;
    --menuachtergrond: #fafafa;
    --zwarteranden: #d0d0d0;
    --achtergrond: #ffffff;
    --tekst: #222222;
    --standaardlink: #336699;
}

.DonkereModus
{
    --hoofdachtergrond: #181818;
    --menuachtergrond: #202020;
    --zwarteranden: #303030;
    --achtergrond: #222222;
    --tekst: #e5e5e5;
    --standaardlink: #66a3d2;
}

/* Standaard */ 
a:link, a:visited { color: var(--standaardlink); text-decoration: underline; }
a:hover, a:active { color: #ab0102; text-decoration: none; }

/* Black */ 
a.b:link, a.b:visited { color: var(--tekst); text-decoration: underline; }
a.b:hover, a.b:active { color: #ab0102; text-decoration: none; }

/* Menu */ 
a.menu:link, a.menu:visited { color: var(--tekst); text-decoration: none; }
a.menu:hover, a.menu:active { color: #ab0102; text-decoration: underline; }

/* Red */ 
a.r:link, a.r:visited { color: #ab0102; text-decoration: underline; }
a.r:hover, a.r:active { color: #ab0102; text-decoration: none; }

/* Black-solid */ 
a.bs:link, a.bs:visited, a.bs:hover, a.bs:active { color: var(--tekst); text-decoration: none; }

/* InText */ 
a.intext:link, a.intext:visited { color: #0288d1; text-decoration: underline; }
a.intext:hover, a.intext:active { color: #0288d1; text-decoration: none; }

/* Logo */ 
a.logo:link, a.logo:visited, a.logo:hover, a.logo:active { color: #fff200; text-decoration: underline; }

/* LogoSmall */ 
a.logosmall:link, a.logosmall:visited, a.logosmall:hover, a.logosmall:active { color: #ffffff; text-decoration: none; }

/* button Link */ 
a.buttonlink:link, a.buttonlink:visited, a.buttonlink:hover, a.buttonlink:active { display: block; width: auto; }

/* Emoticon */ 
a.emo:link, a.emo:visited { color: #ab0102; font-size: 20px; text-decoration: none; cursor: pointer; }
a.emo:hover, a.emo:active { color: #ab0102; font-size: 24px; text-decoration: none; cursor: pointer; }

body
{
	background: var(--hoofdachtergrond);
	background-repeat: repeat;
	width: 1250px;
	height: 100%;
	margin: 0 auto;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	color: var(--tekst);
	line-height: 175%;
}

h1, p {
  margin: 0;
  font: inherit;     /* neemt het font over van de parent */
  font-size: inherit;
  font-weight: inherit;
}

.logotxtbig, .logotxtsmall	{ font-family: Trebuchet MS; font-weight: bold; text-shadow: 5px 2px 2px #000000; letter-spacing: 2px; }
.logotxtbig				{ font-size: 44px; color: #f9f300; padding-left: 10px; padding-top: 5px; }
.logotxtsmall			{ font-size: 22px; color: #ffffff; padding-left: 70px; padding-top: 5px; }

.header
{
    display: flex;
    align-items: center;

    background: linear-gradient(to bottom, #a50000 0%, #8b0000 100%);
    border: 1px solid var(--zwarteranden);
    margin: 0 0 10px 0;

    min-height: 103px;
}
@media (max-width: 768px)
{
    .header
    {
        min-height: 50px;
    }
}

.headerleft
{
    flex: 1;
}

.headerright
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ButtonModus,
.ButtonMenu
{
    cursor: pointer;
    width: 27px;
    height: 21px;

    align-self: flex-start;
    margin-top: 5px;
}
.ButtonMenu
{
    display: none;
}
@media (max-width: 768px)
{
    .ButtonMenu
    {
        display: block;
    }
}
@media (max-width: 768px)
{
    .mainmenu
    {
        display: none;
    }

    .mainmenu.menu-open
    {
        display: block;
    }
}

.mainmenu
{
	float: left;
	width: 250px;
	z-index: 100;
}
.menublock
{
	width: 240px;
	height: auto;
	padding-top: 5px;
	margin-bottom: 5px;
	background: var(--menuachtergrond);
	border: 1px solid var(--zwarteranden);
	box-sizing: border-box;
}
.maincontent
{
	float: left;
	width: calc(100% - 250px);
	min-height: 1000px;
	padding: 5px;
	box-sizing: border-box;
	background: var(--achtergrond);
}

p
{
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.vet, .tab	{  margin-bottom: 8px; }
.vet		{ font-weight: bold; }
img		{ border-width: 0px; }
.nobm	{ margin-bottom: 0px; }
.sr		{ color: #ab0102; font-size: 12px; }
.txtcenter	{ text-align: center; }
.floatright	{ float: right; }
.txtheader	{ font-size: 20px; text-align: center; }

.TagsGrid
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px)
{
	.TagsGrid
	{
		grid-template-columns: repeat(2, 1fr);
	}
}
.TagsBlok
{
	flex-direction: column;
}

.SelectieGrid
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px)
{
	.SelectieGrid
	{
		grid-template-columns: 1fr;
	}
}
.SelectieBlok
{
	flex-direction: column;
}

.ProfielGrid
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px)
{
	.ProfielGrid
	{
		grid-template-columns: repeat(2, 1fr);
	}
}
.ProfielBlok
{
	flex-direction: column;
}


.rij
{
    display: flex;
    gap: 5px;
}
.rijbuttons
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.rijtitel
{
	flex: 3;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rij55
{
	width: 55px;
}
.rij45
{
	width: 45px;
}
.rij65
{
	width: 65px;
}
.rij75
{
	width: 75px;
}
.rijrest
{
	flex: 1;
}

@media (max-width: 768px)
{
    .desktoponly
    {
	display: none;
    }
}

input[type=TEXT], input[type=PASSWORD], TEXTAREA, select
{
	background: #ffffff;
	border: 1px solid black;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 14px;
	font-family: Arial, Helvetica, Sans-Serif;
	height: 25px;
	margin-top: 5px;
	margin-bottom: 5px;
}

input[type=CHECKBOX]
{
	background-color: #ffffff;
	border: 1px solid black;
	border-radius: 5px;
	box-sizing: border-box;
}

input[type=SUBMIT]
{
	background: #eaeaea;
	border: 1px solid black;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 14px;
	font-family: Arial, Helvetica, Sans-Serif;
	height: 25px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.ImageInText
{
float: right;
width: 250px;
height: 250px; 
border: solid 1px black;
margin-bottom: 10px;
margin-left: 10px;
}

.whiteblock,
.transblock,
.redblock,
.greenblock,
.greyblock
{
    margin: 1px;
    padding: 4px;
    border-radius: 5px;
    text-decoration: none;
    min-height: 20px;
}
.whiteblock
{
    border: 1px solid #e2e2e2;
    background: var(--achtergrond);
    color: var(--tekst);
}
.transblock
{
    border: 1px solid transparent;
    background: var(--achtergrond);
    color: var(--tekst);
}
.redblock
{
    border: 1px solid #e3b4b4;
    background: #fdf0f0;
    color: #222;
}
.greenblock
{
    border: 1px solid #b8d8b8;
    background: #f2faf2;
    color: #222;
}
.greyblock
{
    border: 1px solid #d8d8d8;
    background: #f8f8f8;
    color: #222;
}

.profilethumb
{
	width: 200px;
	height: 200px;
	border-radius: 5%;
	border: 1px solid black;
	box-sizing: border-box;
	margin-left: 5px;
	margin-right: 5px;
	display: block;
}

.profilethumbdiv
{
	font-size: 12px;
	display: inline-block;
	margin-bottom: 10px;
}

.profielfotopopup
{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.profielfotopopup img
{
	max-width: 75vw;
	max-height: 75vh;
	width: auto;
	height: auto;
}

.ppround,
{
    float: left;
    margin: 0 10px 10px 0;
    border-radius: 50%;
    border: 1px solid #E8E8E8;
    width: 50px;
    height: 50px;
}

@media (max-width: 768px)
{
	body
	{
		width: auto;
		font-size: 14px;
	}

	.logotxtbig
	{
		font-size: 32px;
		padding-left: 25px;
	}

	.logotxtsmall
	{
		font-size: 16px;
		padding-left: 75px;
	}

	.header
	{
		height: 65px;
		width: 100%;
	}
	.headerright
	{
		display: none;
	}

	.mainmenu
	{
		position: absolute;
		left: 0;
		top: 65px;
		display: none;
	}

	.maincontent
	{
		width: 100%;
		float: none;
		background: var(--achtergrond);
	}

	.profilethumb
	{
		width: 150px;
		height: 150px;
	}

	.ImageInText
	{
		width: 150px;
		height: 150px;
	}
}