/*-----------------------------------------------------------------------------
 * Color System CSS - Custom Color Palette
 * Six-color theme with complementary variants
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
	--orange: #ef6620;
	--orange-hover: #d34e0a;
	--orange-light: #ff7634;
	--orange-light-hover: #ff8648;

	--yellow: #f5c739;
	--yellow-hover: #d9ab1d;
	--yellow-light: #f7d14d;
	--yellow-light-hover: #f9db61;

	--amber: #f4932b;
	--amber-hover: #d8770f;
	--amber-light: #f6a33f;
	--amber-light-hover: #f8b353;

	--cyan: #0399b1;
	--cyan-hover: #007d95;
	--cyan-light: #17a9c5;
	--cyan-light-hover: #2bb9d9;

	--sienna: #9d5733;
	--sienna-hover: #813b17;
	--sienna-light: #b16747;
	--sienna-light-hover: #c5775b;

	--brown: #4d2900;
	--brown-hover: #311a00;
	--brown-light: #613d1a;
	--brown-light-hover: #755134;
}

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

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

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

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

html .btn-orange:focus,
html .btn-orange.focus {
	box-shadow: 0 0 0 3px rgba(239, 102, 32, 0.5);
	background-color: var(--orange);
	border-color: var(--orange);
}

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

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

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

html .btn-orange-light:focus,
html .btn-orange-light.focus {
	box-shadow: 0 0 0 3px rgba(255, 118, 52, 0.5);
	background-color: var(--orange-light);
	border-color: var(--orange-light);
}

html .btn-orange-light.disabled,
html .btn-orange-light:disabled {
	background-color: var(--orange-light);
	border-color: var(--orange-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(245, 199, 57, 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(247, 209, 77, 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;
}

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

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

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

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

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

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

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

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

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

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

html .btn-cyan:focus,
html .btn-cyan.focus {
	box-shadow: 0 0 0 3px rgba(3, 153, 177, 0.5);
	background-color: var(--cyan);
	border-color: var(--cyan);
}

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

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

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

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

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

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

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

html .btn-sienna:focus,
html .btn-sienna.focus {
	box-shadow: 0 0 0 3px rgba(157, 87, 51, 0.5);
	background-color: var(--sienna);
	border-color: var(--sienna);
}

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

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

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

html .btn-sienna-light:focus,
html .btn-sienna-light.focus {
	box-shadow: 0 0 0 3px rgba(177, 103, 71, 0.5);
	background-color: var(--sienna-light);
	border-color: var(--sienna-light);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html .btn-outline-orange:focus,
html .btn-outline-orange.focus {
	box-shadow: 0 0 0 3px rgba(239, 102, 32, 0.5);
}

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

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

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

html .btn-outline-orange-light:focus,
html .btn-outline-orange-light.focus {
	box-shadow: 0 0 0 3px rgba(255, 118, 52, 0.5);
}

html .btn-outline-orange-light.disabled,
html .btn-outline-orange-light:disabled {
	color: var(--orange-light);
	background-color: transparent;
	border-color: var(--orange-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(245, 199, 57, 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(247, 209, 77, 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;
}

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

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

html .btn-outline-amber:focus,
html .btn-outline-amber.focus {
	box-shadow: 0 0 0 3px rgba(244, 147, 43, 0.5);
}

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

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

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

html .btn-outline-amber-light:focus,
html .btn-outline-amber-light.focus {
	box-shadow: 0 0 0 3px rgba(246, 163, 63, 0.5);
}

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

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

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

html .btn-outline-cyan:focus,
html .btn-outline-cyan.focus {
	box-shadow: 0 0 0 3px rgba(3, 153, 177, 0.5);
}

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

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

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

html .btn-outline-cyan-light:focus,
html .btn-outline-cyan-light.focus {
	box-shadow: 0 0 0 3px rgba(23, 169, 197, 0.5);
}

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

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

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

html .btn-outline-sienna:focus,
html .btn-outline-sienna.focus {
	box-shadow: 0 0 0 3px rgba(157, 87, 51, 0.5);
}

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

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

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

html .btn-outline-sienna-light:focus,
html .btn-outline-sienna-light.focus {
	box-shadow: 0 0 0 3px rgba(177, 103, 71, 0.5);
}

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

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

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

html .btn-outline-brown:focus,
html .btn-outline-brown.focus {
	box-shadow: 0 0 0 3px rgba(77, 41, 0, 0.5);
}

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

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

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

html .btn-outline-brown-light:focus,
html .btn-outline-brown-light.focus {
	box-shadow: 0 0 0 3px rgba(97, 61, 26, 0.5);
}

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

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

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

.alert-orange-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-amber {
	color: #000;
	background-color: var(--amber);
	border-color: var(--amber);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modal Header Color Variations
 *---------------------------------------------------------------------------*/
.modal-block.modal-header-color .card-header h2 {
	color: #fff;
}

/* Orange Modal */
.modal-block.modal-header-color.modal-block-orange .card-header {
	background-color: var(--orange);
	border-color: var(--orange);
}
.modal-block.modal-header-color.modal-block-orange .btn-orange {
	background-color: var(--orange);
	border-color: var(--orange);
	color: #fff;
}
.modal-block.modal-header-color.modal-block-orange .btn-orange:hover {
	background-color: var(--orange-hover);
	border-color: var(--orange-hover);
}

/* Yellow Modal */
.modal-block.modal-header-color.modal-block-yellow .card-header {
	background-color: var(--yellow);
	border-color: var(--yellow);
}
.modal-block.modal-header-color.modal-block-yellow .btn-yellow {
	background-color: var(--yellow);
	border-color: var(--yellow);
	color: #fff;
}
.modal-block.modal-header-color.modal-block-yellow .btn-yellow:hover {
	background-color: var(--yellow-hover);
	border-color: var(--yellow-hover);
}

/* Amber Modal */
.modal-block.modal-header-color.modal-block-amber .card-header {
	background-color: var(--amber);
	border-color: var(--amber);
}
.modal-block.modal-header-color.modal-block-amber .btn-amber {
	background-color: var(--amber);
	border-color: var(--amber);
	color: #fff;
}
.modal-block.modal-header-color.modal-block-amber .btn-amber:hover {
	background-color: var(--amber-hover);
	border-color: var(--amber-hover);
}

/* Cyan Modal */
.modal-block.modal-header-color.modal-block-cyan .card-header {
	background-color: var(--cyan);
	border-color: var(--cyan);
}
.modal-block.modal-header-color.modal-block-cyan .btn-cyan {
	background-color: var(--cyan);
	border-color: var(--cyan);
	color: #fff;
}
.modal-block.modal-header-color.modal-block-cyan .btn-cyan:hover {
	background-color: var(--cyan-hover);
	border-color: var(--cyan-hover);
}

/* Sienna Modal */
.modal-block.modal-header-color.modal-block-sienna .card-header {
	background-color: var(--sienna);
	border-color: var(--sienna);
}
.modal-block.modal-header-color.modal-block-sienna .btn-sienna {
	background-color: var(--sienna);
	border-color: var(--sienna);
	color: #fff;
}
.modal-block.modal-header-color.modal-block-sienna .btn-sienna:hover {
	background-color: var(--sienna-hover);
	border-color: var(--sienna-hover);
}

/* Brown Modal */
.modal-block.modal-header-color.modal-block-brown .card-header {
	background-color: var(--brown);
	border-color: var(--brown);
}
.modal-block.modal-header-color.modal-block-brown .btn-brown {
	background-color: var(--brown);
	border-color: var(--brown);
	color: #fff;
}
.modal-block.modal-header-color.modal-block-brown .btn-brown:hover {
	background-color: var(--brown-hover);
	border-color: var(--brown-hover);
}

/* Modal Icon Styling */
.modal-block.modal-header-color .modal-icon {
	font-size: 4rem;
	margin-bottom: 1rem;
}
.modal-block.modal-header-color.modal-block-orange .modal-icon {
	color: var(--orange);
}
.modal-block.modal-header-color.modal-block-yellow .modal-icon {
	color: var(--yellow);
}
.modal-block.modal-header-color.modal-block-amber .modal-icon {
	color: var(--amber);
}
.modal-block.modal-header-color.modal-block-cyan .modal-icon {
	color: var(--cyan);
}
.modal-block.modal-header-color.modal-block-sienna .modal-icon {
	color: var(--sienna);
}
.modal-block.modal-header-color.modal-block-brown .modal-icon {
	color: var(--brown);
}