/*-----------------------------------------------------------------------------
 * Color System CSS
 * This file contains all color-related styles organized by component type
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
	--navy: #003e79; /* Navy Blue */
	--navy-hover: #004d94;
	--navy-light: #1a5691;
	--navy-light-hover: #336fa9;

	--scarlet: #db1924; /* Scarlet Red */
	--scarlet-hover: #e0333c;
	--scarlet-light: #e54d55;
	--scarlet-light-hover: #ea676e;

	--sky: #87ceeb; /* Sky Blue */
	--sky-hover: #9dd6ef;
	--sky-light: #b3def3;
	--sky-light-hover: #c9e6f7;

	--silver: #b8c3ca; /* Silver Gray */
	--silver-hover: #c4ccd2;
	--silver-light: #d0d5da;
	--silver-light-hover: #dcdee2;

	--royal: #235a90; /* Royal Blue */
	--royal-hover: #2b6ba8;
	--royal-light: #3d7db8;
	--royal-light-hover: #5890c8;

	--taupe: #734f2f; /* Taupe */
	--taupe-hover: #8a6345;
	--taupe-light: #a1775b;
	--taupe-light-hover: #b88b71;

	--beige: #ccbca1; /* Beige */
	--beige-hover: #d4c7b0;
	--beige-light: #dcd2bf;
	--beige-light-hover: #e4ddce;
}

/*-----------------------------------------------------------------------------
 * Buttons
 *---------------------------------------------------------------------------*/

/* Default Button Structure */
[class*="btn-"] {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	transition: all 0.2s ease-in-out;
}

/* Navy */
html .btn-navy {
	background-color: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

html .btn-navy:hover,
html .btn-navy.hover {
	background-color: var(--navy-hover);
	border-color: var(--navy-hover);
	color: #fff;
}

html .btn-navy:focus,
html .btn-navy.focus {
	box-shadow: 0 0 0 3px rgba(0, 62, 121, 0.5);
	background-color: var(--navy);
	border-color: var(--navy);
}

html .btn-navy.disabled,
html .btn-navy:disabled {
	background-color: var(--navy);
	border-color: var(--navy);
	opacity: 0.65;
}

/* Navy Light */
html .btn-navy-light {
	background-color: var(--navy-light);
	border-color: var(--navy-light);
	color: #fff;
}

html .btn-navy-light:hover,
html .btn-navy-light.hover {
	background-color: var(--navy-light-hover);
	border-color: var(--navy-light-hover);
	color: #fff;
}

html .btn-navy-light:focus,
html .btn-navy-light.focus {
	box-shadow: 0 0 0 3px rgba(26, 86, 145, 0.5);
	background-color: var(--navy-light);
	border-color: var(--navy-light);
}

html .btn-navy-light.disabled,
html .btn-navy-light:disabled {
	background-color: var(--navy-light);
	border-color: var(--navy-light);
	opacity: 0.65;
}

/* Scarlet */
html .btn-scarlet {
	background-color: var(--scarlet);
	border-color: var(--scarlet);
	color: #fff;
}

html .btn-scarlet:hover,
html .btn-scarlet.hover {
	background-color: var(--scarlet-hover);
	border-color: var(--scarlet-hover);
	color: #fff;
}

html .btn-scarlet:focus,
html .btn-scarlet.focus {
	box-shadow: 0 0 0 3px rgba(219, 25, 36, 0.5);
	background-color: var(--scarlet);
	border-color: var(--scarlet);
}

html .btn-scarlet.disabled,
html .btn-scarlet:disabled {
	background-color: var(--scarlet);
	border-color: var(--scarlet);
	opacity: 0.65;
}

/* Scarlet Light */
html .btn-scarlet-light {
	background-color: var(--scarlet-light);
	border-color: var(--scarlet-light);
	color: #fff;
}

html .btn-scarlet-light:hover,
html .btn-scarlet-light.hover {
	background-color: var(--scarlet-light-hover);
	border-color: var(--scarlet-light-hover);
	color: #fff;
}

html .btn-scarlet-light:focus,
html .btn-scarlet-light.focus {
	box-shadow: 0 0 0 3px rgba(229, 77, 85, 0.5);
	background-color: var(--scarlet-light);
	border-color: var(--scarlet-light);
}

html .btn-scarlet-light.disabled,
html .btn-scarlet-light:disabled {
	background-color: var(--scarlet-light);
	border-color: var(--scarlet-light);
	opacity: 0.65;
}

/* Sky */
html .btn-sky {
	background-color: var(--sky);
	border-color: var(--sky);
	color: #333;
}

html .btn-sky:hover,
html .btn-sky.hover {
	background-color: var(--sky-hover);
	border-color: var(--sky-hover);
	color: #333;
}

html .btn-sky:focus,
html .btn-sky.focus {
	box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.5);
	background-color: var(--sky);
	border-color: var(--sky);
}

html .btn-sky.disabled,
html .btn-sky:disabled {
	background-color: var(--sky);
	border-color: var(--sky);
	opacity: 0.65;
}

/* Sky Light */
html .btn-sky-light {
	background-color: var(--sky-light);
	border-color: var(--sky-light);
	color: #333;
}

html .btn-sky-light:hover,
html .btn-sky-light.hover {
	background-color: var(--sky-light-hover);
	border-color: var(--sky-light-hover);
	color: #333;
}

html .btn-sky-light:focus,
html .btn-sky-light.focus {
	box-shadow: 0 0 0 3px rgba(179, 222, 243, 0.5);
	background-color: var(--sky-light);
	border-color: var(--sky-light);
}

html .btn-sky-light.disabled,
html .btn-sky-light:disabled {
	background-color: var(--sky-light);
	border-color: var(--sky-light);
	opacity: 0.65;
}

/* Silver */
html .btn-silver {
	background-color: var(--silver);
	border-color: var(--silver);
	color: #333;
}

html .btn-silver:hover,
html .btn-silver.hover {
	background-color: var(--silver-hover);
	border-color: var(--silver-hover);
	color: #333;
}

html .btn-silver:focus,
html .btn-silver.focus {
	box-shadow: 0 0 0 3px rgba(184, 195, 202, 0.5);
	background-color: var(--silver);
	border-color: var(--silver);
}

html .btn-silver.disabled,
html .btn-silver:disabled {
	background-color: var(--silver);
	border-color: var(--silver);
	opacity: 0.65;
}

/* Silver Light */
html .btn-silver-light {
	background-color: var(--silver-light);
	border-color: var(--silver-light);
	color: #333;
}

html .btn-silver-light:hover,
html .btn-silver-light.hover {
	background-color: var(--silver-light-hover);
	border-color: var(--silver-light-hover);
	color: #333;
}

html .btn-silver-light:focus,
html .btn-silver-light.focus {
	box-shadow: 0 0 0 3px rgba(208, 213, 218, 0.5);
	background-color: var(--silver-light);
	border-color: var(--silver-light);
}

html .btn-silver-light.disabled,
html .btn-silver-light:disabled {
	background-color: var(--silver-light);
	border-color: var(--silver-light);
	opacity: 0.65;
}

/* Royal */
html .btn-royal {
	background-color: var(--royal);
	border-color: var(--royal);
	color: #fff;
}

html .btn-royal:hover,
html .btn-royal.hover {
	background-color: var(--royal-hover);
	border-color: var(--royal-hover);
	color: #fff;
}

html .btn-royal:focus,
html .btn-royal.focus {
	box-shadow: 0 0 0 3px rgba(35, 90, 144, 0.5);
	background-color: var(--royal);
	border-color: var(--royal);
}

html .btn-royal.disabled,
html .btn-royal:disabled {
	background-color: var(--royal);
	border-color: var(--royal);
	opacity: 0.65;
}

/* Royal Light */
html .btn-royal-light {
	background-color: var(--royal-light);
	border-color: var(--royal-light);
	color: #fff;
}

html .btn-royal-light:hover,
html .btn-royal-light.hover {
	background-color: var(--royal-light-hover);
	border-color: var(--royal-light-hover);
	color: #fff;
}

html .btn-royal-light:focus,
html .btn-royal-light.focus {
	box-shadow: 0 0 0 3px rgba(61, 125, 184, 0.5);
	background-color: var(--royal-light);
	border-color: var(--royal-light);
}

html .btn-royal-light.disabled,
html .btn-royal-light:disabled {
	background-color: var(--royal-light);
	border-color: var(--royal-light);
	opacity: 0.65;
}

/* Taupe */
html .btn-taupe {
	background-color: var(--taupe);
	border-color: var(--taupe);
	color: #fff;
}

html .btn-taupe:hover,
html .btn-taupe.hover {
	background-color: var(--taupe-hover);
	border-color: var(--taupe-hover);
	color: #fff;
}

html .btn-taupe:focus,
html .btn-taupe.focus {
	box-shadow: 0 0 0 3px rgba(170, 148, 132, 0.5);
	background-color: var(--taupe);
	border-color: var(--taupe);
}

html .btn-taupe.disabled,
html .btn-taupe:disabled {
	background-color: var(--taupe);
	border-color: var(--taupe);
	opacity: 0.65;
}

/* Taupe Light */
html .btn-taupe-light {
	background-color: var(--taupe-light);
	border-color: var(--taupe-light);
	color: #333;
}

html .btn-taupe-light:hover,
html .btn-taupe-light.hover {
	background-color: var(--taupe-light-hover);
	border-color: var(--taupe-light-hover);
	color: #333;
}

html .btn-taupe-light:focus,
html .btn-taupe-light.focus {
	box-shadow: 0 0 0 3px rgba(194, 178, 168, 0.5);
	background-color: var(--taupe-light);
	border-color: var(--taupe-light);
}

html .btn-taupe-light.disabled,
html .btn-taupe-light:disabled {
	background-color: var(--taupe-light);
	border-color: var(--taupe-light);
	opacity: 0.65;
}

/* Beige */
html .btn-beige {
	background-color: var(--beige);
	border-color: var(--beige);
	color: #333;
}

html .btn-beige:hover,
html .btn-beige.hover {
	background-color: var(--beige-hover);
	border-color: var(--beige-hover);
	color: #333;
}

html .btn-beige:focus,
html .btn-beige.focus {
	box-shadow: 0 0 0 3px rgba(204, 188, 161, 0.5);
	background-color: var(--beige);
	border-color: var(--beige);
}

html .btn-beige.disabled,
html .btn-beige:disabled {
	background-color: var(--beige);
	border-color: var(--beige);
	opacity: 0.65;
}

/* Beige Light */
html .btn-beige-light {
	background-color: var(--beige-light);
	border-color: var(--beige-light);
	color: #333;
}

html .btn-beige-light:hover,
html .btn-beige-light.hover {
	background-color: var(--beige-light-hover);
	border-color: var(--beige-light-hover);
	color: #333;
}

html .btn-beige-light:focus,
html .btn-beige-light.focus {
	box-shadow: 0 0 0 3px rgba(220, 210, 191, 0.5);
	background-color: var(--beige-light);
	border-color: var(--beige-light);
}

html .btn-beige-light.disabled,
html .btn-beige-light:disabled {
	background-color: var(--beige-light);
	border-color: var(--beige-light);
	opacity: 0.65;
}

/*-----------------------------------------------------------------------------
 * Text Colors
 *---------------------------------------------------------------------------*/

/* Navy Text Colors */
html .heading-navy,
html .lnk-navy,
html .text-color-navy,
html .text-navy {
	color: var(--navy) !important;
}

html .text-color-hover-navy:hover,
html .text-hover-navy:hover {
	color: var(--navy) !important;
}

/* Navy Light Text Colors */
html .heading-navy-light,
html .lnk-navy-light,
html .text-color-navy-light,
html .text-navy-light {
	color: var(--navy-light) !important;
}

html .text-color-hover-navy-light:hover,
html .text-hover-navy-light:hover {
	color: var(--navy-light) !important;
}

/* Scarlet Text Colors */
html .heading-scarlet,
html .lnk-scarlet,
html .text-color-scarlet,
html .text-scarlet {
	color: var(--scarlet) !important;
}

html .text-color-hover-scarlet:hover,
html .text-hover-scarlet:hover {
	color: var(--scarlet) !important;
}

/* Scarlet Light Text Colors */
html .heading-scarlet-light,
html .lnk-scarlet-light,
html .text-color-scarlet-light,
html .text-scarlet-light {
	color: var(--scarlet-light) !important;
}

html .text-color-hover-scarlet-light:hover,
html .text-hover-scarlet-light:hover {
	color: var(--scarlet-light) !important;
}

/* Sky Text Colors */
html .heading-sky,
html .lnk-sky,
html .text-color-sky,
html .text-sky {
	color: var(--sky) !important;
}

html .text-color-hover-sky:hover,
html .text-hover-sky:hover {
	color: var(--sky) !important;
}

/* Sky Light Text Colors */
html .heading-sky-light,
html .lnk-sky-light,
html .text-color-sky-light,
html .text-sky-light {
	color: var(--sky-light) !important;
}

html .text-color-hover-sky-light:hover,
html .text-hover-sky-light:hover {
	color: var(--sky-light) !important;
}

/* Silver Text Colors */
html .heading-silver,
html .lnk-silver,
html .text-color-silver,
html .text-silver {
	color: var(--silver) !important;
}

html .text-color-hover-silver:hover,
html .text-hover-silver:hover {
	color: var(--silver) !important;
}

/* Silver Light Text Colors */
html .heading-silver-light,
html .lnk-silver-light,
html .text-color-silver-light,
html .text-silver-light {
	color: var(--silver-light) !important;
}

html .text-color-hover-silver-light:hover,
html .text-hover-silver-light:hover {
	color: var(--silver-light) !important;
}

/* Royal Text Colors */
html .heading-royal,
html .lnk-royal,
html .text-color-royal,
html .text-royal {
	color: var(--royal) !important;
}

html .text-color-hover-royal:hover,
html .text-hover-royal:hover {
	color: var(--royal) !important;
}

/* Royal Light Text Colors */
html .heading-royal-light,
html .lnk-royal-light,
html .text-color-royal-light,
html .text-royal-light {
	color: var(--royal-light) !important;
}

html .text-color-hover-royal-light:hover,
html .text-hover-royal-light:hover {
	color: var(--royal-light) !important;
}

/* Taupe Text Colors */
html .heading-taupe,
html .lnk-taupe,
html .text-color-taupe,
html .text-taupe {
	color: var(--taupe) !important;
}

html .text-color-hover-taupe:hover,
html .text-hover-taupe:hover {
	color: var(--taupe) !important;
}

/* Taupe Light Text Colors */
html .heading-taupe-light,
html .lnk-taupe-light,
html .text-color-taupe-light,
html .text-taupe-light {
	color: var(--taupe-light) !important;
}

html .text-color-hover-taupe-light:hover,
html .text-hover-taupe-light:hover {
	color: var(--taupe-light) !important;
}

/* Beige Text Colors */
html .heading-beige,
html .lnk-beige,
html .text-color-beige,
html .text-beige {
	color: var(--beige) !important;
}

html .text-color-hover-beige:hover,
html .text-hover-beige:hover {
	color: var(--beige) !important;
}

/* Beige Light Text Colors */
html .heading-beige-light,
html .lnk-beige-light,
html .text-color-beige-light,
html .text-beige-light {
	color: var(--beige-light) !important;
}

html .text-color-hover-beige-light:hover,
html .text-hover-beige-light:hover {
	color: var(--beige-light) !important;
}

/*-----------------------------------------------------------------------------
 * Background Colors
 *---------------------------------------------------------------------------*/

html .bg-navy,
html .background-color-navy {
	background-color: var(--navy) !important;
}

html .bg-navy-light,
html .background-color-navy-light {
	background-color: var(--navy-light) !important;
}

html .bg-scarlet,
html .background-color-scarlet {
	background-color: var(--scarlet) !important;
}

html .bg-scarlet-light,
html .background-color-scarlet-light {
	background-color: var(--scarlet-light) !important;
}

html .bg-sky,
html .background-color-sky {
	background-color: var(--sky) !important;
}

html .bg-sky-light,
html .background-color-sky-light {
	background-color: var(--sky-light) !important;
}

html .bg-silver,
html .background-color-silver {
	background-color: var(--silver) !important;
}

html .bg-silver-light,
html .background-color-silver-light {
	background-color: var(--silver-light) !important;
}

html .bg-royal,
html .background-color-royal {
	background-color: var(--royal) !important;
}

html .bg-royal-light,
html .background-color-royal-light {
	background-color: var(--royal-light) !important;
}

html .bg-taupe,
html .background-color-taupe {
	background-color: var(--taupe) !important;
}

html .bg-taupe-light,
html .background-color-taupe-light {
	background-color: var(--taupe-light) !important;
}

html .bg-beige,
html .background-color-beige {
	background-color: var(--beige) !important;
}

html .bg-beige-light,
html .background-color-beige-light {
	background-color: var(--beige-light) !important;
}

/*-----------------------------------------------------------------------------
 * Badges
 *---------------------------------------------------------------------------*/

.badge-navy {
	background: var(--navy-hover);
	color: #fff;
}

.badge-navy-light {
	background: var(--navy-light-hover);
	color: #fff;
}

.badge-scarlet {
	background: var(--scarlet-hover);
	color: #fff;
}

.badge-scarlet-light {
	background: var(--scarlet-light-hover);
	color: #fff;
}

.badge-sky {
	background: var(--sky-hover);
	color: #333;
}

.badge-sky-light {
	background: var(--sky-light-hover);
	color: #333;
}

.badge-silver {
	background: var(--silver-hover);
	color: #333;
}

.badge-silver-light {
	background: var(--silver-light-hover);
	color: #333;
}

.badge-royal {
	background: var(--royal-hover);
	color: #fff;
}

.badge-royal-light {
	background: var(--royal-light-hover);
	color: #fff;
}

.badge-taupe {
	background: var(--taupe-hover);
	color: #fff;
}

.badge-taupe-light {
	background: var(--taupe-light-hover);
	color: #333;
}

.badge-beige {
	background: var(--beige-hover);
	color: #333;
}

.badge-beige-light {
	background: var(--beige-light-hover);
	color: #333;
}

/*-----------------------------------------------------------------------------
 * Outline Buttons
 *---------------------------------------------------------------------------*/

/* Navy Outline */
html .btn-outline-navy {
	color: var(--navy);
	border-color: var(--navy);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-navy:hover,
html .btn-outline-navy.hover {
	background-color: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

html .btn-outline-navy:focus,
html .btn-outline-navy.focus {
	box-shadow: 0 0 0 3px rgba(0, 62, 121, 0.5);
}

html .btn-outline-navy.disabled,
html .btn-outline-navy:disabled {
	color: var(--navy);
	background-color: transparent;
	border-color: var(--navy);
	opacity: 0.65;
}

/* Navy Light Outline */
html .btn-outline-navy-light {
	color: var(--navy-light);
	border-color: var(--navy-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-navy-light:hover,
html .btn-outline-navy-light.hover {
	background-color: var(--navy-light);
	border-color: var(--navy-light);
	color: #fff;
}

html .btn-outline-navy-light:focus,
html .btn-outline-navy-light.focus {
	box-shadow: 0 0 0 3px rgba(26, 86, 145, 0.5);
}

html .btn-outline-navy-light.disabled,
html .btn-outline-navy-light:disabled {
	color: var(--navy-light);
	background-color: transparent;
	border-color: var(--navy-light);
	opacity: 0.65;
}

/* Scarlet Outline */
html .btn-outline-scarlet {
	color: var(--scarlet);
	border-color: var(--scarlet);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-scarlet:hover,
html .btn-outline-scarlet.hover {
	background-color: var(--scarlet);
	border-color: var(--scarlet);
	color: #fff;
}

html .btn-outline-scarlet:focus,
html .btn-outline-scarlet.focus {
	box-shadow: 0 0 0 3px rgba(219, 25, 36, 0.5);
}

html .btn-outline-scarlet.disabled,
html .btn-outline-scarlet:disabled {
	color: var(--scarlet);
	background-color: transparent;
	border-color: var(--scarlet);
	opacity: 0.65;
}

/* Scarlet Light Outline */
html .btn-outline-scarlet-light {
	color: var(--scarlet-light);
	border-color: var(--scarlet-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-scarlet-light:hover,
html .btn-outline-scarlet-light.hover {
	background-color: var(--scarlet-light);
	border-color: var(--scarlet-light);
	color: #fff;
}

html .btn-outline-scarlet-light:focus,
html .btn-outline-scarlet-light.focus {
	box-shadow: 0 0 0 3px rgba(229, 77, 85, 0.5);
}

html .btn-outline-scarlet-light.disabled,
html .btn-outline-scarlet-light:disabled {
	color: var(--scarlet-light);
	background-color: transparent;
	border-color: var(--scarlet-light);
	opacity: 0.65;
}

/* Sky Outline */
html .btn-outline-sky {
	color: var(--sky);
	border-color: var(--sky);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-sky:hover,
html .btn-outline-sky.hover {
	background-color: var(--sky);
	border-color: var(--sky);
	color: #333;
}

html .btn-outline-sky:focus,
html .btn-outline-sky.focus {
	box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.5);
}

html .btn-outline-sky.disabled,
html .btn-outline-sky:disabled {
	color: var(--sky);
	background-color: transparent;
	border-color: var(--sky);
	opacity: 0.65;
}

/* Sky Light Outline */
html .btn-outline-sky-light {
	color: var(--sky-light);
	border-color: var(--sky-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-sky-light:hover,
html .btn-outline-sky-light.hover {
	background-color: var(--sky-light);
	border-color: var(--sky-light);
	color: #333;
}

html .btn-outline-sky-light:focus,
html .btn-outline-sky-light.focus {
	box-shadow: 0 0 0 3px rgba(179, 222, 243, 0.5);
}

html .btn-outline-sky-light.disabled,
html .btn-outline-sky-light:disabled {
	color: var(--sky-light);
	background-color: transparent;
	border-color: var(--sky-light);
	opacity: 0.65;
}

/* Silver Outline */
html .btn-outline-silver {
	color: var(--silver);
	border-color: var(--silver);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-silver:hover,
html .btn-outline-silver.hover {
	background-color: var(--silver);
	border-color: var(--silver);
	color: #333;
}

html .btn-outline-silver:focus,
html .btn-outline-silver.focus {
	box-shadow: 0 0 0 3px rgba(184, 195, 202, 0.5);
}

html .btn-outline-silver.disabled,
html .btn-outline-silver:disabled {
	color: var(--silver);
	background-color: transparent;
	border-color: var(--silver);
	opacity: 0.65;
}

/* Silver Light Outline */
html .btn-outline-silver-light {
	color: var(--silver-light);
	border-color: var(--silver-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-silver-light:hover,
html .btn-outline-silver-light.hover {
	background-color: var(--silver-light);
	border-color: var(--silver-light);
	color: #333;
}

html .btn-outline-silver-light:focus,
html .btn-outline-silver-light.focus {
	box-shadow: 0 0 0 3px rgba(208, 213, 218, 0.5);
}

html .btn-outline-silver-light.disabled,
html .btn-outline-silver-light:disabled {
	color: var(--silver-light);
	background-color: transparent;
	border-color: var(--silver-light);
	opacity: 0.65;
}

/* Royal Outline */
html .btn-outline-royal {
	color: var(--royal);
	border-color: var(--royal);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-royal:hover,
html .btn-outline-royal.hover {
	background-color: var(--royal);
	border-color: var(--royal);
	color: #fff;
}

html .btn-outline-royal:focus,
html .btn-outline-royal.focus {
	box-shadow: 0 0 0 3px rgba(35, 90, 144, 0.5);
}

html .btn-outline-royal.disabled,
html .btn-outline-royal:disabled {
	color: var(--royal);
	background-color: transparent;
	border-color: var(--royal);
	opacity: 0.65;
}

/* Royal Light Outline */
html .btn-outline-royal-light {
	color: var(--royal-light);
	border-color: var(--royal-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-royal-light:hover,
html .btn-outline-royal-light.hover {
	background-color: var(--royal-light);
	border-color: var(--royal-light);
	color: #fff;
}

html .btn-outline-royal-light:focus,
html .btn-outline-royal-light.focus {
	box-shadow: 0 0 0 3px rgba(61, 125, 184, 0.5);
}

html .btn-outline-royal-light.disabled,
html .btn-outline-royal-light:disabled {
	color: var(--royal-light);
	background-color: transparent;
	border-color: var(--royal-light);
	opacity: 0.65;
}

/* Taupe Outline */
html .btn-outline-taupe {
	color: var(--taupe);
	border-color: var(--taupe);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-taupe:hover,
html .btn-outline-taupe.hover {
	background-color: var(--taupe);
	border-color: var(--taupe);
	color: #fff;
}

html .btn-outline-taupe:focus,
html .btn-outline-taupe.focus {
	box-shadow: 0 0 0 3px rgba(170, 148, 132, 0.5);
}

html .btn-outline-taupe.disabled,
html .btn-outline-taupe:disabled {
	color: var(--taupe);
	background-color: transparent;
	border-color: var(--taupe);
	opacity: 0.65;
}

/* Taupe Light Outline */
html .btn-outline-taupe-light {
	color: var(--taupe-light);
	border-color: var(--taupe-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-taupe-light:hover,
html .btn-outline-taupe-light.hover {
	background-color: var(--taupe-light);
	border-color: var(--taupe-light);
	color: #333;
}

html .btn-outline-taupe-light:focus,
html .btn-outline-taupe-light.focus {
	box-shadow: 0 0 0 3px rgba(194, 178, 168, 0.5);
}

html .btn-outline-taupe-light.disabled,
html .btn-outline-taupe-light:disabled {
	color: var(--taupe-light);
	background-color: transparent;
	border-color: var(--taupe-light);
	opacity: 0.65;
}

/* Beige Outline */
html .btn-outline-beige {
	color: var(--beige);
	border-color: var(--beige);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-beige:hover,
html .btn-outline-beige.hover {
	background-color: var(--beige);
	border-color: var(--beige);
	color: #333;
}

html .btn-outline-beige:focus,
html .btn-outline-beige.focus {
	box-shadow: 0 0 0 3px rgba(204, 188, 161, 0.5);
}

html .btn-outline-beige.disabled,
html .btn-outline-beige:disabled {
	color: var(--beige);
	background-color: transparent;
	border-color: var(--beige);
	opacity: 0.65;
}

/* Beige Light Outline */
html .btn-outline-beige-light {
	color: var(--beige-light);
	border-color: var(--beige-light);
	background-color: transparent;
	border-width: 2px;
	padding: 7.728px 14.928px;
	padding: 0.483rem 0.933rem;
}

html .btn-outline-beige-light:hover,
html .btn-outline-beige-light.hover {
	background-color: var(--beige-light);
	border-color: var(--beige-light);
	color: #333;
}

html .btn-outline-beige-light:focus,
html .btn-outline-beige-light.focus {
	box-shadow: 0 0 0 3px rgba(220, 210, 191, 0.5);
}

html .btn-outline-beige-light.disabled,
html .btn-outline-beige-light:disabled {
	color: var(--beige-light);
	background-color: transparent;
	border-color: var(--beige-light);
	opacity: 0.65;
}

/*-----------------------------------------------------------------------------
 * Button Size Variations
 *---------------------------------------------------------------------------*/

html [class*="btn-outline-"].btn-xs {
	padding: 2.4px 8px;
	padding: 0.15rem 0.5rem;
}

html [class*="btn-outline-"].btn-sm {
	padding: 4px 10.4px;
	padding: 0.25rem 0.65rem;
}

html [class*="btn-outline-"].btn-lg {
	padding: 7.2px 16px;
	padding: 0.45rem 1rem;
}

html [class*="btn-outline-"].btn-xl {
	padding: 12px 32px;
	padding: 0.75rem 2rem;
}

html [class*="btn-outline-"].btn-outline-thin {
	border-width: 1px;
}

/*-----------------------------------------------------------------------------
 * Alerts
 *---------------------------------------------------------------------------*/

.alert-navy {
	color: #fff;
	background-color: var(--navy);
	border-color: var(--navy);
}

.alert-navy .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-navy-light {
	color: #fff;
	background-color: var(--navy-light);
	border-color: var(--navy-light);
}

.alert-navy-light .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-scarlet {
	color: #fff;
	background-color: var(--scarlet);
	border-color: var(--scarlet);
}

.alert-scarlet .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-scarlet-light {
	color: #fff;
	background-color: var(--scarlet-light);
	border-color: var(--scarlet-light);
}

.alert-scarlet-light .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-sky {
	color: #333;
	background-color: var(--sky);
	border-color: var(--sky);
}

.alert-sky .alert-link {
	color: #333;
	text-decoration: underline;
}

.alert-sky-light {
	color: #333;
	background-color: var(--sky-light);
	border-color: var(--sky-light);
}

.alert-sky-light .alert-link {
	color: #333;
	text-decoration: underline;
}

.alert-silver {
	color: #333;
	background-color: var(--silver);
	border-color: var(--silver);
}

.alert-silver .alert-link {
	color: #333;
	text-decoration: underline;
}

.alert-silver-light {
	color: #333;
	background-color: var(--silver-light);
	border-color: var(--silver-light);
}

.alert-silver-light .alert-link {
	color: #333;
	text-decoration: underline;
}

.alert-royal {
	color: #fff;
	background-color: var(--royal);
	border-color: var(--royal);
}

.alert-royal .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-royal-light {
	color: #fff;
	background-color: var(--royal-light);
	border-color: var(--royal-light);
}

.alert-royal-light .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-taupe {
	color: #fff;
	background-color: var(--taupe);
	border-color: var(--taupe);
}

.alert-taupe .alert-link {
	color: #fff;
	text-decoration: underline;
}

.alert-taupe-light {
	color: #333;
	background-color: var(--taupe-light);
	border-color: var(--taupe-light);
}

.alert-taupe-light .alert-link {
	color: #333;
	text-decoration: underline;
}

.alert-beige {
	color: #333;
	background-color: var(--beige);
	border-color: var(--beige);
}

.alert-beige .alert-link {
	color: #333;
	text-decoration: underline;
}

.alert-beige-light {
	color: #333;
	background-color: var(--beige-light);
	border-color: var(--beige-light);
}

.alert-beige-light .alert-link {
	color: #333;
	text-decoration: underline;
}