/* made by frederickschnellenberg.nl 2020*/
:root {

	/* --fs-main: #0B8B02; */
	--fs-main: #ab66d6;
	--fs-main-hover: #410465;
	--fs-secondary: #D67236; /*oranje*/
	--fs-secondary-hover: #81604B;
	
	--fs-teksten: #fff;  /*wit*/
	--fs-bg: #000; /*zwart*/
	
	--fs-bg-1: ;
	--fs-bg-2: ;
	--fs-bg-3: #f1f1f1;
	--fs-bg-wit: #ffffff;
	--fs-bg-zwart: #000;

	/*	Alert Messages kleuren*/
	--dangerous-am-bg: #f2dede;		/*rood*/
	--dangerous-am-tekst: #a94442;	/*rood*/
	--success-am-bg: #dff0d8;		/*groen*/
	--success-am-tekst: #3c763d;	/*groen*/
	--info-am-bg: #d9edf7;			/*blauw*/
	--info-am-tekst: #31708f;		/*blauw*/
	--warning-am-bg: #fcf8e3;		/*geel*/
	--warning-am-tekst: #8a6d3b;	/*geel*/
	
	
	--transparant-100: rgba(0, 0, 0, 0.0);
	--transparant-90: rgba(0, 0, 0, 0.9);
	--transparant-80: rgba(0, 0, 0, 0.8);
	--transparant-70: rgba(0, 0, 0, 0.7);
	--transparant-60: rgba(0, 0, 0, 0.6);
	--transparant-50: rgba(0, 0, 0, 0.5);
	--transparant-40: rgba(0, 0, 0, 0.4);
	--transparant-30: rgba(0, 0, 0, 0.3);
	--transparant-20: rgba(0, 0, 0, 0.2);
	--transparant-10: rgba(0, 0, 0, 0.1);
	
	/*	kleuren*/
	--amber: #ffc107;
	--aqua: #00ffff;
	--blue: #2196F3;
	--light-blue: #87CEEB;
	--brown: #795548;
	--cyan: #00bcd4;
	--blue-grey: #607d8b;
	--green: #4CAF50;
	--light-green: #8bc34a;
	--indigo: #3f51b5;
	--khaki: #b4aa50;
	--border-khaki: #f0e68c;
	--lime: #cddc39;
	--orange: #ff9800;
	--deep-orange: #ff5722;
	--pink: #e91e63;
	--purple: #9c27b0;
	--deep-purple: #673ab7;
	--red: #f44336;
	--sand: #fdf5e6;
	--teal: #009688;
	--yellow: #d2be0e;
	--white: #fff;
	--black: #000;
	--grey: #757575;
	--grey-hover: #9e9e9e;
	--yellow-hover: #ffeb3b;
	--dark-grey: #3a3a3a;
	--pale-red: #ffe7e7;
	--pale-blue: #e7ffff;
	--pale-yellow: #ffffcc;
	--pale-green: #e7ffe7;
	--dark-gray: #616161;
	--light-gray: #f1f1f1;
}
/*var(--)*/


/* Colors */
.fs-amber,
.fs-hover-amber:hover {
	color: var(--black) !important;
	background-color: var(--amber) !important
}

.fs-aqua,
.fs-hover-aqua:hover {
	color: var(--black) !important;
	background-color: var(--aqua) !important
}

.fs-blue,
.fs-hover-blue:hover {
	color: var(--white) !important;
	background-color: var(--blue) !important
}

.fs-light-blue,
.fs-hover-light-blue:hover {
	color: var(--black) !important;
	background-color: var(--light-blue) !important
}

.fs-brown,
.fs-hover-brown:hover {
	color: var(--white) !important;
	background-color: var(--brown) !important
}

.fs-cyan,
.fs-hover-cyan:hover {
	color: var(--black) !important;
	background-color: var(--cyan) !important
}

.fs-blue-grey,
.fs-hover-blue-grey:hover,
.fs-blue-gray,
.fs-hover-blue-gray:hover {
	color: var(--white) !important;
	background-color: var(--blue-grey) !important
}

.fs-green,
.fs-hover-green:hover {
	color: var(--white) !important;
	background-color: var(--green) !important
}

.fs-light-green,
.fs-hover-light-green:hover {
	color: var(--black) !important;
	background-color: var(--light-green) !important
}

.fs-indigo,
.fs-hover-indigo:hover {
	color: var(--white) !important;
	background-color: var(--indigo) !important
}

.fs-khaki,
.fs-hover-khaki:hover {
	color: var(--black) !important;
	background-color: var(--border-khaki) !important
}

.fs-lime,
.fs-hover-lime:hover {
	color: var(--black) !important;
	background-color: var(--lime) !important
}

.fs-orange,
.fs-hover-orange:hover {
	color: var(--black) !important;
	background-color: var(--orange) !important
}

.fs-deep-orange,
.fs-hover-deep-orange:hover {
	color: var(--white) !important;
	background-color: var(--deep-orange) !important
}

.fs-pink,
.fs-hover-pink:hover {
	color: var(--white) !important;
	background-color: var(--pink) !important
}

.fs-purple,
.fs-hover-purple:hover {
	color: var(--white) !important;
	background-color: var(--purple) !important
}

.fs-deep-purple,
.fs-hover-deep-purple:hover {
	color: var(--white) !important;
	background-color: var(--deep-purple) !important
}

.fs-red,
.fs-hover-red:hover {
	color: var(--white) !important;
	background-color: var(--red) !important
}

.fs-sand,
.fs-hover-sand:hover {
	color: var(--black) !important;
	background-color: var(--sand) !important
}

.fs-teal,
.fs-hover-teal:hover {
	color: var(--white) !important;
	background-color: var(--teal) !important
}

.fs-yellow,
.fs-hover-yellow:hover {
	color: var(--black) !important;
	background-color: var(--yellow-hover) !important
}

.fs-white,
.fs-hover-white:hover {
	color: var(--black) !important;
	background-color: var(--white) !important
}

.fs-black,
.fs-hover-black:hover {
	color: var(--white) !important;
	background-color: var(--black) !important
}

.fs-grey,
.fs-hover-grey:hover,
.fs-gray,
.fs-hover-gray:hover {
	color: var(--black) !important;
	background-color: #9e9e9e !important
}

.fs-light-grey,
.fs-hover-light-grey:hover,
.fs-light-gray,
.fs-hover-light-gray:hover {
	color: var(--black) !important;
	background-color: #f1f1f1 !important
}

.fs-dark-grey,
.fs-hover-dark-grey:hover,
.fs-dark-gray,
.fs-hover-dark-gray:hover {
	color: var(--white) !important;
	background-color: #616161 !important
}

.fs-pale-red,
.fs-hover-pale-red:hover {
	color: var(--black) !important;
	background-color: #ffdddd !important
}

.fs-pale-green,
.fs-hover-pale-green:hover {
	color: var(--black) !important;
	background-color: #ddffdd !important
}

.fs-pale-yellow,
.fs-hover-pale-yellow:hover {
	color: var(--black) !important;
	background-color: #ffffcc !important
}

.fs-pale-blue,
.fs-hover-pale-blue:hover {
	color: var(--black) !important;
	background-color: #ddffff !important
}

/*-------------text-------------*/
.fs-text-amber,
.fs-hover-text-amber:hover {
	color: var(--amber) !important
}

.fs-text-aqua,
.fs-hover-text-aqua:hover {
	color: var(--aqua) !important
}

.fs-text-blue,
.fs-hover-text-blue:hover {
	color: var(--blue) !important
}

.fs-text-light-blue,
.fs-hover-text-light-blue:hover {
	color: var(--light-blue) !important
}

.fs-text-brown,
.fs-hover-text-brown:hover {
	color: var(--brown) !important
}

.fs-text-cyan,
.fs-hover-text-cyan:hover {
	color: var(--cyan) !important
}

.fs-text-blue-grey,
.fs-hover-text-blue-grey:hover,
.fs-text-blue-gray,
.fs-hover-text-blue-gray:hover {
	color: var(--blue-grey) !important
}

.fs-text-green,
.fs-hover-text-green:hover {
	color: var(--green) !important
}

.fs-text-light-green,
.fs-hover-text-light-green:hover {
	color: var(--light-green) !important
}

.fs-text-indigo,
.fs-hover-text-indigo:hover {
	color: var(--indigo) !important
}

.fs-text-khaki,
.fs-hover-text-khaki:hover {
	color: var(--khaki) !important
}

.fs-text-lime,
.fs-hover-text-lime:hover {
	color: var(--lime) !important
}

.fs-text-orange,
.fs-hover-text-orange:hover {
	color: var(--orange) !important
}

.fs-text-deep-orange,
.fs-hover-text-deep-orange:hover {
	color: var(--deep-orange) !important
}

.fs-text-pink,
.fs-hover-text-pink:hover {
	color: var(--pink) !important
}

.fs-text-purple,
.fs-hover-text-purple:hover {
	color: var(--purple) !important
}

.fs-text-deep-purple,
.fs-hover-text-deep-purple:hover {
	color: var(--deep-purple) !important
}

.fs-text-red,
.fs-hover-text-red:hover {
	color: var(--red) !important
}

.fs-text-sand,
.fs-hover-text-sand:hover {
	color: var(--sand) !important
}

.fs-text-teal,
.fs-hover-text-teal:hover {
	color: var(--teal) !important
}

.fs-text-yellow,
.fs-hover-text-yellow:hover {
	color: var(--yellow) !important
}

.fs-text-white,
.fs-hover-text-white:hover {
	color: var(--white) !important
}

.fs-text-black,
.fs-hover-text-black:hover {
	color: var(--black) !important
}

.fs-text-grey,
.fs-hover-text-grey:hover,
.fs-text-gray,
.fs-hover-text-gray:hover {
	color: var(--grey) !important
}

.fs-text-light-grey,
.fs-hover-text-light-grey:hover,
.fs-text-light-gray,
.fs-hover-text-light-gray:hover {
	color: var(--light-gray) !important
}

.fs-text-dark-grey,
.fs-hover-text-dark-grey:hover,
.fs-text-dark-gray,
.fs-hover-text-dark-gray:hover {
	color: var(--dark-grey) !important
}

/*-------------border-------------*/
.fs-border-amber,
.fs-hover-border-amber:hover {
	border-color: var(--amber) !important
}

.fs-border-aqua,
.fs-hover-border-aqua:hover {
	border-color: var(--aqua) !important
}

.fs-border-blue,
.fs-hover-border-blue:hover {
	border-color: var(--blue) !important
}

.fs-border-light-blue,
.fs-hover-border-light-blue:hover {
	border-color: var(--light-blue) !important
}

.fs-border-brown,
.fs-hover-border-brown:hover {
	border-color: var(--brown) !important
}

.fs-border-cyan,
.fs-hover-border-cyan:hover {
	border-color: var(--cyan) !important
}

.fs-border-blue-grey,
.fs-hover-border-blue-grey:hover,
.fs-border-blue-gray,
.fs-hover-border-blue-gray:hover {
	border-color: var(--blue-grey) !important
}

.fs-border-green,
.fs-hover-border-green:hover {
	border-color: var(--green) !important
}

.fs-border-light-green,
.fs-hover-border-light-green:hover {
	border-color: var(--light-green) !important
}

.fs-border-indigo,
.fs-hover-border-indigo:hover {
	border-color: var(--indigo) !important
}

.fs-border-khaki,
.fs-hover-border-khaki:hover {
	border-color: var(--border-khaki) !important
}

.fs-border-lime,
.fs-hover-border-lime:hover {
	border-color: var(--lime) !important
}

.fs-border-orange,
.fs-hover-border-orange:hover {
	border-color: var(--orange) !important
}

.fs-border-deep-orange,
.fs-hover-border-deep-orange:hover {
	border-color: var(--deep-orange) !important
}

.fs-border-pink,
.fs-hover-border-pink:hover {
	border-color: var(--purple) !important
}

.fs-border-purple,
.fs-hover-border-purple:hover {
	border-color: var(--purple) !important
}

.fs-border-deep-purple,
.fs-hover-border-deep-purple:hover {
	border-color: var(--deep-purple) !important
}

.fs-border-red,
.fs-hover-border-red:hover {
	border-color: var(--red) !important
}

.fs-border-sand,
.fs-hover-border-sand:hover {
	border-color: var(--sand) !important
}

.fs-border-teal,
.fs-hover-border-teal:hover {
	border-color: var(--teal) !important
}

.fs-border-yellow,
.fs-hover-border-yellow:hover {
	border-color: var(--yellow-hover) !important
}

.fs-border-white,
.fs-hover-border-white:hover {
	border-color: var(--white) !important
}

.fs-border-black,
.fs-hover-border-black:hover {
	border-color: var(--black) !important
}

.fs-border-grey,
.fs-hover-border-grey:hover,
.fs-border-gray,
.fs-hover-border-gray:hover {
	border-color: var(--grey-hover) !important
}

.fs-border-light-grey,
.fs-hover-border-light-grey:hover,
.fs-border-light-gray,
.fs-hover-border-light-gray:hover {
	border-color: var(--light-grey) !important
}

.fs-border-dark-grey,
.fs-hover-border-dark-grey:hover,
.fs-border-dark-gray,
.fs-hover-border-dark-gray:hover {
	border-color: var(--dark-gray) !important
}

.fs-border-pale-red,
.fs-hover-border-pale-red:hover {
	border-color: var(--pale-red) !important
}

.fs-border-pale-green,
.fs-hover-border-pale-green:hover {
	border-color: var(--pale-green) !important
}

.fs-border-pale-yellow,
.fs-hover-border-pale-yellow:hover {
	border-color: var(--pale-yellow) !important
}

.fs-border-pale-blue,
.fs-hover-border-pale-blue:hover {
	border-color: var(--pale-blue) !important
}