/* =============================================================== */
/* ============== SuppletieKompas Default StyleSheet ============= */
/* --------------------------------------------------------------- */
/* CopyRight 2024-2030 (@)SuppletieKompas                          */
/* Contact: info@suppletiekompas.nl                                */
/* Author: martie@amksoft.mooo.com                                 */
/* =============================================================== */
/* Naam = (simple) Element type naam (zoals html div)              */
/* .Naam = class-name                                              */
/* #Naam = ID-name                                                 */
/* =============================================================== */
/* Basis-Kleuren:                                                  */
/* 	Kleur: #89a396; Develop-Alias: LichtGroen                    */
/* 	Kleur: #e7856e; Develop-Alias: Oranje                        */
/* 	Kleur: #1c4851; Develop-Alias: DonkerGroen                   */
/*																						 */
/* 	element.style.display = '';           	   // Default         */
/* 	element.style.display = 'none';           // Hide            */
/* 	element.style.display = 'block';          // Show            */
/* 	element.style.display = 'inline';         // Show            */
/* 	element.style.display = 'inline-block';   // Show            */
/* =============================================================== */

/* https://blog.logrocket.com/create-fancy-corners-css/ */

 :root {
  --KompasLiGroen: #89a396;
  --KompasnOranje: #e7856e;
  --KompasDoGroen: #1c4851;
  --Kompas00Beige: #faf6f4;
  --Kompas00Blauw: #1a3373;
  --KompasDoBlauw: #1c4851; /* Dit is geen DonkerBlauw, maar DonkerGroen */

  --GradBtnYellow: #f6d365;
  
  --KompasKopKlur: #1a3373;

  --BewijsGroen: #81a895;
  --BewijsOrnge: #ef7d63;
  --BewijsRood1: #ed4747;
  --BewijsRood2: #ed4747;

  --GlblZoekInput: #e3dac9;
}

/* https://www.w3schools.com/cssref/css3_pr_font-face_rule.php
Definition and Usage
With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.
In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
*/
@font-face {
}

/* https://transfonter.org  om fonts te wijzigen naar ander format */
/*
font-family: SuppletieFont;
   src: url('fonts/CenturyGothic.ttf')   format('truetype'),
     url('fonts/CenturyGothic.woff2') format('woff2'),
     url('fonts/CenturyGothic.woff')  format('woff');
*/
/* En/of een font-face voor elk font variant zoals:
  normal, bold, italics etc.
  GOTHIC.TTF
  GOTHICB.TTF
  GOTHICB0.TTF
  GOTHICBI.TTF
  GOTHICI.TTF
*/

* {
  background-color: transparent;
  /* font-family: Trebuchet MS, SuppletieFont, sans-serif;*/
  font-family: Trebuchet MS;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;  
}

html {
  min-height: 100%;
  padding: 0;
  margin: 0;
  
  display: flex;
  flex-direction: column;  
}
body {
  flex-grow: 1;
}

b {
  font-weight: 900;
  /* Default = 700; */
}

.DefaultDivStyle {
	margin: 0 auto; 
	background-color:transparent;
}
.DefaultDivShiftToRight {
}
@media (min-width: 820px) {
	.DefaultDivStyle {
		width: 80%; 
	}
	.DefaultDivShiftToRight {
		margin-left:5em;
	}
}

.NormalTekst {
  color: #000000;
  background-color: #ffffff;
}

.LegalKopStyle {
	color: var(--KompasKopKlur);
	font-size:30px; 	
	font-weight: 900;
}


#DivHeaderLogo {
	/*
	display:flex; 
	width:100%;
	align-items:baseline; 
	*/
	/*justify-content: left;*/
}
@media (min-width: 820px) {
	#DivHeaderLogo {
		display:flex; 
		width:100%;
		align-items:baseline; 
		/*justify-content: left;*/
	}
}

#DivBgItemCenter {
 	height:280px; 
 	background-image: url("./img/BannerL.png"),url("./img/BannerR.png"); 
 	background-repeat: repeat-y, repeat;
 	background-size: auto 100%; 
 	display:flex; 
 	align-items:center;
}

#DivTableHider {
	background-color: transparent; 
	width:100%;
	display: none;
}
#DivTableShown {
	background-color: transparent; 
	width:100%;
}

.BN-Header {
	width:100%;
	overflow:hidden;
	margin-right:auto;
	color: #ffffff; 
}

#BN-banner {
    width: 100%;
    height: auto;
    overflow: hidden;
    /*margin: 0 auto;*/
	 display: flex; 
	 line-height:0;
}
#BN-wrapper {
    width: 100%;
    height: auto;
    overflow: hidden;
    /*margin: 0 auto;*/
	 display: flex; 
	 line-height:0;
}
#NB-container {
    width: 100%;
    height: auto;
    /*margin: 0 auto;*/
	 line-height:0;
}
.NB-banner-img {
	 height: auto;
    width: 100%;
    margin: 0 auto; /* Toegevoegd???*/
	 vertical-align: bottom;
	 line-height:0;
}

.FloatCenter {
	position:fixed;
	z-index:10;
	top: 100px;
	width:100%;
	background-color: transparent;	
}
.FloatingDiv {
   margin: 0 auto; /* Center?? */
 	border: 5px solid var(--KompasLiGroen);
	border-radius: 28px;
	padding: 20px;
	width:600px;
	background-color: #ffffff;	
}
.FloatDivWidthSupDta {
	width:58em;
}
.FloatDivWidthAdvies {
	height:30em;
	width:40em;
	overflow-y: scroll;
}
.FloatDivWidthAanvln {
	height:37em;
	width:38em;
	overflow-y: scroll;
}
.FloatDivWidthBewijs {
	height:35em;
	width:51em;
	overflow-y: scroll;
}
::-webkit-scrollbar {
	width: 15px;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
	border-radius: 35px;
}
::-webkit-scrollbar-thumb { /* Draggeble piece */
	border-radius: 35px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
/* Change the white to any color */
/*
input:-webkit-autofill, input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
}
*/

.BewijsColor1 {
 	border: 5px solid var(--BewijsGroen);
}
.BewijsColor2 {
 	border: 5px solid var(--BewijsOrnge);
}
.BewijsColor3 {
 	border: 5px solid var(--BewijsRood1);
}
.BewijsColor4 {
 	border: 5px solid var(--BewijsRood2);
}
     
.HeaderTable {
	font-size:0.7em;
	margin: 0 auto; 
	padding: 5px;
 	height:180px;
 	border: 15px solid var(--KompasLiGroen);
	/* border-collapse: collapse; */
	border-radius: 28px;
	background-color: #ffffff;
 }
 
 .MijnAccountError {
	margin: 0 auto; 
	padding: 15px;
 	border: 5px solid var(--BewijsRood1);
 	border-radius: 28px;
	background-color: #ffffff;
 }
 
.HeaderText {
	/*height: 30px;*/
	color: #000000; 
	border-collapse: collapse;
	background-color: transparent;
}

h1 {
  white-space:nowrap;
  font-size:30px;
  /* text-align:center;*/
  vertical-align:top;
  color: var(--KompasDoGroen);
  /*color: inherit;*/
  /*background-color: inherit;*/
  margin-left: 30px;
}
.h1Img {
	height:60px;
	cursor: pointer;	
}
.h1Spn {
	position: relative;
	top:-15px;
	font-size:30px;
}

.TopZoekInput {
	position: relative;
	top:-22px; 
	width:auto;
	margin-right:30px;
}
@media (min-width: 820px) {
	.TopZoekInput {
		position: relative;
		left:+30px; 
		top:-22px; 
		/*width:auto;*/
	}
}

.TopButtons {
	/*
	position: relative;
	top:-18px; 
	width:auto;
	margin-left: auto; 
	*/
}
@media (min-width: 820px) {
	.TopButtons {
		position: relative;
		top:-18px; 
		/* was: width:30%; */
		/*align-items:right;*/
		margin-left: auto; 
		margin-right: 30px;
	}
}

h2 {
  font-size:30px;
  text-align:center;
  vertical-align:top;
  color: #4d5645;
}

.FOUT {
  color: red;
}
.LetOp {
  color: blue;
}
.Info {
  color: Green;
}

.DefaultBold {
  /*font-weight: bold;*/
  font-weight: 900;
  /* Default = 700; */
}

.DefaultBoldFp {
  /*font-weight: bold;*/
  font-weight: 900;
  color: var(--KompasnOranje);
  /* Default = 700; */
}

.DefaultBoldOo {
  /*font-weight: bold;*/
  font-weight: 900;
  color: var(--Kompas00Blauw);
  background-color: transparent;
  /* Default = 700; */
}

/*
#tableUsers tr:hover{
   background-color: yellow;
}
*/

.SmallText {
   background-color: inherit;
	font-size:12px;
}

.LogInLogOutHelpDiv {
	background-color: transparent;  
	top:150px; 
	position:absolute; 
	right: 0px;
	width: 300px;
}
.LogInLogOutHelp {
  background: var(--KompasnOranje); 
  border-radius: 30px 30px 30px 30px;
}
.TextInLogInLogOutHelp {
	padding:20px; 
	text-align:center;
	background-color:transparent; 
	font-size:larger;
	font-weight:bold; 
	color:white
}

.LogInLogOutButton input {
	cursor: pointer;
}
.LogInLogOutButton {
	background-color: var(--KompasnOranje);
	font-weight:normal;
	color:white;
	height:25px;
	width: 200px;
	font-size:15px;
	margin-top:3px;
	padding-top:0px;
	/*vertical-align:bottom;*/
	border-radius: 8px;
 	border: 2px solid white;
 	/*
 	border-top: 2px solid var(--KompasnOranje);
 	border-left: 2px solid var(--KompasnOranje);
 	border-right: 2px solid var(--KompasnOranje);
 	border-bottom: 2px solid var(--KompasnOranje);
 	*/
 	white-space: nowrap;
}


.SelOptions {
	color: black;
   margin-bottom: 130px;
	font-size: larger;
	font-weight: bold;
   background-color: inherit;
}

.AskAdviesLabel {
	/*background-color: #ffffff;*/
   background-color: inherit;
   /*background-color: #888888;*/
	font-weight:bold;
	color:#000000;
}

.AskAdviesInput {
	font-size: 15px;
	background-color: #ffffff;
 	border: 2px solid var(--KompasnOranje);
	border-radius: 12px;
	&:active, &:focus {
	 	/*border: 2px solid var(--KompasnOranje);*/
	 	outline: none;
	}
}

.AskAdviesInputGz {
	background-color: var(--KompasnOranje);
 	border: 2px solid #ffffff;
 	width: 350px;
 	height: 22px;
	font-size:14px;
	border-radius: 12px;
	white-space: nowrap;
	&:active, &:focus {
	 	/*border: 2px solid var(--KompasnOranje);*/
	 	outline: none;
	}
}

.AskAdviesGzSpan {
	display: inline-block;
	background-color: var(--GlblZoekInput);
	border-radius: 12px;
}

.AskAdviesInputGzn {
	background-color: transparent;
 	border: 0px;
	margin-left:10px; 	
 	width: 200px;
 	height: 22px;
	font-size:14px;
	border-radius: 12px;
	&:active, &:focus {
	 	/*border: 2px solid var(--KompasnOranje);*/
	 	outline: none;
	}
}
.AskAdviesGzBtnStyle {
	margin:0px;
	margin-top:2px;
 	width:20px;
}
.AskAdviesGzBtnStyle:hover {
 	cursor:pointer;
}

.AskAdviesButtonGzn {
	background-color: transparent;
 	border: 0px;
 	height: 22px;
	font-size:14px;
	border-radius: 12px;
	float: right;
	&:active, &:focus {
	 	/*border: 2px solid var(--KompasnOranje);*/
	 	outline: none;
	}
}

/* Submit buttons met 'vinger' icon */
input[type="button"] {
	cursor: pointer;
}
input[type="submit"] {
	cursor: pointer;
}
/* Radio-Button met 'vinger' icon */
.AskAdviesButton input {
	cursor: pointer;
}
.AskAdviesButton {
	background-color: var(--KompasDoGroen);
	font-weight:normal;
	color:white;
	height:22px;
	font-size:13px;
	margin-top:3px;
	margin-left:5px;
	padding-top:0px;
	/*vertical-align:bottom;*/
	border-radius: 8px;
 	border: 2px solid var(--KompasnOranje);
 	/*
 	border-top: 2px solid var(--KompasnOranje);
 	border-left: 2px solid var(--KompasnOranje);
 	border-right: 2px solid var(--KompasnOranje);
 	border-bottom: 2px solid var(--KompasnOranje);
 	*/
 	white-space: nowrap;
}

.AskAdviesButtonHd {
	/*background-color: var(--KompasDoGroen);*/
	font-weight: bold;
	/*color:white;*/
	color: var(--Kompas00Blauw);
	height:30px;
	font-size:16px;
	margin-top:3px;
	margin-left:5px;
	padding-top:0px;
	/*vertical-align: bottom;*/
	border-radius: 8px;
 	border: 2px solid #ffffff;
 	line-height:100%;
 	/*
 	border-top: 2px solid var(--KompasnOranje);
 	border-left: 2px solid var(--KompasnOranje);
 	border-right: 2px solid var(--KompasnOranje);
 	border-bottom: 2px solid var(--KompasnOranje);
 	*/
 	white-space: nowrap;
}

.AskAdviesButtonHdMa {
	/*background-color: var(--KompasnOranje);*/
	font-weight: bold;
	/*color:white;*/
	color: var(--KompasnOranje);
	height:30px;
	font-size:16px;
	margin-top:3px;
	margin-left:5px;
	padding-top:0px;
	/*vertical-align:bottom;*/
	border-radius: 8px;
 	border: 2px solid #ffffff;
 	line-height:100%;
 	/*
 	border-top: 2px solid var(--KompasnOranje);
 	border-left: 2px solid var(--KompasnOranje);
 	border-right: 2px solid var(--KompasnOranje);
 	border-bottom: 2px solid var(--KompasnOranje);
 	*/
 	white-space: nowrap;
}

.PlusFloatRight {
	position: relative;
	top: -20px;
}
@media (min-width: 820px) {
	.PlusFloatRight {
		top: unset;
		position: relative;
		float: right;
	}
}
.PlusFloatRight:hover {
	font-style: italic; 
	/* color: var(--KompasDoBlauw); */
}

.FloatPageSelected {
	/*text-decoration:underline;*/
	/*-webkit-text-decoration-color: var(--KompasnOranje);*/ /* safari still uses vendor prefix */
	/*text-decoration-color: var(--KompasnOranje);*/
  	border-bottom: 2px solid var(--KompasnOranje);
  	border-radius: 0px;
 }

.AskAdviesButtonSel {
	background-color: var(--KompasDoGroen);
	font-weight:normal;
	color:white;
	height:18px;
	font-size:13px;
	margin-top:3px;
	margin-left:5px;
	padding-top:2px;
	padding-left:5px;
	padding-right:2px;
	/*vertical-align:bottom;*/
	border-radius: 8px;
 	border: 2px solid var(--KompasnOranje);
 	/*
 	border-top: 2px solid var(--KompasnOranje);
 	border-left: 2px solid var(--KompasnOranje);
 	border-right: 2px solid var(--KompasnOranje);
 	border-bottom: 2px solid var(--KompasnOranje);
 	*/
 	white-space: nowrap;
}
.AddedButtonToRemove {
	font-weight: Bold;
	vertical-align: text-top;
	border-radius: 8px; /* Maak een cirkel */
	font-size:9px; 
	margin: -1px 2px 0px 5px;  /* T  R  B  L positie van de 'cirkel' in contrainer */
	padding: 0px; /* geen ruimte om de letter heen */
	width: 15px; /* breedte van de 'cirkel' */
	height: 15px; /* hoogte van de 'cirkel' */
 	border: 2px solid var(--KompasnOranje); /* dikte rand cirkel om de letter heen */
	background-color: #ffffff;
	/*background-color: var(--KompasnOranje);*/
}

.PlusBgImg {
	/*background-image: url("KompasIcoonLight.png");*/
	/*background-image: url("./img/logoLight.png");*/
	background-image: url("./img/logoLighter1.png");
	/*background-image: url("./img/logoLighter2.png");*/
	background-repeat: repeat;
	background-size: 100%; /* was 30% */
	/*
	background-size: 200px;
	background-size: cover;
 	filter: blur(8px);
	-webkit-filter: blur(8px);
	*/
}

.AskAdviesTabel {
	margin-top: 10px;
	border: 1px solid;
	border-collapse: collapse;
	background-color: transparent;
}

.AskAdviesTabel TR {
	background-color: transparent;
}

.AskAdviesTabel TBody {
	background-color: transparent;
}

.AskAdviesTabel TH {
	border: 1px solid var(--KompasDoBlauw);
	border-bottom: 2px solid var(--KompasDoBlauw);
	background-color: transparent;
	font-weight:bold;
	color: #000000;
	font-size:14px;
}

.AskAdviesTabel TD {
	border: 1px solid var(--KompasDoBlauw);
	background-color: transparent;
	color:#000000;
	font-size:13px;
	vertical-align:baseline;
	padding: 10px;
}

.AskAdviesTabel TD UL {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	background-color: transparent;
}

.AskAdviesTabel TD UL LI {
	background-color: transparent;
	font-size:13px;
}
 
tbody td:nth-child(1) {
	font-weight:bold;
	color: var(--KompasnOranje);
}
tbody td:nth-child(2) {
	font-weight:bold;
	color: var(--KompasnOranje);
}

.TextColorDefault {
	color: black !important;
	font-size: 15px  !important;
	font-weight: normal !important;
}
sup {
	font-size: smaller;
}

.AskAdviesTabelFp { /* AskAdviesTabel MET Image (zoals op FrontPage) */
	margin-top: 0px;
	border: 0px;
 	padding:20px;
	border-collapse: collapse;
	background-color: transparent;
	border-bottom-right-radius: 70% 30%;
	display: inline; 
}
.AskAdviesTabelFp img {
	max-width:80%;
	max-height:auto;
}
@media (min-width: 820px) {
	.AskAdviesTabelFp {
		display: table-cell;
	}
	.AskAdviesTabelFp img {
 		max-width: 125%;
		max-height:auto;
 	}
	.PlusBgImgFp {
		display: block;
	}
}

.AskAdviesTabelNoImage { /* AskAdviesTabel ZONDER zonder Image) */
	margin-top: 0px;
	border: 0px;
 	padding:20px;
	border-collapse: collapse;
	background-color: transparent;
	border-bottom-right-radius: 70% 30%;
}

.AskAdviesTabelFpOt { /* OverOns Top */
	border: 0px;
 	padding-top: 0px;
	border-collapse: collapse;
	background-color: transparent;
	border-bottom-right-radius: 70% 30%;
 	margin-bottom: 10px;
}
.SoftColorFpOt {
	color: var(--KompasnOranje); 
	background-color: transparent;
}

.AskAdviesTabelFpB { /* FrontPage Bottom */
	border: 0px;
 	padding-top: 0px;
	border-collapse: collapse;
	background-color: transparent;
	border-top-right-radius: 70% 30%;
 	margin-bottom: 10px;
}

.PlusBgImgFp { /* FrontPage */
	background-image: url("./img/bg-banner-beige-homepage-crop1.png");
	background-repeat: no-repeat;
	background-size: 200%; /* was 30% */	
}

.HeaderImgSetting1 {
	min-width: 200px; 
	max-width: 125%; 
	height: auto; 
	border-radius: 25% 0% 25% 0%;
}
.HeaderImgWidth1 {
	width:25%;
}

.OverOnsOval {
  width: 70%;
  margin: 0 auto;
  background: var(--KompasnOranje); 
  border-radius: 30px;
  z-index: 3;
}
.TextInOnsOval {
	padding:40px; 
	text-align:center;
	background-color:transparent; 
	font-size:larger;
	color:white
}
.OverOnsImgPersonal {
  width: 550px;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
}

.AskAdviesTabelFp TR {
	vertical-align:top;
	background-color: transparent;
}
.AskAdviesTabelFp TBody {
	background-color: transparent;
}

.KopregelFp {
	font-size:40px; 
	color: var(--KompasnOranje); 
	background-color: transparent; 
	display: table; 
	margin: 0 auto;  
}

.KopregelFpo {
	margin-top: 15px; 
	color: var(--Kompas00Blauw); 
}
.KopregelBlue {
	color: var(--Kompas00Blauw); 
}

.nowrap {
	white-space:nowrap;
}

/*
tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}
*/

td[name="BwsTdClickerOne"] { /* groen */
	cursor: pointer;
	background-color: var(--BewijsGroen);
}
td[name="BwsTdClickerTwo"] { /* oranje */
	cursor: pointer;
	background-color: var(--BewijsOrnge);
}
td[name="BwsTdClickerTre"] { /* rood1 */
	cursor: pointer;
	background-color: var(--BewijsRood1);
}
td[name="BwsTdClickerFor"] { /* rood2 */
	cursor: pointer;
	background-color: var(--BewijsRood2);
}

.BwsTdClickerOne { /* OptionCLass groen */
	background-color: var(--BewijsGroen);
}
.BwsTdClickerTwo { /* OptionCLass oranje */
	background-color: var(--BewijsOrnge);
}
.BwsTdClickerTre { /* OptionCLass rood1 */
	background-color: var(--BewijsRood1);
}
.BwsTdClickerFor { /* OptionCLass rood2 */
	background-color: var(--BewijsRood2);
}

.Footer { 
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: var(--KompasDoGroen);
	color: #ffffff;
	margin-right: 8px;
   z-index: 100;	
}
@media (min-width: 820px) {
    /* on screens 820px and wider, make Website beautyfull */
	.Footer { 
		padding-top: 8px;
		padding-bottom: 8px;
		background-color: var(--KompasDoGroen);
		margin-top: -50px; /* Margin + Height: voorkom dat de */
		height: 58px;      /* de tekst ACHTE de Footer lang loopt */
		color: #ffffff;
		margin-right: 8px;
		/* Position+bottom = float to bottom(sticky) */
		position: fixed;
		bottom: 0;
	}
}

.Disclaimer {
	width: auto;
	display: table-cell;
	background-color: var(--KompasDoGroen);
	font-size:12px;
	padding-left:10px;
}

.MyLinks { /* Footer-achtergrondkleuren+instellingen voor rechter link blok. */
	Padding-left: 30px;
	width: 200px;
	display: table-cell;
	background-color: var(--KompasDoGroen);
	font-size:14px;
}

a {
	color: #ffffff;
	background-color: transparent;
}

.NormLink {
	color: #000000;
	background-color: transparent;
}
.NormLinkBold {
	color: #000000;
	background-color: transparent;
	font-weight: bold;
}
.NormLinkLight {
	color: var(--KompasnOranje);
	background-color: transparent;
}
.LinkFooter {
	color: #ffffff;
	background-color:var(--KompasDoGroen);
}

.AbboDt {
	font-weight:bold;
}

.RowElement {
	/*padding: 20px;*/
}
.RowElementOffset {
	margin-left: 20px;
	margin-right: 20px;
}
.NormColumn {
	padding: 20px;
	margin-right:20px;
	margin-top:10px;	
}
.NormColumnOo {
	background-color:transparent; 
	width:auto;
}
.NormColumnOverflow {
	overflow: hidden; 
	background-color:transparent;
}
@media (min-width: 820px) {
	.NormColumnOo {
		width:50%;
		background-color:transparent; 
	}
}
.NormColumnFpField1 {
	float: left; 
	width:33px; 
	margin-right: 20px;
}
.NormColumnFpFieldC {
	float: left; 
	width:63px; 
	margin-right: 20px;
}
.RightColumn {
	padding: 30px;
	margin-left:20px;
	margin-right:20px;
	margin-bottom: 20px;	
	border-radius: 20px;
	width: 33% auto;
 	border: 12px solid var(--Kompas00Blauw);
}
.LeftColumn {
	margin-right:20px;
}
.CntColumnFp { /* Center-FrontPage */
	padding: 30px;
	margin-left:20px;
	margin-right:20px;
	margin-bottom: 20px;	
	border-radius: 20px;
 	border: 12px solid var(--Kompas00Blauw);
}
@media (min-width: 820px) {
    /* on screens 820px and wider, make Website beautyfull */
    .RowElement {
        display: flex;
    }
    /* and make the .col elements grow to consume the row width */
    .NormColumn {
		flex-grow: 1;
		width:50%;
	    /* style="flex: 50%;"*/
    }
    .LeftColumn {
        flex-grow: 1;
	    /* style="flex: 50%;"*/
    }
    .RightColumn {
		  flex-grow: 1;
		  width: 33%;
	    /* style="flex: 50%;"*/
    }
    .CntColumnFp { /* Center-FrontPage */
		  flex-grow: 1;
		  width: 33%;
	    /* style="flex: 50%;"*/
    }
	.LftColFp { /* Left-FrontPage */
		margin-left:0px;
		width: 33% auto;
	}
	.RhtColFp { /* Righ-FrontPage */
		margin-right:0px;
		width: 33% auto;
}

}

textarea {
	height: 4em;
	width: 50em;
	border-radius: 12px;
	background-color: #ffffff;
 	border: 2px solid var(--KompasnOranje);
	&:active, &:focus {
	 	/*border: 2px solid var(--KompasnOranje);*/
	 	outline: none;
	}
}
.EAI {
	border-radius: 12px;
	width: 50em;
	background-color: #ffffff;
 	border: 2px solid var(--KompasnOranje);
	&:active, &:focus {
	 	/*border: 2px solid var(--KompasnOranje);*/
	 	outline: none;
	}
}
.EAIS {
	border-radius: 12px;
	background-color: #ffffff;
 	border: 2px solid var(--KompasnOranje);
	&:active, &:focus {
	 	/*border: 2px solid var(--KompasnOranje);*/
	 	outline: none;
	}
}
.EAISP { /* voor FullText span element */
	color:black;
	font-size:smaller;
	&:active, &:focus {
	 	/*border: 2px solid var(--KompasnOranje);*/
	 	outline: none;
	}
}
.EditSubmitBttn {
	width: 20em;
	background-color: lightgray;
}

.EditLegal {
	width:100%;
	height:20em;
}

li.img1, li.img2, li.img3, li.img4 {
    display: flex;
    align-items: center;
    margin: 10px 0;

    line-height: 30px;

    list-style: none;
    list-style-type: none;
}

li.Img1:before, li.Img2:before, li.Img3:before, li.Img4:before {
    display: block;
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    margin-right: 10px;

    vertical-align: middle;
    background-size: contain;

    content: '';
}

li.Img1:before {
    background: url('./img/fp-Img-lb.png') no-repeat left center;
}
li.Img2:before {
    background: url('./img/fp-Img-rb.png') no-repeat left center;
}
li.Img3:before {
    background: url('./img/fp-Img-lo.png') no-repeat left center;
}
li.Img4:before {
    background: url('./img/fp-Img-ro.png') no-repeat left center;
}

.GradientDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 200px;
  /*margin: 0 auto;*/
  /*min-height: 100vh;*/
  background-color: transparent;
}
.GradientBtn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 15px;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  font-weight: bold;
  /*text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  /*box-shadow: 0 0 20px #eee;*/
  border-radius: 30px;
  /*background-image: linear-gradient(-20deg, var(--GradBtnYellow) 0%, var(--KompasnOranje) 50%, var(--GradBtnYellow) 100%);*/
  background-image: linear-gradient(-20deg, var(--GradBtnYellow) 0%, var(--KompasnOranje) 0%, var(--GradBtnYellow) 100%);
  box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.3);
 }
.GradientBtn:hover {
  background-position: right center; /* change the direction of the change here */
  cursor: pointer;
}
.GradientBtnMA {
  flex: 1 1 auto;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  margin-top: 10px;
  /*text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  /*box-shadow: 0 0 20px #eee;*/
  border-radius: 30px;
  /*background-image: linear-gradient(-20deg, var(--GradBtnYellow) 0%, var(--KompasnOranje) 50%, var(--GradBtnYellow) 100%);*/
  background-image: linear-gradient(-20deg, var(--GradBtnYellow) 0%, var(--KompasnOranje) 0%, var(--GradBtnYellow) 100%);
  box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.3);
 }
.GradientBtnMA:hover {
  background-position: right center; /* change the direction of the change here */
  cursor: pointer;
}