/*-----------------------------------------------------------------------------
 * Color System CSS - Briar Oaks Fire Department Dashboard Theme
 * Complete color system with all classes for all colors
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
	/* Blue Colors */
	--blue: #012b5d;
	--blue-hover: #001f45;
	--blue-light: #1b3f71;
	--blue-light-hover: #355385;

	/* Peat Colors */
	--peat: #00381f;
	--peat-hover: #002a17;
	--peat-light: #1a4c33;
	--peat-light-hover: #346047;

	/* Red (Fire Red) */
	--red: #d9042b;
	--red-hover: #b00323;
	--red-light: #e6264c;
	--red-light-hover: #f04866;

	/* Maroon (Deep Red) */
	--maroon: #73020c;
	--maroon-hover: #5a0109;
	--maroon-light: #8d1a23;
	--maroon-light-hover: #a7343c;

	/* Yellow (Safety Yellow) */
	--yellow: #f2e205;
	--yellow-hover: #d9c904;
	--yellow-light: #f5e933;
	--yellow-light-hover: #f8f061;

	/* Gold (Warm Gold) */
	--gold: #f2b441;
	--gold-hover: #e09f2a;
	--gold-light: #f5c565;
	--gold-light-hover: #f8d689;

	/* Silver (Light Gray) */
	--silver: #bfbfbf;
	--silver-hover: #a6a6a6;
	--silver-light: #d9d9d9;
	--silver-light-hover: #ededed;

	/* Navy (Dark Navy) */
	--navy: #162440;
	--navy-hover: #0f1a30;
	--navy-light: #2d3a57;
	--navy-light-hover: #44506e;

	/* Accessibility Blue */
	--accessibility-blue: #006da3;
	--accessibility-blue-hover: #005580;
	--accessibility-blue-light: #1a7fb3;
	--accessibility-blue-light-hover: #3491c7;
}

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

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

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

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

html .btn-blue:focus,
html .btn-blue.focus {
	box-shadow: 0 0 0 3px rgba(1, 43, 93, 0.5);
	background-color: var(--blue);
	border-color: var(--blue);
}

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

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

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

html .btn-blue-light:focus,
html .btn-blue-light.focus {
	box-shadow: 0 0 0 3px rgba(27, 63, 113, 0.5);
	background-color: var(--blue-light);
	border-color: var(--blue-light);
}

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

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

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

html .btn-peat:focus,
html .btn-peat.focus {
	box-shadow: 0 0 0 3px rgba(0, 56, 31, 0.5);
	background-color: var(--peat);
	border-color: var(--peat);
}

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

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

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

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

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

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

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

html .btn-red:focus,
html .btn-red.focus {
	box-shadow: 0 0 0 3px rgba(217, 4, 43, 0.5);
	background-color: var(--red);
	border-color: var(--red);
}

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

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

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

html .btn-red-light:focus,
html .btn-red-light.focus {
	box-shadow: 0 0 0 3px rgba(230, 38, 76, 0.5);
	background-color: var(--red-light);
	border-color: var(--red-light);
}

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

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

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

html .btn-maroon:focus,
html .btn-maroon.focus {
	box-shadow: 0 0 0 3px rgba(115, 2, 12, 0.5);
	background-color: var(--maroon);
	border-color: var(--maroon);
}

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

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

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

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

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

/* Yellow */
html .btn-yellow {
	background-color: var(--yellow);
	border-color: var(--yellow);
	color: #000;
}

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

html .btn-yellow:focus,
html .btn-yellow.focus {
	box-shadow: 0 0 0 3px rgba(242, 226, 5, 0.5);
	background-color: var(--yellow);
	border-color: var(--yellow);
}

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

/* Yellow Light */
html .btn-yellow-light {
	background-color: var(--yellow-light);
	border-color: var(--yellow-light);
	color: #000;
}

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

html .btn-yellow-light:focus,
html .btn-yellow-light.focus {
	box-shadow: 0 0 0 3px rgba(245, 233, 51, 0.5);
	background-color: var(--yellow-light);
	border-color: var(--yellow-light);
}

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

/* Gold */
html .btn-gold {
	background-color: var(--gold);
	border-color: var(--gold);
	color: #000;
}

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

html .btn-gold:focus,
html .btn-gold.focus {
	box-shadow: 0 0 0 3px rgba(242, 180, 65, 0.5);
	background-color: var(--gold);
	border-color: var(--gold);
}

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

/* Gold Light */
html .btn-gold-light {
	background-color: var(--gold-light);
	border-color: var(--gold-light);
	color: #000;
}

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

html .btn-gold-light:focus,
html .btn-gold-light.focus {
	box-shadow: 0 0 0 3px rgba(245, 197, 101, 0.5);
	background-color: var(--gold-light);
	border-color: var(--gold-light);
}

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

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

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

html .btn-silver:focus,
html .btn-silver.focus {
	box-shadow: 0 0 0 3px rgba(191, 191, 191, 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: #000;
}

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

html .btn-silver-light:focus,
html .btn-silver-light.focus {
	box-shadow: 0 0 0 3px rgba(217, 217, 217, 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;
}

/* 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(22, 36, 64, 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(45, 58, 87, 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;
}

/* Accessibility Blue */
html .btn-accessibility-blue {
	background-color: var(--accessibility-blue);
	border-color: var(--accessibility-blue);
	color: #fff;
}

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

html .btn-accessibility-blue:focus,
html .btn-accessibility-blue.focus {
	box-shadow: 0 0 0 3px rgba(0, 109, 163, 0.5);
	background-color: var(--accessibility-blue);
	border-color: var(--accessibility-blue);
}

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

/* Accessibility Blue Light */
html .btn-accessibility-blue-light {
	background-color: var(--accessibility-blue-light);
	border-color: var(--accessibility-blue-light);
	color: #fff;
}

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

html .btn-accessibility-blue-light:focus,
html .btn-accessibility-blue-light.focus {
	box-shadow: 0 0 0 3px rgba(26, 127, 179, 0.5);
	background-color: var(--accessibility-blue-light);
	border-color: var(--accessibility-blue-light);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html .text-color-hover-gold-light:hover,
html .text-hover-gold-light:hover {
	color: var(--gold-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;
}

/* 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;
}

/* Accessibility Blue Text Colors */
html .heading-accessibility-blue,
html .lnk-accessibility-blue,
html .text-color-accessibility-blue,
html .text-accessibility-blue {
	color: var(--accessibility-blue) !important;
}

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

/* Accessibility Blue Light Text Colors */
html .heading-accessibility-blue-light,
html .lnk-accessibility-blue-light,
html .text-color-accessibility-blue-light,
html .text-accessibility-blue-light {
	color: var(--accessibility-blue-light) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

html .bg-gold-light,
html .background-color-gold-light {
	background-color: var(--gold-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-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-accessibility-blue,
html .background-color-accessibility-blue {
	background-color: var(--accessibility-blue) !important;
}

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

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

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

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

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

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

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

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

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

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

.badge-yellow {
	background: var(--yellow-hover);
	color: #000;
}

.badge-yellow-light {
	background: var(--yellow-light-hover);
	color: #000;
}

.badge-gold {
	background: var(--gold-hover);
	color: #000;
}

.badge-gold-light {
	background: var(--gold-light-hover);
	color: #000;
}

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

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

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

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

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

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

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

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

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

html .btn-outline-blue:focus,
html .btn-outline-blue.focus {
	box-shadow: 0 0 0 3px rgba(1, 43, 93, 0.5);
}

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

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

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

html .btn-outline-blue-light:focus,
html .btn-outline-blue-light.focus {
	box-shadow: 0 0 0 3px rgba(27, 63, 113, 0.5);
}

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

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

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

html .btn-outline-peat:focus,
html .btn-outline-peat.focus {
	box-shadow: 0 0 0 3px rgba(0, 56, 31, 0.5);
}

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

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

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

html .btn-outline-peat-light:focus,
html .btn-outline-peat-light.focus {
	box-shadow: 0 0 0 3px rgba(26, 76, 51, 0.5);
}

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

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

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

html .btn-outline-red:focus,
html .btn-outline-red.focus {
	box-shadow: 0 0 0 3px rgba(217, 4, 43, 0.5);
}

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

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

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

html .btn-outline-red-light:focus,
html .btn-outline-red-light.focus {
	box-shadow: 0 0 0 3px rgba(230, 38, 76, 0.5);
}

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

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

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

html .btn-outline-maroon:focus,
html .btn-outline-maroon.focus {
	box-shadow: 0 0 0 3px rgba(115, 2, 12, 0.5);
}

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

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

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

html .btn-outline-maroon-light:focus,
html .btn-outline-maroon-light.focus {
	box-shadow: 0 0 0 3px rgba(141, 26, 35, 0.5);
}

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

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

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

html .btn-outline-yellow:focus,
html .btn-outline-yellow.focus {
	box-shadow: 0 0 0 3px rgba(242, 226, 5, 0.5);
}

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

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

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

html .btn-outline-yellow-light:focus,
html .btn-outline-yellow-light.focus {
	box-shadow: 0 0 0 3px rgba(245, 233, 51, 0.5);
}

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

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

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

html .btn-outline-gold:focus,
html .btn-outline-gold.focus {
	box-shadow: 0 0 0 3px rgba(242, 180, 65, 0.5);
}

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

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

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

html .btn-outline-gold-light:focus,
html .btn-outline-gold-light.focus {
	box-shadow: 0 0 0 3px rgba(245, 197, 101, 0.5);
}

html .btn-outline-gold-light.disabled,
html .btn-outline-gold-light:disabled {
	color: var(--gold-light);
	background-color: transparent;
	border-color: var(--gold-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: #000;
}

html .btn-outline-silver:focus,
html .btn-outline-silver.focus {
	box-shadow: 0 0 0 3px rgba(191, 191, 191, 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: #000;
}

html .btn-outline-silver-light:focus,
html .btn-outline-silver-light.focus {
	box-shadow: 0 0 0 3px rgba(217, 217, 217, 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;
}

/* 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(22, 36, 64, 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(45, 58, 87, 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;
}

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

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

html .btn-outline-accessibility-blue:focus,
html .btn-outline-accessibility-blue.focus {
	box-shadow: 0 0 0 3px rgba(0, 109, 163, 0.5);
}

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

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

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

html .btn-outline-accessibility-blue-light:focus,
html .btn-outline-accessibility-blue-light.focus {
	box-shadow: 0 0 0 3px rgba(26, 127, 179, 0.5);
}

html .btn-outline-accessibility-blue-light.disabled,
html .btn-outline-accessibility-blue-light:disabled {
	color: var(--accessibility-blue-light);
	background-color: transparent;
	border-color: var(--accessibility-blue-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-blue {
	color: #fff;
	background-color: var(--blue);
	border-color: var(--blue);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.alert-yellow {
	color: #000;
	background-color: var(--yellow);
	border-color: var(--yellow);
}

.alert-yellow .alert-link {
	color: #000;
	text-decoration: underline;
}

.alert-yellow-light {
	color: #000;
	background-color: var(--yellow-light);
	border-color: var(--yellow-light);
}

.alert-yellow-light .alert-link {
	color: #000;
	text-decoration: underline;
}

.alert-gold {
	color: #000;
	background-color: var(--gold);
	border-color: var(--gold);
}

.alert-gold .alert-link {
	color: #000;
	text-decoration: underline;
}

.alert-gold-light {
	color: #000;
	background-color: var(--gold-light);
	border-color: var(--gold-light);
}

.alert-gold-light .alert-link {
	color: #000;
	text-decoration: underline;
}

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

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

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

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

.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-accessibility-blue {
	color: #fff;
	background-color: var(--accessibility-blue);
	border-color: var(--accessibility-blue);
}

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

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

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