```
/****************************************************************************************
* Bootstrap 5.3 plus Sass (Scss).
* Note: Bootstrap is called twice via link and rewritten the second time by the custom css.
*
* @url https://getbootstrap.com/docs/4.6/getting-started/theming/
* @url https://blog.hubspot.com/website/how-to-override-bootstrap-css
* @url https://stackoverflow.com/questions/38792005/how-to-change-the-bootstrap-primary-color
* @url https://stackoverflow.com/questions/62882459/correct-way-to-customize-bootstrap-4-using-npm-and-sass
*
* Variable Defaults (required)
* @url https://getbootstrap.com/docs/4.6/getting-started/theming/#variable-defaults
*
* Compile your Sass to CSS
* Since you already have Sass installed, compile custom-bootstrap.scss to generate your CSS file.
* Watch for changes:
*
* 	sass --watch @app/web/css/app-bootstrap.scss @app/web/css/bootstrap.css
* 
* Or run once:
* 
* 	sass @app/web/css/app-bootstrap.scss @app/web/css/bootstrap.css
*
* 	cd /path/to/your/app/root
* 	sass web/css/app-bootstrap.scss web/css/bootstrap.css
*
* Include functions first (so you can manipulate colors, SVGs, calc, etc)
*	@import "../../vendor/bower-asset/bootstrap/scss/functions";
*
****************************************************************************************/
@import "../../vendor/bower-asset/bootstrap/scss/functions";

/****************************************************************************************
* Import Bootstrap variables and dark variables AFTER your manual definitions 
* to allow any defaults to fill the rest
****************************************************************************************/
@import "../../vendor/bower-asset/bootstrap/scss/variables";
@import "../../vendor/bower-asset/bootstrap/scss/variables-dark";


/****************************************************************************************
* Theme Colors
* Override theme colors map once
****************************************************************************************/
$theme-colors: (
	"primary": #0c7c94,
	"secondary": #babcc9,
	"success": #6b8f8e,
	"info": #7889a4,
	"warning": #98843e,
	"danger": #822c2a,
	"light": #ebebeb,
	"dark": #65656a
);

// Override Bootstrap's primary color variable directly
$primary: map-get($theme-colors, "primary");

/***********************************************
* Alert
* Contrast color helper function
***********************************************/
@function contrast-color($color)
{
	// You can just force white text on these solid dark backgrounds,
	// but keeping logic if you want to expand for lighter colors.
	@if lightness($color) > 50%
	{
		@return #333333;/* #333333; very dark charcoal gray */
	}
	@else
	{
		@return #ffffff;
	}
}

/***********************************************
* Alert
* Border Colors (solid theme colors)
***********************************************/
$alert-border-primary: map-get($theme-colors, "primary");
$alert-border-secondary: map-get($theme-colors, "secondary");
$alert-border-success: map-get($theme-colors, "success");
$alert-border-danger: map-get($theme-colors, "danger");
$alert-border-warning: map-get($theme-colors, "warning");
$alert-border-info: map-get($theme-colors, "info");
$alert-border-light: map-get($theme-colors, "light");
$alert-border-dark: map-get($theme-colors, "dark");

/***********************************************
* Alert
* Base Colors (solid theme colors)
***********************************************/
$alert-bg-primary: map-get($theme-colors, "primary");
$alert-bg-secondary: map-get($theme-colors, "secondary");
$alert-bg-success: map-get($theme-colors, "success");
$alert-bg-danger: map-get($theme-colors, "danger");
$alert-bg-warning: map-get($theme-colors, "warning");
$alert-bg-info: map-get($theme-colors, "info");
$alert-bg-light: map-get($theme-colors, "light");
$alert-bg-dark: map-get($theme-colors, "dark");

/***********************************************
* Alert
* Slightly lightened versions of border colors
***********************************************/
$alert-bg-primary: lighten($alert-border-primary, 15%);
$alert-bg-secondary: lighten($alert-border-secondary, 15%);
$alert-bg-success: lighten($alert-border-success, 15%);
$alert-bg-danger: lighten($alert-border-danger, 15%);
$alert-bg-warning: lighten($alert-border-warning, 15%);
$alert-bg-info: lighten($alert-border-info, 15%);
$alert-bg-light: lighten($alert-border-light, 10%);// light, small lightening
$alert-bg-dark: lighten($alert-border-dark, 10%);// dark, small lightening

/***********************************************
* Alert
* Text colors based on background contrast
***********************************************/
$alert-color-primary: contrast-color($alert-bg-primary);
$alert-color-secondary: contrast-color($alert-bg-secondary);
$alert-color-success: contrast-color($alert-bg-success);
$alert-color-danger: contrast-color($alert-bg-danger);
$alert-color-warning: contrast-color($alert-bg-warning);
$alert-color-info: contrast-color($alert-bg-info);
$alert-color-light: contrast-color($alert-bg-light);
$alert-color-dark: contrast-color($alert-bg-dark);

/***********************************************
* Color Defaults
***********************************************/
$white: #ffffff;
$black: #000000;
$body-color: #333333;

/***********************************************
* Font Defaults
***********************************************/
$font-family-sans-serif: 'Roboto', Arial, sans-serif;
$headings-font-family: 'Poppins', Georgia, serif;

/***********************************************
* Background color of the card header
***********************************************/
$card-cap-bg: #ebebeb;

/***********************************************
* horizontal and vertical spacing values 
* (gutters) used throughout the Bootstrap grid
***********************************************/
$gutters: (
	xs: 1rem,
	sm: 1.5rem,
	md: 2rem,
	lg: 2.5rem,
	xl: 3rem,
	xxl: 3.5rem
);

/***********************************************
* Default color for links <a> tags
***********************************************/
$link-color: map-get($theme-colors, "primary");
$link-hover-color: #5a5f56;

/***********************************************
* Button Padding
***********************************************/
$btn-padding-y: 0.5rem;
$btn-padding-x: 1rem;

/***********************************************
* Setup Theme
***********************************************/
$theme-colors-rgb: ();
@each $color, $hex in $theme-colors
{
	$theme-colors-rgb: map-merge(
		$theme-colors-rgb,
		($color: (red($hex), green($hex), blue($hex)))
	);
}
$theme-colors-text: (
	"primary": $white,
	"secondary": $white,
	"success": $white,
	"info": $white,
	"warning": $body-color,
	"danger": $white,
	"light": $body-color,
	"dark": $white
);
$theme-colors-text-dark: ();
@each $color, $val in $theme-colors-text
{
	$theme-colors-text-dark: map-merge(
		$theme-colors-text-dark,
		($color: if($color == "dark", $white, $black))
	);
}
$theme-colors-bg-subtle: ();
@each $color, $rgb in $theme-colors-rgb {
	$theme-colors-bg-subtle: map-merge(
		$theme-colors-bg-subtle,
		($color: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), 0.1))
	);
}
$theme-colors-border-subtle: ();
@each $color, $rgb in $theme-colors-rgb {
	$theme-colors-border-subtle: map-merge(
		$theme-colors-border-subtle,
		($color: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), 0.25))
	);
}
$theme-colors-bg-subtle-dark: ();
@each $color, $rgb in $theme-colors-rgb {
	$theme-colors-bg-subtle-dark: map-merge(
		$theme-colors-bg-subtle-dark,
		($color: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), 0.15))
	);
}
$theme-colors-border-subtle-dark: ();
@each $color, $rgb in $theme-colors-rgb {
	$theme-colors-border-subtle-dark: map-merge(
		$theme-colors-border-subtle-dark,
		($color: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), 0.5))
	);
}

/****************************************************************************************
* Utilities
****************************************************************************************/
$utilities-border-colors: (
	"primary": map-get($theme-colors, "primary"),
	"secondary": map-get($theme-colors, "secondary"),
	"success": map-get($theme-colors, "success"),
	"info": map-get($theme-colors, "info"),
	"warning": map-get($theme-colors, "warning"),
	"danger": map-get($theme-colors, "danger"),
	"light": map-get($theme-colors, "light"),
	"dark": map-get($theme-colors, "dark")
);
$utilities-border-subtle: (
	"primary": rgba(map-get($theme-colors, "primary"), 0.25),
	"secondary": rgba(map-get($theme-colors, "secondary"), 0.25),
	"success": rgba(map-get($theme-colors, "success"), 0.25),
	"info": rgba(map-get($theme-colors, "info"), 0.25),
	"warning": rgba(map-get($theme-colors, "warning"), 0.25),
	"danger": rgba(map-get($theme-colors, "danger"), 0.25),
	"light": rgba(map-get($theme-colors, "light"), 0.25),
	"dark": rgba(map-get($theme-colors, "dark"), 0.25)
);
$utilities-text-colors: (
	"primary": map-get($theme-colors, "primary"),
	"secondary": map-get($theme-colors, "secondary"),
	"success": map-get($theme-colors, "success"),
	"info": map-get($theme-colors, "info"),
	"warning": map-get($theme-colors, "warning"),
	"danger": map-get($theme-colors, "danger"),
	"light": map-get($theme-colors, "light"),
	"dark": map-get($theme-colors, "dark")
);
$utilities-bg-colors: (
	"primary": map-get($theme-colors, "primary"),
	"secondary": map-get($theme-colors, "secondary"),
	"success": map-get($theme-colors, "success"),
	"info": map-get($theme-colors, "info"),
	"warning": map-get($theme-colors, "warning"),
	"danger": map-get($theme-colors, "danger"),
	"light": map-get($theme-colors, "light"),
	"dark": map-get($theme-colors, "dark")
);
$utilities-text-emphasis-colors: (
	"primary": rgba(map-get($theme-colors, "primary"), 0.9),
	"secondary": rgba(map-get($theme-colors, "secondary"), 0.9),
	"success": rgba(map-get($theme-colors, "success"), 0.9),
	"info": rgba(map-get($theme-colors, "info"), 0.9),
	"warning": rgba(map-get($theme-colors, "warning"), 0.9),
	"danger": rgba(map-get($theme-colors, "danger"), 0.9),
	"light": rgba(map-get($theme-colors, "light"), 0.9),
	"dark": rgba(map-get($theme-colors, "dark"), 0.9)
);
$utilities-bg-emphasis-colors: (
	"primary": rgba(map-get($theme-colors, "primary"), 0.15),
	"secondary": rgba(map-get($theme-colors, "secondary"), 0.15),
	"success": rgba(map-get($theme-colors, "success"), 0.15),
	"info": rgba(map-get($theme-colors, "info"), 0.15),
	"warning": rgba(map-get($theme-colors, "warning"), 0.15),
	"danger": rgba(map-get($theme-colors, "danger"), 0.15),
	"light": rgba(map-get($theme-colors, "light"), 0.15),
	"dark": rgba(map-get($theme-colors, "dark"), 0.15)
);
$utilities-border-emphasis-colors: (
	"primary": rgba(map-get($theme-colors, "primary"), 0.75),
	"secondary": rgba(map-get($theme-colors, "secondary"), 0.75),
	"success": rgba(map-get($theme-colors, "success"), 0.75),
	"info": rgba(map-get($theme-colors, "info"), 0.75),
	"warning": rgba(map-get($theme-colors, "warning"), 0.75),
	"danger": rgba(map-get($theme-colors, "danger"), 0.75),
	"light": rgba(map-get($theme-colors, "light"), 0.75),
	"dark": rgba(map-get($theme-colors, "dark"), 0.75)
);


/***********************************************
* $negative-spacers (required by utilities 
* for negative margin utilities)
***********************************************/
$negative-spacers: (
	0: 0,
	1: -0.25rem,
	2: -0.5rem,
	3: -1rem,
	4: -1.5rem,
	5: -3rem
);

/***********************************************
* Utilities Links Underline
***********************************************/
$utilities-links-underline: (
	"primary": true,
	"secondary": true,
	"success": true,
	"info": true,
	"warning": true,
	"danger": true,
	"light": false,
	"dark": true
);
$utilities-bg-subtle: (
	"primary": map-get($theme-colors-bg-subtle, "primary"),
	"secondary": map-get($theme-colors-bg-subtle, "secondary"),
	"success": map-get($theme-colors-bg-subtle, "success"),
	"info": map-get($theme-colors-bg-subtle, "info"),
	"warning": map-get($theme-colors-bg-subtle, "warning"),
	"danger": map-get($theme-colors-bg-subtle, "danger"),
	"light": map-get($theme-colors-bg-subtle, "light"),
	"dark": map-get($theme-colors-bg-subtle, "dark")
);

/****************************************************************************************
* Form Control - Focus glow color
****************************************************************************************/
$form-focus-border-color: map-get($theme-colors, "primary");
$form-focus-box-shadow: 0 0 0 0.25rem rgba(
	red(map-get($theme-colors, "primary")),
	green(map-get($theme-colors, "primary")),
	blue(map-get($theme-colors, "primary")),
	0.25
);

// Fix checkbox input focus styles to use your primary color as well
.form-check-input:focus
{
	border-color: $primary;
	box-shadow: 0 0 0 0.25rem rgba(
		red($primary),
		green($primary),
		blue($primary),
		0.25
	);
}

/****************************************************************************************
* Mixins (required for bootstrap)
*	@import "../../vendor/bower-asset/bootstrap/scss/mixins";
*
****************************************************************************************/
@import "../../vendor/bower-asset/bootstrap/scss/mixins";

/****************************************************************************************
* Bootstrap core and Components
* Import only what you need
*
****************************************************************************************/
@import "../../vendor/bower-asset/bootstrap/scss/root";// Must be before "type"
@import "../../vendor/bower-asset/bootstrap/scss/reboot";// Must be before "type"
//@import "../../vendor/bower-asset/bootstrap/scss/accordion";
@import "../../vendor/bower-asset/bootstrap/scss/alert";
@import "../../vendor/bower-asset/bootstrap/scss/badge";
@import "../../vendor/bower-asset/bootstrap/scss/breadcrumb";
@import "../../vendor/bower-asset/bootstrap/scss/buttons";
@import "../../vendor/bower-asset/bootstrap/scss/button-group";
@import "../../vendor/bower-asset/bootstrap/scss/card";
@import "../../vendor/bower-asset/bootstrap/scss/carousel";
@import "../../vendor/bower-asset/bootstrap/scss/close";
//@import "../../vendor/bower-asset/bootstrap/scss/code";
@import "../../vendor/bower-asset/bootstrap/scss/dropdown";
@import "../../vendor/bower-asset/bootstrap/scss/forms";
@import "../../vendor/bower-asset/bootstrap/scss/images";
@import "../../vendor/bower-asset/bootstrap/scss/list-group";
@import "../../vendor/bower-asset/bootstrap/scss/modal";
@import "../../vendor/bower-asset/bootstrap/scss/nav";
@import "../../vendor/bower-asset/bootstrap/scss/navbar";
@import "../../vendor/bower-asset/bootstrap/scss/pagination";
@import "../../vendor/bower-asset/bootstrap/scss/popover";
//@import "../../vendor/bower-asset/bootstrap/scss/progress";
//@import "../../vendor/bower-asset/bootstrap/scss/spinners";
@import "../../vendor/bower-asset/bootstrap/scss/tables";
//@import "../../vendor/bower-asset/bootstrap/scss/toasts";
//@import "../../vendor/bower-asset/bootstrap/scss/tooltip";
@import "../../vendor/bower-asset/bootstrap/scss/transitions";
@import "../../vendor/bower-asset/bootstrap/scss/type";
@import "../../vendor/bower-asset/bootstrap/scss/utilities";

// Note: Bootstrap imports all files, and must be at the end of the file.
//@import "../../vendor/bower-asset/bootstrap/scss/bootstrap";

/****************************************************************************************
* Theme Bootstrap below
**
* Navbar Dropdown Menu Select Color
***********************************************/
.dropdown-menu
{
	.dropdown-item
	{
		&.active,
		&:active,
		&:focus,
		&:hover
		{
			color: map-get($theme-colors, "light") !important;// white text
			background-color: map-get($theme-colors, "primary") !important;// custom primary background
			transition: background-color 0.2s ease, color 0.2s ease;
		}
	}
}
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link
{
	color: map-get($theme-colors, "primary") !important;
}

/***********************************************
* Form Dropdown Select Color
***********************************************/
.form-control:focus
{
	border-color: map-get($theme-colors, "primary") !important;
	box-shadow: 0 0 0 0.25rem rgba(
		red(map-get($theme-colors, "primary")),
		green(map-get($theme-colors, "primary")),
		blue(map-get($theme-colors, "primary")),
		0.25
	) !important;
	outline: none;
}
.form-select
{
	background-color: $white;
	color: inherit;
	border-color: map-get($theme-colors, "secondary");
	border-radius: 0;
	
	&:focus
	{
		border-color: map-get($theme-colors, "primary");
		box-shadow: 0 0 0 0.25rem rgba(
			red(map-get($theme-colors, "primary")),
			green(map-get($theme-colors, "primary")),
			blue(map-get($theme-colors, "primary")),
			0.25
		);
		outline: none;
	}
	
	option:checked
	{
		background-color: map-get($theme-colors, "primary");
		color: map-get($theme-colors-text, "primary");
	}
}

/***********************************************
* Your Custom Checkbox/Radio Validation Style
***********************************************/
.form-check-input:focus
{
	border-color: $primary;
	box-shadow: 0 0 0 0.25rem rgba(
		red($primary),
		green($primary),
		blue($primary),
		0.25
	);
	outline: none;
}
// Success state border color
.form-check-input.is-valid
{
	border-color: map-get($theme-colors, "success");
}
// Success state focus ring
.form-check-input.is-valid:focus
{
	border-color: map-get($theme-colors, "success");
	box-shadow: 0 0 0 0.25rem rgba(
		red(map-get($theme-colors, "success")),
		green(map-get($theme-colors, "success")),
		blue(map-get($theme-colors, "success")),
		0.25
	);
	outline: none;
}
// Label text color when checkbox is valid (success)
.form-check-input.is-valid + .form-check-label
{
	color: map-get($theme-colors, "success");
}
// Validation success message styling (optional)
.valid-feedback
{
	color: map-get($theme-colors, "success");
	font-weight: 500;
	margin-top: 0.25rem;
	font-size: 0.875rem;
}

/**
* Invalided
* Checkbox/radio invalid state label coloring
*/
.form-check-input.is-invalid + .form-check-label
{
	color: map-get($theme-colors, "danger");
}
// Checkbox/radio invalid border color
.form-check-input.is-invalid
{
	border-color: map-get($theme-colors, "danger");
}
// Validation error messages styling
.invalid-feedback,
.help-block
{
	color: map-get($theme-colors, "danger");
	font-weight: 500;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}
// Error summary block style (optional)
.error-summary
{
	color: map-get($theme-colors, "danger");
	background-color: lighten(map-get($theme-colors, "danger"), 45%);
	border-left: 3px solid map-get($theme-colors, "danger");
	padding: 10px 20px;
	margin-bottom: 15px;
}
// Checkbox/radio invalid focus styles
.form-check-input.is-invalid:focus
{
	border-color: map-get($theme-colors, "danger");
	box-shadow: 0 0 0 0.25rem rgba(
		red(map-get($theme-colors, "danger")),
		green(map-get($theme-colors, "danger")),
		blue(map-get($theme-colors, "danger")),
		0.25
	);
	outline: none;
}

/***********************************************
* Pagination Style
***********************************************/
.pagination
{
	.page-link
	{
		color: map-get($theme-colors, "primary");
		border-color: map-get($theme-colors, "primary");
		background-color: transparent;
		
		&:hover, &:focus
		{
			color: map-get($theme-colors, "light");
			background-color: map-get($theme-colors, "primary");
			border-color: map-get($theme-colors, "primary");
			text-decoration: none;
			outline: 0;
			box-shadow: 0 0 0 0.25rem rgba(
				red(map-get($theme-colors, "primary")),
				green(map-get($theme-colors, "primary")),
				blue(map-get($theme-colors, "primary")),
				0.25
			);
		}
	}
	.page-item.active
	{
		.page-link
		{
			background-color: map-get($theme-colors, "primary");
			border-color: map-get($theme-colors, "primary");
			color: map-get($theme-colors-text, "primary");
			cursor: default;
			box-shadow: none;
			
			&:hover, &:focus
			{
				color: map-get($theme-colors-text, "primary");
				background-color: map-get($theme-colors, "primary");
				border-color: map-get($theme-colors, "primary");
			}
		}
	}
	.page-item.disabled
	{
		.page-link
		{
			color: map-get($theme-colors, "secondary");
			pointer-events: none;
			background-color: transparent;
			border-color: transparent;
		}
	}
}

/***********************************************
* Alert Base Style
***********************************************/
.alert
{
	position: relative;
	padding: 1rem 3rem 1rem 1rem;/* right padding for close */
	margin-bottom: 1rem;
	border: 1px solid transparent;// overridden below
	border-radius: 0.25rem;
	font-weight: 400;
	line-height: 1.5;
	color: inherit;
}
.alert .btn-close
{
	position: absolute;
	top: 0.50rem;// 0.75rem
	right: 1rem;
	padding: 0.75rem;
	z-index: 2;
}
.alert-primary
{
	background-color: $alert-bg-primary;
	border-color: $alert-border-primary;
	color: $alert-color-primary;
}
.alert-secondary
{
	background-color: $alert-bg-secondary;
	border-color: $alert-border-secondary;
	color: $alert-color-secondary;
}
.alert-success
{
	background-color: $alert-bg-success;
	border-color: $alert-border-success;
	color: $alert-color-success;
}
.alert-danger
{
	background-color: $alert-bg-danger;
	border-color: $alert-border-danger;
	color: $alert-color-danger;
}
.alert-warning
{
	background-color: $alert-bg-warning;
	border-color: $alert-border-warning;
	color: $alert-color-warning;
}
.alert-info
{
	background-color: $alert-bg-info;
	border-color: $alert-border-info;
	color: $alert-color-info;
}
.alert-light
{
	background-color: $alert-bg-light;
	border-color: $alert-border-light;
	color: $alert-color-light;
}
.alert-dark
{
	background-color: $alert-bg-dark;
	border-color: $alert-border-dark;
	color: $alert-color-dark;
}
```

the pagination color is not changing to the theme colors