/*
Style Colors
Version: 2.1
Theme_URI: https://www.lemon.nl
Date: 05/2025
Author: Roeland ten Holder | Lemon
Author URI: roeland@lemon.nl
*/

/** ******************************** **/
/**      _____                       **/
/**    _(  _  )__________________    **/
/**   ( | (___)     | ____ |  _  |   **/
/**   |_|_______|_|_|______|_| |_|   **/
/**                                  **/
/**            www.lemon.nl          **/
/**                                  **/
/** ******************************** **/

/*************** COLORS ***************/

:root {
	--blue: 				#053093;
	--lightblue: 			#6fc7f5;
	--darkblue: 			#031f5f;
	--green: 				#00bea0;
	--blue-hover: 			#052775;
	--lightblue-hover: 		#45b3ed;
	--darkblue-hover: 		#011239;
	--green-hover: 			#00d37f;
	--white: 				#ffffff;
	--lightgrey: 			#c8c8c8;
	--grey: 				#787878;
	--darkgrey: 			#4a4a4a;
	--black: 				#000716;
	--lightblue10:			#f6f8fb;
	--lightblue20:			#ecf4fa;
	--lightblue30:			#e1ecf5;
	--submenu: 				#f6f8fb;


	--bs-btn-hover-color:	#ffffff;
    --bs-btn-hover-bg: 		#052775;
    --bs-btn-hover-border-color: #052775;
}

.bg-gradient-1 			{ background-image: linear-gradient(115deg, var(--blue) 20%, var(--lightblue) 50%, var(--green) 80%); }
.bg-gradient-2 			{ background-color: var(--blue); background-image: linear-gradient(115deg, var(--blue) 10%, var(--lightblue) 45%, var(--green) 75%); transition: all 0.2s ease-in; background-size: calc(100% + 0px); }
.bg-gradient-2:hover 	{ background-size: calc(100% + 1100px);  transition: all 0.2s ease-in; }


.bg-gradient-xx 		{ background-image: linear-gradient(115deg, #1a4aa3 20%, #7bc1ec 50%, #13bfab 80%); }




.blue { color: var(--blue); }
.lightblue { color: var(--lightblue); }
.darkblue { color: var(--darkblue); }
.green { color: var(--green); }
.blue-hover { color: var(--blue-hover); }
.lightblue-hover { color: var(--lightblue-hover); }
.darkblue-hover { color: var(--darkblue-hover); }
.green-hover { color: var(--green-hover); }
.white { color: var(--white); }
.lightgrey { color: var(--lightgrey); }
.grey { color: var(--grey); }
.darkgrey { color: var(--darkgrey); }
.black { color: var(--black); }
.lightblue10 { color: var(--lightblue10); }
.lightblue20 { color: var(--lightblue20); }
.lightblue30 { color: var(--lightblue30); }
.submenu { color: var(--submenu); }


.border-blue { border-color: var(--blue); }
.border-lightblue { border-color: var(--lightblue); }
.border-darkblue { border-color: var(--darkblue); }
.border-green { border-color: var(--green); }
.border-blue-hover { border-color: var(--blue-hover); }
.border-lightblue-hover { border-color: var(--lightblue-hover); }
.border-darkblue-hover { border-color: var(--darkblue-hover); }
.border-green-hover { border-color: var(--green-hover); }
.border-white { border-color: var(--white); }
.border-lightgrey { border-color: var(--lightgrey); }
.border-grey { border-color: var(--grey); }
.border-darkgrey { border-color: var(--darkgrey); }
.border-black { border-color: var(--black); }
.border-lightblue10 { border-color: var(--lightblue10); }
.border-lightblue20 { border-color: var(--lightblue20); }
.border-lightblue30 { border-color: var(--lightblue30); }
.border-submenu { border-color: var(--submenu); }


.card-header .card-header { background-color: unset; }
.border-blue .card-header { background-color: var(--blue); }
.border-lightblue .card-header { background-color: var(--lightblue); }
.border-darkblue .card-header { background-color: var(--darkblue); }
.border-green .card-header { background-color: var(--green); }
.border-blue-hover .card-header { background-color: var(--blue-hover); }
.border-lightblue-hover .card-header { background-color: var(--lightblue-hover); }
.border-darkblue-hover .card-header { background-color: var(--darkblue-hover); }
.border-green-hover .card-header { background-color: var(--green-hover); }
.border-white .card-header { background-color: var(--white); }
.border-lightgrey .card-header { background-color: var(--lightgrey); }
.border-grey .card-header { background-color: var(--grey); }
.border-darkgrey .card-header { background-color: var(--darkgrey); }
.border-black .card-header { background-color: var(--black); }
.border-lightblue10 .card-header { background-color: var(--lightblue10); }
.border-lightblue20 .card-header { background-color: var(--lightblue20); }
.border-lightblue30 .card-header { background-color: var(--lightblue30); }
.border-submenu .card-header { background-color: var(--submenu); }


.bg-blue { background-color: var(--blue); }
.bg-lightblue { background-color: var(--lightblue); }
.bg-darkblue { background-color: var(--darkblue); }
.bg-green { background-color: var(--green); }
.bg-blue-hover { background-color: var(--blue-hover); }
.bg-lightblue-hover { background-color: var(--lightblue-hover); }
.bg-darkblue-hover { background-color: var(--darkblue-hover); }
.bg-green-hover { background-color: var(--green-hover); }
.bg-white { background-color: var(--white); }
.bg-lightgrey { background-color: var(--lightgrey); }
.bg-grey { background-color: var(--grey); }
.bg-darkgrey { background-color: var(--darkgrey); }
.bg-black { background-color: var(--black); }
.bg-lightblue10 { background-color: var(--lightblue10); }
.bg-lightblue20 { background-color: var(--lightblue20); }
.bg-lightblue30 { background-color: var(--lightblue30); }
.bg-submenu { background-color: var(--submenu); }


.btn-blue { background-color: var(--blue); }
.btn-lightblue { background-color: var(--lightblue); }
.btn-darkblue { background-color: var(--darkblue); }
.btn-green { background-color: var(--green); }
.btn-blue-hover { background-color: var(--blue-hover); }
.btn-blue:hover { background-color: var(--blue-hover); }
.btn-lightblue-hover { background-color: var(--lightblue-hover); }
.btn-lightblue:hover { background-color: var(--lightblue-hover); }
.btn-darkblue-hover { background-color: var(--darkblue-hover); }
.btn-darkblue:hover { background-color: var(--darkblue-hover); }
.btn-green-hover { background-color: var(--green-hover); }
.btn-green:hover { background-color: var(--green-hover); }
.btn-white { background-color: var(--white); }
.btn-lightgrey { background-color: var(--lightgrey); }
.btn-grey { background-color: var(--grey); }
.btn-darkgrey { background-color: var(--darkgrey); }
.btn-black { background-color: var(--black); }
.btn-lightblue10 { background-color: var(--lightblue10); }
.btn-lightblue20 { background-color: var(--lightblue20); }
.btn-lightblue30 { background-color: var(--lightblue30); }
.btn-submenu { background-color: var(--submenu); }

.content { color: unset; }

.content a:not(.btn) { color: var(--black); }
.link, .content a:not(.btn):hover { color: var(--black); }

.btn-blue, .bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4, .bg-blue h5, .bg-blue h6, .bg-blue p, .bg-blue td, .bg-blue, .bg-blue a, .bg-blue a:hover,
.btn-lightblue, .bg-lightblue h1, .bg-lightblue h2, .bg-lightblue h3, .bg-lightblue h4, .bg-lightblue h5, .bg-lightblue h6, .bg-lightblue p, .bg-lightblue td, .bg-lightblue, .bg-lightblue a, .bg-lightblue a:hover,
.btn-darkblue, .bg-darkblue h1, .bg-darkblue h2, .bg-darkblue h3, .bg-darkblue h4, .bg-darkblue h5, .bg-darkblue h6, .bg-darkblue p, .bg-darkblue td, .bg-darkblue, .bg-darkblue a, .bg-darkblue a:hover,
.btn-green, .bg-green h1, .bg-green h2, .bg-green h3, .bg-green h4, .bg-green h5, .bg-green h6, .bg-green p, .bg-green td, .bg-green, .bg-green a, .bg-green a:hover,
.btn-blue:hover, .btn-blue-hover, .bg-blue-hover h1, .bg-blue-hover h2, .bg-blue-hover h3, .bg-blue-hover h4, .bg-blue-hover h5, .bg-blue-hover h6, .bg-blue-hover p, .bg-blue-hover td, .bg-blue-hover, .bg-blue-hover a, .bg-blue-hover a:hover,
.btn-lightblue:hover, .btn-lightblue-hover, .bg-lightblue-hover h1, .bg-lightblue-hover h2, .bg-lightblue-hover h3, .bg-lightblue-hover h4, .bg-lightblue-hover h5, .bg-lightblue-hover h6, .bg-lightblue-hover p, .bg-lightblue-hover td, .bg-lightblue-hover, .bg-lightblue-hover a, .bg-lightblue-hover a:hover,
.btn-darkblue:hover, .btn-darkblue-hover, .bg-darkblue-hover h1, .bg-darkblue-hover h2, .bg-darkblue-hover h3, .bg-darkblue-hover h4, .bg-darkblue-hover h5, .bg-darkblue-hover h6, .bg-darkblue-hover p, .bg-darkblue-hover td, .bg-darkblue-hover, .bg-darkblue-hover a, .bg-darkblue-hover a:hover,
.btn-green:hover, .btn-green-hover, .bg-green-hover h1, .bg-green-hover h2, .bg-green-hover h3, .bg-green-hover h4, .bg-green-hover h5, .bg-green-hover h6, .bg-green-hover p, .bg-green-hover td, .bg-green-hover, .bg-green-hover a, .bg-green-hover a:hover,
.btn-darkgrey, .bg-darkgrey h1, .bg-darkgrey h2, .bg-darkgrey h3, .bg-darkgrey h4, .bg-darkgrey h5, .bg-darkgrey h6, .bg-darkgrey p, .bg-darkgrey td, .bg-darkgrey, .bg-darkgrey a, .bg-darkgrey a:hover,
.btn-black, .bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4, .bg-black h5, .bg-black h6, .bg-black p, .bg-black td, .bg-black, .bg-black a, .bg-black a:hover,
.btn-submenu, .bg-submenu h1, .bg-submenu h2, .bg-submenu h3, .bg-submenu h4, .bg-submenu h5, .bg-submenu h6, .bg-submenu p, .bg-submenu td, .bg-submenu, .bg-submenu a, .bg-submenu a:hover,
.bg-dark { color: var(--white); }