@layer reset, theme, global, layout, module, utility;

@layer reset {
		*,
		*::before,
		*::after {
				box-sizing: border-box;    
		}
		
		body {
				margin: unset;
		}

		button,
		input,
		textarea,
		select {
				font: inherit;  
		}

		img,
		picture,
		svg,
		canvas {
				display: block;
				max-inline-size: 100%;
				height: auto;   
		}

		@media (prefers-reduced-motion: reduce) {
				*,
				*::before,
				*::after {
						animation-duration: 0.01ms !important;
						animation-iteration-count: 1 !important;
						transition-duration: 0.01ms !important;
						scroll-behavior: auto !important;
				}
		}
}

@layer theme {
		:root {	
				--sp-blue1: 	#9ADBF2;
				--sp-blue2: 	#61CAEF;
				--sp-blue3: 	#29AAE2;
				--sp-blue4: 	#1E85BB;
				--sp-blue5: 	#3967B1;
				--sp-blue6: 	#293893;
				--sp-ltblue: 	#a9d6e5;
				--sp-dteal:		#2a6f97;
				--sp-lteal:		#2c7da0;
				--sp-lmedblue: 	#89c2d9;
				--sp-mmedblue: 	#61a5c2;
				--sp-dmedblue: 	#468faf;
				--sp-dnavblue: 	#012a4a;
				--sp-mnavblue:	#013a63;
				--sp-lnavblue:	#01497c;	     
				--sp-lcream:	#e8e5da;
				--sp-dcream:	#d9d4d1;
				--sp-silver: 	#f5f6fb;
				--sp-lgrey: 	#edf1f4;
				--sp-mgrey:		#C5C5C5;	/*was #e4e9ed;*/
				--sp-dgrey: 	#7F7F7F;
				--sp-wit: 		#FFFFFF;
				--sp-comp: 		#4B4B4B;
				--bs-indigo: 	#6610f2;
				--med-grey: 	#C5C8D9;
				--pmirror-iconcolours: #787878;
				--sp-red: 		#e04a4a;

		}

		:root {
				--global-line-height: 1.4em;
				--primary-color: var(--sp-blue3);
				--secondary-color: var(--sp-mnavblue);
				--background-color: var(--sp-silver);
				--font-color: var(--sp-mnavblue);
				--invert-font-color: var(--sp-wit);
		}

		:root {
				--font-stack: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif;
				--mono-font-stack: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif;
		}
}

@layer global {
		*::selection {
				background: var(--primary-color);
				color: var(--invert-font-color);
		}

		body {
				color: var(--font-color);
				line-height: var(--global-line-height);
				background-color: var(--background-color);
				word-wrap: break-word;
				font-family: var(--font-stack);
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
				line-height: var(--global-line-height);
		}

		a {
				cursor: pointer;
				color: var(--primary-color);
				text-decoration: none;
		}

		a:hover {
				background-color: var(--primary-color);
				color: var(--invert-font-color);
		}

		em {
				font-style: italic;
				font-family: var(--font-stack);
				color: var(--font-color);
		}

		blockquote,
		code,
		em,
		strong {
				line-height: var(--global-line-height);
		}
		#HERE
		
			.lnk {text-decoration: none; color: inherit} 
			.lnk:hover {text-decoration: none; color: var(--sp-blue3)}

			.fixed_head {
				position: sticky; /* was fixed */
				top: 0;
				background-color: var(--sp-wit,#FFFFFF);
				z-index: 1000;
				padding-bottom: 4px;}

			.short_text {
				white-space: nowrap;       /* Prevent text wrapping */
				overflow: hidden;          /* Hide overflowed text */
				text-overflow: ellipsis; } /* Add ellipsis */

			.short_text:hover {
				white-space: normal;
				width: auto;}

			hr {
				border: none; 
				height: 1px; 
				background-color: var(--sp-mgrey, #CACACA);
				margin-top: -2px}

			hr.solid {
				border-top: 1px solid var(--sp-mgrey, #CACACA);
				margin-top: -2px}	

			.Project_h1 {
				padding-bottom: 20px;
				text-align: center}

			.body_wrap {margin: 10px !important;}

			/* --------------image buttons ---------------- */	

			.image-but {
			  background-color:rgba(255,255,255,0.00); 
			  background-image: url('../images-25/up-down2.svg'); 
			  background-repeat: no-repeat;
			  background-position: center;
			  width: 17px;  
			  height: 14px; 
			  border: none;
			  cursor: pointer;
			  color: transparent; /* Hide text */
			  font-size: 0; /* Hide text */
				padding-top: 10px} /* Hide text */

			/* --------------Padding ---------------- */

			.pad_2_20 {padding: 2px 20px !important;}
			.pad_2_50 {padding: 2px 50px !important;}
	
			.pad_4_20 {padding: 4px 20px !important;}
			.pad_5_20 {padding: 5px 20px !important} /*client note*/
			.pad_10_0 {padding: 10px 0px}
			.pad_10_5 {padding: 10px 5px}  /*req resolution*/
			.pad_10_15 {padding:10px 15px}
			/*NEW*/	.pad_20_15 {padding:20px 15px}
			.main_shad {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
			 
			.adpad {padding:10px 15px} /* padding inside containers */
			/*NEW*/	.wid_45p {width:45%}
	
			.grey_top_sec {
					padding:10px 15px;
					text-align: center;
					align-content: center}

			/* --------CIPC Monthly - styles ----  */

			.sp_on-off img {
				padding-right: 1em; }

			.sp_up-dn img {
				padding-left: 0.2em; }

			.Main_blue {
				background-color: var(--sp-blue4,#1E85BB);
				border:var(--sp-blue4,#1E85BB) solid;
				border-width: 8px;
				border-radius: 50px;
				padding: 5px 5px 5px 0px;}

			.Proj_blue {
				align-content:center;
				color: var(--sp-wit, #FFF);
				font-weight: 600}


			/* ------ Explore Company ---- */

			.grey_bg {
					background: #EDF1F4;
					padding: 15px;} /*explore com*/

			.grey_bor {
					padding: 15px;
					border:#EDF1F4 solid;
					border-width: 1px 2px;
					font-weight: 700;} /*explore com*/

			.Proj_witbk {
				display: inline-flex;
				background-color: var(--sp-wit,#FFFFFF);
				color: var(--sp-blue4,#1E85BB);
				padding: 3px 10px;
				margin: 2px;
				border-radius: 20px;
				font-weight: 700;
				border: var(--sp-blue4,#1E85BB) solid thin;
				text-decoration: none} 

			/* ------ Fonts ---- */

			.sp_body {font-size: 1rem; color: var(--sp-dgrey,#7F7F7F);}							/*--16px--*/
			.head16 {font-size: 1rem; color: #1E85BB; font-weight: 700; text-decoration: none}  /*--16px--*/

			.sp_head1 {font-size: 1.5rem; color: var(--sp-dgrey,#7F7F7F);}						/*--24px--*/		
			.sp_head2 {font-size: 2rem; color: var(--sp-blue4,#1E85BB);font-weight: 700}		/*--32px--*/

			.sp_head3 {font-size: 1.25rem; color: var(--sp-blue4,#1E85BB);font-weight: 700} 	/*--20px--*/
			.sp_head4 {font-size: 1.25rem; color: var(--sp-dgrey,#7F7F7F);font-weight: 700} 
			.sp_head4l {font-size: 1.25rem; color: var(--sp-dgrey,#7F7F7F);} 					
			.head20 {font-size: 1.25rem; color: #29AAE2; font-weight: 700;
					padding: 30px 0px 10px;} 													

			/* ------Notes page & fonts ---- */
			.note_h1 	{	
			font-weight: 700;
			color: var(--sp-blue4,#1E85BB);	  
			font-size:1.75rem !important;  } /*--28px--*/

			.note_12gr {font-size: 0.75rem; color: var(--sp-dgrey,#7F7F7F);}  /*--12px--*/
			.note_12 {font-size: 0.75rem; line-height: 1;}
			.note_12b {font-size: 0.75rem; font-weight: 700; color: var(--sp-blk, #000000)}
			.note_12blue {font-size: 0.75rem; font-weight: 700; color: var(--sp-blue4,#1E85BB)}
			.note_12pd {font-size: 0.75rem; line-height: 1; padding-bottom: 10px;}
			.note_14 {font-size: 0.875rem; color: var(--sp-dgrey,#7F7F7F);font-weight: 700; } /*--14px--*/
			.note_pd {padding: 8px 4px 20px 4px;}

		.proj_hist	{
			font-size:  1.5rem; /*--24px--*/
			font-weight: 700;
			color: var(--sp-dgrey,#7F7F7F); 
			padding-bottom: 20px;}  

		.main_alert { 
			max-width: 350px;  /*---force width-- */
			background-color: #FFFFFF;
			border-radius: 30px;
			padding: 20px 35px;
				border: var(--sp-blue4,#1E85BB) solid;
			border-width: thin;
			margin: 20px auto;
			}

		.main_note { 
			max-width: 950px !important;  /*---force width-- */
			background-color: #FFFFFF;
			border-radius: 20px;
			padding: 20px 15px 20px 0px;
			border-width: thin;
			margin: 20px 0px;}

		.main_curve { 
			background-color: #FFFFFF;
			border-radius: 40px;
			padding: 30px 20px;
			border-width: thin;} /*explore com*/

		.main_notegrey {
			background-color: #EDF1F4; 
			border-radius: 8px;
			padding: 20px 15px;
			border: var(--sp-mgrey) solid;
			border-width: thin;}

		.main_notegreyin {
			background-color:#F9F9F9; 
			border-radius: 8px;
			padding: 20px 15px ;
			border: var(--sp-mgrey) solid;
			border-width: thin;
			margin-top: 5px;
			height:180px;}

		.main_line {
		  background:     linear-gradient(to right, transparent 0%, transparent calc(50% - 0.5px), #CACACA calc(55% - 0.5px), #CACACA calc(51% + 0.5px), transparent calc(50% + 1px), transparent 100%);
			padding-bottom: 10px;
			justify-content: center;
			display: flex;}

		.main_noline {
			padding-bottom: 10px;
			justify-content: center;
			display: flex;}

		/* ------ Uploads Files ---- */

		.up_pad {margin: 1px 0px ;}

		.Main_lg_thin {
			background-color: #FFFFFF;
			border: var(--sp-mgrey) solid;
			border-width: 1px;
			border-radius: 50px;
			padding: 6px 0px 6px 0px;
			margin: 8px 0px;}

		.Main_md_thin {
			background-color: #FFFFFF;
			border: var(--sp-mgrey) solid;
			border-width: 1px;
			border-radius: 30px;
			padding: 22px 5px 10px 5px;
			margin: 8px 0px;}

		.Main_body_thin {
			background-color: #F9F9F9;
			border:var(--sp-mgrey) solid;
			border-width: 1px;
			border-radius: 50px;
			padding: 6px 0px 6px 0px;
			margin: 8px 0px;}

		.Rgt_boder { border-right-color: var(--sp-mgrey, #CACACA); border-right-style: solid ;border-right-width: 1px}

		/* ------ Client Notes ---- */

		.Proj_whitetxt {
			display: inline-flex;
			background-color: var(--sp-blue4,#1E85BB);
			color: var(--sp-wit,#FFFFFF);
			padding: 3px 10px;
			margin: 2px;
			border-radius: 15px;
			font-weight: 700;
			text-decoration: none} 

		.Project_note {
			font-size: 0.75rem; /* 12px */
			background-color: var(--sp-blue4,#1E85BB);
			padding: 3px 10px;
			margin: 2px;
			border-radius: 15px;
			font-weight: 500;
			color: var(--sp-wit,#FFFFFF);
			text-decoration: none} 

		/* --------------- */

		.main_cont {
			background-color: var(--sp-lgrey,#EDF1F4);
			border-radius: 50px;
			padding: 20px 15px 20px 0px;
			margin-bottom: 20px;} /* margin-bottom: 40px; - before test */

		.Main_light {
			background-color: #FFFFFF;
			border:var(--sp-lgrey, #EDF1F4) solid;
			border-width: 4px;
			border-radius: 50px;
			padding: 5px 5px 5px 0px;
			margin: 8px 0px;}

		.Main_grey {
			background-color: var(--sp-lgrey, #EDF1F4);
			border:#edf1f4 solid;
			border-width: 4px;
			border-radius: 50px;
			padding: 5px 5px 5px 0px;}

		.Main_red {
			background-color: var(--sp-red, #e04a4a); /* var(--sp-red, #e04a4a) */
			border:var(--sp-dgrey, #7F7F7F) solid;
			border-width: 1px;
			border-radius: 50px;
			padding: 8px 8px 8px 6px;}

		.Main_wit {
			background-color: var(--sp-wit, #FFF);
			border: var(--sp-wit, #FFF);
			border-width: 4px;
			border-radius: 50px;
			padding: 5px 5px 5px 0px;}

		.wht_search {
			background-color:var(--sp-wit, #FFF); 
			padding:0px 6px 0px 6px;
			border-radius: 15px;
			max-height: 25px;
			}

		.Reg_search {
			background-color: var(--sp-lgrey, #EDF1F4); 
			padding:0px 6px 0px 6px;
			border-radius: 15px;
			max-height: 25px;
			display: inline-block;}

				.Grey_ser {	
					border: none; 
					margin-top:1px;
					background-color:rgba(255,255,255,0.00) ; }

				.Grey_ser .Grey_ser_d:focus{outline: none}

				.Grey_ser_d {	
					border: none; 
					margin-top:1px;
					font-size: 0.875rem;  /* 14px */
		}
				/*.Grey_ser_d:focus{outline: none} */

		.Proj_form {
			display: inline-flex;
			background-color: var(--sp-blue4,#1E85BB);
			padding: 3px 10px;
			margin: 2px;
			border-radius: 15px;
			font-weight: 700;
			text-decoration: none} 

		.Project_blue {
			display: inline-flex;
			background-color: var(--sp-blue4,#1E85BB);
			padding: 3px 10px;
			margin: 2px;
			border-radius: 15px;
			font-weight: 700;
			text-decoration: none} 


				/* redundent? */
				.SP_mouse:hover		{background-color: var(--sp-wit,#FFFFFF);
									color: var(--sp-wit,#FFFFFF);
									transition: background-color 0.3s ease;} /* Smooth transition */

				.SP_mouse a:link    { color: var(--sp-wit,#FFFFFF);  }
				.SP_mouse a:visited { color: var(--sp-wit,#FFFFFF);  }
				.SP_mouse a:hover   { color: var(--sp-blue4,#1E85BB);}
				.SP_mouse a:active  { color: var(--sp-wit,#FFFFFF);  }

		.Proj_text {display: inline-block; align-content:center}

		.Project_wit {
			background-color: var(--sp-wit,#FFFFFF); 
			padding: 2px 10px;
			border-radius: 15px;
			display: inline-block;
			border: none;
			margin: 2px ;
			height: 2em}

				.Proj_wit {	
					height: 2em;
					vertical-align: middle;
					border: none;
					margin-top:1px;
					background-color: var(--sp-wit,#FFFFFF);}

				.Proj_wit:focus{outline: none}

		.Project_grey {
			background-color: var(--sp-lgrey,#EDF1F4); 
			padding: 3px 10px;
			border-radius: 15px;
			display: inline-block;
			border: none;
			margin: 2px ;
			height: 2em;}

				.Proj_grey {	
					height: 18px;
					vertical-align: middle;
					border: none;
					/* was  margin-top:1px;*/
					background-color: var(--sp-lgrey,#EDF1F4);}

				.Proj_grey:focus{outline: none}

		.Com_grey {
			background-color: var(--sp-lgrey,#EDF1F4); 
			padding:20px;
			border-radius: 30px;
			display: inline-block;
			border: none;
			margin: 1px;}

		.Cen {text-align: center;}

		.Com_grey15 {
			background-color: var(--sp-lgrey,#EDF1F4); 
			padding: 10px; /* was 20px */
			border-radius: 15px;
			display: inline-block;
			border: none;
			margin: 1px;} 

		.Com_wit15 {
			background-color: var(--sp-wit,#FFFFFF); 
			padding:20px;
			border-radius: 15px;

			border: none;
			margin: 1px;}

		.Project_search {
			background-color: var(--sp-blue4,#1E85BB);
			padding: 3px 10px;
			border-radius: 15px;
			display: inline-block;
			border: none;
			margin: 2px ;
				height: 2em}

				.Proj_ser {	
					height: 20px;
					vertical-align: middle;
					border: none;
					margin-top:1px;
					background-color: var(--sp-blue4,#1E85BB);
					color: var(--sp-wit,#FFFFFF)}

				.Proj_ser:focus{outline: none}		

		.Project_cont {
			padding: 8px 0px 0px ;
			color: #FFFFFF;
			border-radius: 15px;}

		.Project_name { 
			padding: 0px 10px 5px 0px;
			color: var(--sp-blue4,#1E85BB);
			display: inline-block;
			font-weight: bold;
			font-size: 15px;
			vertical-align: -10%;}

				.Proj_name { /* pop-up form style */
					color: var(--sp-blue4,#1E85BB);
					display: inline-block;
					font-weight: bold;
					font-size: 15px;
					margin: 1em 0 0 1em;}

				.Proj_grey { /* pop-up form style */
					color: var(--sp-comp, #4B4B4B);
					display: inline-block;
					font-weight: bold;
					font-size: 15px;
					margin: 1em 0 0 1em;
					height: 2em}

		.Proj_name_blk { 	/* change to blk */
			padding: 0px 5px 5px 0px;
			color: var(--sp-comp, #4B4B4B);
			display: inline-block;
			vertical-align: -5%;
			font-weight: 600;}

				.Project_name_dark { 	/* delete if pink */
					font-weight: 600;
					padding: 0px 5px 5px 0px ;
					color: #D42BA9;
					display: inline-block;
					vertical-align: -10%;}

		.Project_client { 
			padding: 0px 30px 5px 0px ;
			color: #4B4B4B;}

		.Proj_small {  			
			font-size: 0.625rem; /* Font size 10 */
			line-height: 1;	}

		.Proj_cent {
			display: flex; align-items: center;} /* align-content:center; font-size: 14px;   -  PS: check other pages   */


		.Proj_cent10 {  /* align tick icon */
			align-content:center;
			color: var(--sp-dgrey, #7F7F7F);
			vertical-align: -5%;}

		.Project_comp { 
			padding: 0px; }
			/* color: #4B4B4B;  main font colour?  */

		.wid_100 { width: 100%; }
		.wid_45 { width: 45%; }


		/* --------------@media-------------- */

		  @media (min-width: 1200px) {
			  .my-container {
				max-width: 1600px !important; /* Set your desired width here */
			  }
			}

		  @media (max-width: 1199.98px) {
			  .Project_comp {
					padding-left: 30px !important}
			}

		/* ----------------------Custom .btn button styles ---------------- */
		.btn {
			padding: 2px 10px;
			border: 0 none;
			font-weight: 500;
			letter-spacing: 1px; }

		.btn:focus, .btn:active:focus, .btn.active:focus {
			outline: 0 none; }

		.vatboy {padding:6px 45px !important;}
		.tallboy {padding:4px 45px !important;}
		.btn-lg.round {border-radius: 15px;}

		.btn-pri-12 {
			background: var(--sp-blue4,#1E85BB); 
			color: #ffffff;
			border-radius: 15px;
			margin: 2px;
			font-size: 0.75rem; /*12px*/
			border: none;
			text-align: center;
				padding: 2px 10px;}

		.btn-pri-12:hover, .btn-pri-12:focus, .btn-pri-12:active, .btn-pri-12.active, .open > .dropdown-toggle.btn-pri-12 {
			background: #fff; 
			color: var(--sp-blue4,#1E85BB);
			border: solid #1E85BB;
			border-width: thin;
			text-decoration: none}

		.btn-rev-12 {
			background: #ffffff; 
			color: var(--sp-blue4,#1E85BB);
			border-radius: 15px;
			margin: 2px;
			font-size: 0.75rem; /*12px*/
			border: solid #1E85BB;
			border-width: thin;
			text-align: center;
				padding: 2px 10px;}

		.btn-rev-12:hover, .btn-rev-12:focus, .btn-rev-12:active, .btn-rev-12.active, .open > .dropdown-toggle.btn-rev-12 {
			background: var(--sp-blue4,#1E85BB) ; color: #fff }

			/* -----primary light grey------ */
		.btn-grey {
			background: var(--sp-lgrey, #EDF1F4); 
			color: var(--sp-dgrey, #7F7F7F);
			border-radius: 20px;
			margin: 2px;
			font-size: 0.875rem;  /* 14px */
			border: solid var(--sp-lgrey, #EDF1F4);
			border-width: thin;
				padding: 2px 10px}

		.btn-grey:hover, .btn-grey:focus, .btn-grey:active, .btn-grey.active, .open > .dropdown-toggle.btn-grey {
			background: var(--sp-dgrey, #7F7F7F); 
			color: var(--sp-lgrey, #EDF1F4); 
			text-decoration: none }

			/* -----primary white------ */
		.btn-rev-15 {
			background: #ffffff; 
			color: var(--sp-blue4,#1E85BB);
			border-radius: 20px;
			margin: 2px;
			font-size: 0.875rem;  /* 14px */
			border: solid #1E85BB;
			border-width: thin;
				padding: 2px 10px}

		.btn-rev-15:hover, .btn-rev-15:focus, .btn-rev-15:active, .btn-rev-15.active, .open > .dropdown-toggle.btn-rev-15 {
			background: var(--sp-blue4,#1E85BB); 
			color: #fff; 
			text-decoration: none }

		.btn-rev-16 {
			background: #ffffff; 
			color: var(--sp-blue4,#1E85BB);
			border-radius: 20px;
			margin: 2px;
			font-size: 0.875rem;  /* 14px */
			border: solid #1E85BB;
			border-width: thin;
				padding: 2px 10px;
				font-weight: bold}

		.btn-rev-15:hover, .btn-rev-15:focus, .btn-rev-15:active, .btn-rev-15.active, .open > .dropdown-toggle.btn-rev-15 {
			background: var(--sp-blue4,#1E85BB); 
			color: #fff; 
			text-decoration: none }

			/* -----primary blue------ */

		.btn-primary {
			background: var(--sp-blue4,#1E85BB); 
			color: #ffffff;
			border-radius: 20px;	/* was 15px */
			margin: 2px;
			font-size: 0.875rem;  /* 14px */
			font-weight: 500;
			text-align: center;
			border: solid var(--sp-blue4,#1E85BB);
			border-width: thin;
			padding: 2px 10px}

		.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
			background: #ffffff; 
			color: var(--sp-blue4,#1E85BB);
			border: solid var(--sp-blue4,#1E85BB);
			border-width: thin;  
			text-decoration: none} 

		.btn-primary:active, .btn-primary.active {
			background: var(--sp-blue4,#1E85BB); 
			box-shadow: none;}

			/* -----SPprimary blue TEST------ */

		.sp-primary {
			background: var(--sp-blue4,#1E85BB); 
			color: #ffffff;
			border-radius: 20px;	/* was 15px */
			margin: 2px;
			font-size: 0.875rem;  /* 14px */
			font-weight: 500;
			text-align: center;
			border: solid var(--sp-blue4,#1E85BB);
			border-width: thin;
			padding: 2px 10px}

		.sp-primary:hover, .sp-primary:focus, .sp-primary:active, .sp-primary.active, .open > .dropdown-toggle.sp-primary {
			background: #ffffff; 
			color: var(--sp-blue4,#1E85BB);
			border: solid var(--sp-blue4,#1E85BB);
			border-width: thin;  
			text-decoration: none} 

		.sp-primary:active, .sp-primary.active {
			background: var(--sp-blue4,#1E85BB); 
			box-shadow: none;}

			/* ---btn-primary variations ---- */

		.btn-dgrey {
			background: var(--sp-dgrey,#7F7F7F); 
			color: #ffffff;
			border-radius: 20px;	/* ---- was 15px ----- */
			margin: 2px;
			font-size: 0.875rem;  /* 14px */
			font-weight: 500;
			text-align: center;
			border: solid var(--sp-dgrey,#7F7F7F);
			border-width: thin;
			padding: 2px 10px}

		.btn-dgrey:hover, .btn-dgrey:focus, .btn-dgrey:active, .btn-dgrey.active, .open > .dropdown-toggle.btn-dgrey {
			background: #ffffff; 
			color: var(--sp-blue4,#1E85BB);
			border: solid #1E85BB;
			border-width: thin;  
				text-decoration: none} 

		.btn-dgrey:active, .btn-dgrey.active {
			background: var(--sp-blue4,#1E85BB); 
			box-shadow: none;}

	
	
	
}

@layer module {
		
}

@layer utility {
		.invert {
				
		}
		
		.grow {
				flex-grow: 1;
    }
    
    .flex-r-s-s {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
    }

    .flex-r-s-e {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-end;
    }

    .flex-r-s-c {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: center;
    }

    .flex-r-s-b {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
    }

    .flex-r-s-a {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-around;
    }

    .flex-r-s-even {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-evenly;
    }

    .flex-r-e-s {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: flex-start;
    }

    .flex-r-e-e {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: flex-end;
    }

    .flex-r-e-c {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: center;
    }

    .flex-r-e-b {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: space-between;
    }

    .flex-r-e-a {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: space-around;
    }

    .flex-r-e-even {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: space-evenly;
    }

    .flex-r-c-s {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
    }

    .flex-r-c-e {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
    }

    .flex-r-c-c {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
    }

    .flex-r-c-b {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
    }

    .flex-r-c-a {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
    }

    .flex-r-c-even {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-evenly;
    }

    .flex-r-b-s {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				justify-content: flex-start;
    }

    .flex-r-b-e {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				justify-content: flex-end;
    }

    .flex-r-b-c {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				justify-content: center;
    }

    .flex-r-b-b {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				justify-content: space-between;
    }

    .flex-r-b-a {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				justify-content: space-around;
    }

    .flex-r-b-even {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				justify-content: space-evenly;
    }

    .flex-r-st-s {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: flex-start;
    }

    .flex-r-st-e {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: flex-end;
    }

    .flex-r-st-c {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: center;
    }

    .flex-r-st-b {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: space-between;
    }

    .flex-r-st-a {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: space-around;
    }

    .flex-r-st-even {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: space-evenly;
    }

    .flex-rr-s-s {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-start;
				justify-content: flex-start;
    }

    .flex-rr-s-e {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-start;
				justify-content: flex-end;
    }

    .flex-rr-s-c {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-start;
				justify-content: center;
    }

    .flex-rr-s-b {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-start;
				justify-content: space-between;
    }

    .flex-rr-s-a {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-start;
				justify-content: space-around;
    }

    .flex-rr-s-even {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-start;
				justify-content: space-evenly;
    }

    .flex-rr-e-s {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-end;
				justify-content: flex-start;
    }

    .flex-rr-e-e {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-end;
				justify-content: flex-end;
    }

    .flex-rr-e-c {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-end;
				justify-content: center;
    }

    .flex-rr-e-b {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-end;
				justify-content: space-between;
    }

    .flex-rr-e-a {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-end;
				justify-content: space-around;
    }

    .flex-rr-e-even {
				display: flex;
				flex-direction: row-reverse;
				align-items: flex-end;
				justify-content: space-evenly;
    }

    .flex-rr-c-s {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: flex-start;
    }

    .flex-rr-c-e {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: flex-end;
    }

    .flex-rr-c-c {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: center;
    }

    .flex-rr-c-b {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: space-between;
    }

    .flex-rr-c-a {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: space-around;
    }

    .flex-rr-c-even {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: space-evenly;
    }

    .flex-rr-b-s {
				display: flex;
				flex-direction: row-reverse;
				align-items: baseline;
				justify-content: flex-start;
    }

    .flex-rr-b-e {
				display: flex;
				flex-direction: row-reverse;
				align-items: baseline;
				justify-content: flex-end;
    }

    .flex-rr-b-c {
				display: flex;
				flex-direction: row-reverse;
				align-items: baseline;
				justify-content: center;
    }

    .flex-rr-b-b {
				display: flex;
				flex-direction: row-reverse;
				align-items: baseline;
				justify-content: space-between;
    }

    .flex-rr-b-a {
				display: flex;
				flex-direction: row-reverse;
				align-items: baseline;
				justify-content: space-around;
    }

    .flex-rr-b-even {
				display: flex;
				flex-direction: row-reverse;
				align-items: baseline;
				justify-content: space-evenly;
    }

    .flex-rr-st-s {
				display: flex;
				flex-direction: row-reverse;
				align-items: stretch;
				justify-content: flex-start;
    }

    .flex-rr-st-e {
				display: flex;
				flex-direction: row-reverse;
				align-items: stretch;
				justify-content: flex-end;
    }

    .flex-rr-st-c {
				display: flex;
				flex-direction: row-reverse;
				align-items: stretch;
				justify-content: center;
    }

    .flex-rr-st-b {
				display: flex;
				flex-direction: row-reverse;
				align-items: stretch;
				justify-content: space-between;
    }

    .flex-rr-st-a {
				display: flex;
				flex-direction: row-reverse;
				align-items: stretch;
				justify-content: space-around;
    }

    .flex-rr-st-even {
				display: flex;
				flex-direction: row-reverse;
				align-items: stretch;
				justify-content: space-evenly;
    }

    .flex-c-s-s {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
    }

    .flex-c-s-e {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-end;
    }

    .flex-c-s-c {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
    }

    .flex-c-s-b {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
    }

    .flex-c-s-a {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-around;
    }

    .flex-c-s-even {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-evenly;
    }

    .flex-c-e-s {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: flex-start;
    }

    .flex-c-e-e {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: flex-end;
    }

    .flex-c-e-c {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;
    }

    .flex-c-e-b {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-between;
    }

    .flex-c-e-a {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-around;
    }

    .flex-c-e-even {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-evenly;
    }

    .flex-c-c-s {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
    }

    .flex-c-c-e {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
    }

    .flex-c-c-c {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
    }

    .flex-c-c-b {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
    }

    .flex-c-c-a {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
    }

    .flex-c-c-even {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
    }

    .flex-c-b-s {
				display: flex;
				flex-direction: column;
				align-items: baseline;
				justify-content: flex-start;
    }

    .flex-c-b-e {
				display: flex;
				flex-direction: column;
				align-items: baseline;
				justify-content: flex-end;
    }

    .flex-c-b-c {
				display: flex;
				flex-direction: column;
				align-items: baseline;
				justify-content: center;
    }

    .flex-c-b-b {
				display: flex;
				flex-direction: column;
				align-items: baseline;
				justify-content: space-between;
    }

    .flex-c-b-a {
				display: flex;
				flex-direction: column;
				align-items: baseline;
				justify-content: space-around;
    }

    .flex-c-b-even {
				display: flex;
				flex-direction: column;
				align-items: baseline;
				justify-content: space-evenly;
    }

    .flex-c-st-s {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: flex-start;
    }

    .flex-c-st-e {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: flex-end;
    }

    .flex-c-st-c {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: center;
    }

    .flex-c-st-b {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: space-between;
    }

    .flex-c-st-a {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: space-around;
    }

    .flex-c-st-even {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: space-evenly;
    }

    .flex-cr-s-s {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-start;
				justify-content: flex-start;
    }

    .flex-cr-s-e {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-start;
				justify-content: flex-end;
    }

    .flex-cr-s-c {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-start;
				justify-content: center;
    }

    .flex-cr-s-b {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-start;
				justify-content: space-between;
    }

    .flex-cr-s-a {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-start;
				justify-content: space-around;
    }

    .flex-cr-s-even {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-start;
				justify-content: space-evenly;
    }

    .flex-cr-e-s {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-end;
				justify-content: flex-start;
    }

    .flex-cr-e-e {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-end;
				justify-content: flex-end;
    }

    .flex-cr-e-c {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-end;
				justify-content: center;
    }

    .flex-cr-e-b {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-end;
				justify-content: space-between;
    }

    .flex-cr-e-a {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-end;
				justify-content: space-around;
    }

    .flex-cr-e-even {
				display: flex;
				flex-direction: column-reverse;
				align-items: flex-end;
				justify-content: space-evenly;
    }

    .flex-cr-c-s {
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				justify-content: flex-start;
    }

    .flex-cr-c-e {
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				justify-content: flex-end;
    }

    .flex-cr-c-c {
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				justify-content: center;
    }

    .flex-cr-c-b {
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				justify-content: space-between;
    }

    .flex-cr-c-a {
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				justify-content: space-around;
    }

    .flex-cr-c-even {
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				justify-content: space-evenly;
    }

    .flex-cr-b-s {
				display: flex;
				flex-direction: column-reverse;
				align-items: baseline;
				justify-content: flex-start;
    }

    .flex-cr-b-e {
				display: flex;
				flex-direction: column-reverse;
				align-items: baseline;
				justify-content: flex-end;
    }

    .flex-cr-b-c {
				display: flex;
				flex-direction: column-reverse;
				align-items: baseline;
				justify-content: center;
    }

    .flex-cr-b-b {
				display: flex;
				flex-direction: column-reverse;
				align-items: baseline;
				justify-content: space-between;
    }

    .flex-cr-b-a {
				display: flex;
				flex-direction: column-reverse;
				align-items: baseline;
				justify-content: space-around;
    }

    .flex-cr-b-even {
				display: flex;
				flex-direction: column-reverse;
				align-items: baseline;
				justify-content: space-evenly;
    }

    .flex-cr-st-s {
				display: flex;
				flex-direction: column-reverse;
				align-items: stretch;
				justify-content: flex-start;
    }

    .flex-cr-st-e {
				display: flex;
				flex-direction: column-reverse;
				align-items: stretch;
				justify-content: flex-end;
    }

    .flex-cr-st-c {
				display: flex;
				flex-direction: column-reverse;
				align-items: stretch;
				justify-content: center;
    }

    .flex-cr-st-b {
				display: flex;
				flex-direction: column-reverse;
				align-items: stretch;
				justify-content: space-between;
    }

    .flex-cr-st-a {
				display: flex;
				flex-direction: column-reverse;
				align-items: stretch;
				justify-content: space-around;
    }

    .flex-cr-st-even {
				display: flex;
				flex-direction: column-reverse;
				align-items: stretch;
				justify-content: space-evenly;
    }
}