/* 
Met deze instellingen kan je per website de kleuren, lettertypes en/of lettergrootte aanpassen.
ALLE onderdelen van de volledige site zullen worden ongebracht op deze pagina, verdeeld in verschillende
onderdelen van de pagina. Zoals de KOP, de FOOTER, Horizontale menu balk, de Pulldown menu etc. Eventueel
wordt hiervan zoveel mogelijk toelichting gegeven.

Daarnaast zal er een range van kleuren een naam krijgen. En zal deze gescheiden worden naar de rood, groen, blauw, zwart/wit omgeving



*/

:root {
  --colorBG_A: #1f65b5;		/* Donkerblauw */
  --colorFG_A: #fafafa;
  --colorBG_B: #5194E1;		/* Lichtblauw */ 
  --colorFG_B: #fafafa;
  --colorBG_C: #CCE0F8;
  --colorFG_C: #222222;
  --colorBG_D: #7C7C7C;
  --colorFG_D: #000000;
  --colorBG_E: #7C7C7C;
  --colorFG_E: #FFFFFF;
  
  /* Button kleuren */
  --colorBGButton: #F0F0F0;
  --colorFGButton: #FFFFFF;
  
  --colorBGFormulier: #f3f3f3; 
  --colorFGFormulier: #ffffff;
  
  /* Bedrijfslogo */
  --colorBGLogo :#1f65b5;
  --colorFGLogo :#FFFFFF;

}

  
/* **************************************** */

/* Footer tekst en achtergrond   */
.footer {
	background-color: var(--colorBG_A);
	color: #E7E7E7;
}

.footer_kop {
	color: #FFFFFF;
}

.copyright {
	background-color: var(--colorBG_A);
	color: var(--colorFG_A);
}

/* **************************************** */

/* Titels van een pagina */
h1, .titel {
	background-color: var(--colorBG_A);
	color: var(--colorFG_A);
}

h2, .subtitel {
	background-color: var(--colorBG_B);
	color: var(--colorFG_B);
		margin-top: 8px;
	margin-bottom: 4px;
}

/* **************************************** */
/* ACCOUNT INFORMATIE			 			*/
/* **************************************** */

.aanmeldformulier, .inlogveld {
	background-color: var(--colorBGFormulier);
	padding: 20px;
}

/* **************************************** */
/* PRIJSLIJSTEN			 			 		*/
/* **************************************** */

.hoofdgroep {
	background-color: var(--colorBG_B);
	color: var(--colorFG_B);
}

/* **************************************** */
/* LOGO					 			 		*/
/* **************************************** */

.bedrijfslogo {
	background-color: var(--colorBGLogo);
	/* background-image: linear-gradient(45deg, #0000FF 20%, #4A4A4A 90%, #0000FF 100%);  */
	color: var(--colorFGLogo);
}

.klantinformatie {
	color: var(--colorFGLogo);
}

/* **************************************** */
/* HORIZONTALE menu		 			 		*/
/* **************************************** */

/* Achtergrondbalk menu balk */
nav {
	/* background-image: linear-gradient(80deg, #0088FF 4%, blue 70%, #00A8FF 100%);  */
	background: #10457A;
    color: #fafafa;
}

/* Achtergrond kleur voor de hoofditems */
nav > div {
	background-color: transparent;
}

/* Achtergrond kleur van een rubriek, dit geld NIET voor de geselecteerde hoofdrubriek */
nav > div > div {
    background-color: var(--colorBG_B);
	color: var(--colorFG_B);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Stijl voor de submenu-item */
nav > div > div > div {
    border-bottom: 1px solid white;
}

/* Kleur van de geselecteerde menu item */
nav > div > div > div:hover, nav a:hover {
    background: linear-gradient(
										  to right,
										  #094F9A 3%,
										  #2222FF 50%,
										  #094F9A 97%
										);	
	color: white;
}

nav a {
    background-color: inherit;
    color: white;
}

/* Stijlen voor de normale toestand van de links in de nav */
nav div a {
    color: inherit; /* Behoudt de standaardtekstkleur van de parent (div) */
}

/* Stijlen voor de div-elementen bij hover */
nav > div:hover {
    background-color: blue; /* Achtergrondkleur voor hover-toestand */
}

div a {
    color: white;
}