/*-----------------------------------------------------------------------------
 * Color System CSS - Gold Belt Byway Dashboard - Marine Corps Theme
 * Official USMC colors with tactical and ceremonial palette
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
	--desert: #958671;
	--desert-hover: #79695d;
	--desert-light: #a99a85;
	--desert-light-hover: #bdae99;

	--clay: #896533;
	--clay-hover: #6d5129;
	--clay-light: #9d7947;
	--clay-light-hover: #b18d5b;

	--cover: #66652f;
	--cover-hover: #545329;
	--cover-light: #7a7943;
	--cover-light-hover: #8e8d57;

	--mud: #54301a;
	--mud-hover: #422614;
	--mud-light: #68442e;
	--mud-light-hover: #7c5842;

	--moss: #455a21;
	--moss-hover: #374819;
	--moss-light: #596e35;
	--moss-light-hover: #6d8249;

	--peat: #00381f;
	--peat-hover: #002a17;
	--peat-light: #1a4c33;
	--peat-light-hover: #346047;

	--yellow: #fcb040;
	--yellow-hover: #e09424;
	--yellow-light: #ffc45a;
	--yellow-light-hover: #ffd874;

	--silver: #afb7ba;
	--silver-hover: #939b9e;
	--silver-light: #c3cbce;
	--silver-light-hover: #d7dfe2;

	--red: #c51230;
	--red-hover: #a30e28;
	--red-light: #d9324a;
	--red-light-hover: #ed5264;

	--gold: #9e8938;
	--gold-hover: #826d2c;
	--gold-light: #cfbf7c;
	--gold-light-hover: #e7cf70;

	--blue: #012b5d;
	--blue-hover: #001f45;
	--blue-light: #1b3f71;
	--blue-light-hover: #355385;
}

/*-----------------------------------------------------------------------------
 * 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(0, 47, 108, 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(26, 73, 128, 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;
}

/* 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(204, 27, 44, 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(220, 59, 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;
}

/* 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(178, 177, 172, 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(198, 197, 192, 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;
}

/* 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(170, 150, 86, 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(190, 170, 106, 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;
}

/* 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(255, 199, 31, 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(255, 209, 79, 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;
}

/* 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(36, 92, 60, 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(56, 112, 80, 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html .btn-cover-light:focus,
html .btn-cover-light.focus {
	box-shadow: 0 0 0 3px rgba(159, 135, 105, 0.5);
	background-color: var(--cover-light);
	border-color: var(--cover-light);
}

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

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

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

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

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

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

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

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

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

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

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

html .btn-clay:focus,
html .btn-clay.focus {
	box-shadow: 0 0 0 3px rgba(160, 140, 108, 0.5);
	background-color: var(--clay);
	border-color: var(--clay);
}

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

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

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

html .btn-clay-light:focus,
html .btn-clay-light.focus {
	box-shadow: 0 0 0 3px rgba(180, 160, 128, 0.5);
	background-color: var(--clay-light);
	border-color: var(--clay-light);
}

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

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

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

html .btn-desert:focus,
html .btn-desert.focus {
	box-shadow: 0 0 0 3px rgba(212, 196, 176, 0.5);
	background-color: var(--desert);
	border-color: var(--desert);
}

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

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

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

html .btn-desert-light:focus,
html .btn-desert-light.focus {
	box-shadow: 0 0 0 3px rgba(232, 216, 196, 0.5);
	background-color: var(--desert-light);
	border-color: var(--desert-light);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html .text-color-hover-desert-light:hover,
html .text-hover-desert-light:hover {
	color: var(--desert-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-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-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-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-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-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-moss,
html .background-color-moss {
	background-color: var(--moss) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*-----------------------------------------------------------------------------
 * 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(0, 47, 108, 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(26, 73, 128, 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;
}

/* 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(204, 27, 44, 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(220, 59, 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;
}

/* 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(178, 177, 172, 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(198, 197, 192, 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;
}

/* 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(170, 150, 86, 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(190, 170, 106, 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;
}

/* 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(255, 199, 31, 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(255, 209, 79, 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;
}

/* 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(36, 92, 60, 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(56, 112, 80, 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;
}

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

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

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

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

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

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

html .btn-outline-moss-light:focus,
html .btn-outline-moss-light.focus {
	box-shadow: 0 0 0 3px rgba(127, 141, 86, 0.5);
}

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

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

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

html .btn-outline-cover:focus,
html .btn-outline-cover.focus {
	box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.5);
}

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

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

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

html .btn-outline-cover-light:focus,
html .btn-outline-cover-light.focus {
	box-shadow: 0 0 0 3px rgba(159, 135, 105, 0.5);
}

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

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

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

html .btn-outline-mud:focus,
html .btn-outline-mud.focus {
	box-shadow: 0 0 0 3px rgba(123, 109, 93, 0.5);
}

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

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

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

html .btn-outline-mud-light:focus,
html .btn-outline-mud-light.focus {
	box-shadow: 0 0 0 3px rgba(143, 129, 113, 0.5);
}

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

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

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

html .btn-outline-clay:focus,
html .btn-outline-clay.focus {
	box-shadow: 0 0 0 3px rgba(160, 140, 108, 0.5);
}

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

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

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

html .btn-outline-clay-light:focus,
html .btn-outline-clay-light.focus {
	box-shadow: 0 0 0 3px rgba(180, 160, 128, 0.5);
}

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

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

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

html .btn-outline-desert:focus,
html .btn-outline-desert.focus {
	box-shadow: 0 0 0 3px rgba(212, 196, 176, 0.5);
}

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

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

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

html .btn-outline-desert-light:focus,
html .btn-outline-desert-light.focus {
	box-shadow: 0 0 0 3px rgba(232, 216, 196, 0.5);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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