/*-----------------------------------------------------------------------------
 * Color System CSS - Cleburne High School Theme
 * Black & Gold primary colors with black-to-blue accent colors
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {

	--gold: #B0882D;              /* School Gold */
	--gold-hover: #C4A03F;
	--gold-light: #D4B865;
	--gold-light-hover: #E0C885;

	--black: #030303;             /* School Black */
	--black-hover: #1A1A1A;
	--black-light: #333333;
	--black-light-hover: #4D4D4D;

	--charcoal: #221E1F;          /* Dark Charcoal */
	--charcoal-hover: #353132;
	--charcoal-light: #4A4647;
	--charcoal-light-hover: #605C5D;

	--slate: #2C3E50;             /* Slate Blue */
	--slate-hover: #3E5266;
	--slate-light: #546E8A;
	--slate-light-hover: #6B86A3;

	--steel: #34495E;             /* Steel Blue */
	--steel-hover: #465A72;
	--steel-light: #5D7388;
	--steel-light-hover: #748B9F;

	--midnight: #1A237E;          /* Midnight Blue */
	--midnight-hover: #283593;
	--midnight-light: #3949AB;
	--midnight-light-hover: #5C6BC0;
}

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

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

/* 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(176, 136, 45, 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(212, 184, 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;
}

/* Black */
html .btn-black {
	background-color: var(--black);
	border-color: var(--black);
	color: #FFF;
}

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

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

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

/* Black Light */
html .btn-black-light {
	background-color: var(--black-light);
	border-color: var(--black-light);
	color: #FFF;
}

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

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

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

/* Charcoal */
html .btn-charcoal {
	background-color: var(--charcoal);
	border-color: var(--charcoal);
	color: #FFF;
}

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

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

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

/* Charcoal Light */
html .btn-charcoal-light {
	background-color: var(--charcoal-light);
	border-color: var(--charcoal-light);
	color: #FFF;
}

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

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

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

/* Slate */
html .btn-slate {
	background-color: var(--slate);
	border-color: var(--slate);
	color: #FFF;
}

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

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

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

/* Slate Light */
html .btn-slate-light {
	background-color: var(--slate-light);
	border-color: var(--slate-light);
	color: #FFF;
}

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

html .btn-slate-light:focus,
html .btn-slate-light.focus {
	box-shadow: 0 0 0 3px rgba(84, 110, 138, 0.5);
	background-color: var(--slate-light);
	border-color: var(--slate-light);
}

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

/* Steel */
html .btn-steel {
	background-color: var(--steel);
	border-color: var(--steel);
	color: #FFF;
}

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

html .btn-steel:focus,
html .btn-steel.focus {
	box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.5);
	background-color: var(--steel);
	border-color: var(--steel);
}

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

/* Steel Light */
html .btn-steel-light {
	background-color: var(--steel-light);
	border-color: var(--steel-light);
	color: #FFF;
}

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

html .btn-steel-light:focus,
html .btn-steel-light.focus {
	box-shadow: 0 0 0 3px rgba(93, 115, 136, 0.5);
	background-color: var(--steel-light);
	border-color: var(--steel-light);
}

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

/* Midnight */
html .btn-midnight {
	background-color: var(--midnight);
	border-color: var(--midnight);
	color: #FFF;
}

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

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

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

/* Midnight Light */
html .btn-midnight-light {
	background-color: var(--midnight-light);
	border-color: var(--midnight-light);
	color: #FFF;
}

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

html .btn-midnight-light:focus,
html .btn-midnight-light.focus {
	box-shadow: 0 0 0 3px rgba(57, 73, 171, 0.5);
	background-color: var(--midnight-light);
	border-color: var(--midnight-light);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.badge-black {
	background: var(--black-hover);
	color: #FFF;
}

.badge-black-light {
	background: var(--black-light-hover);
	color: #FFF;
}

.badge-charcoal {
	background: var(--charcoal-hover);
	color: #FFF;
}

.badge-charcoal-light {
	background: var(--charcoal-light-hover);
	color: #FFF;
}

.badge-slate {
	background: var(--slate-hover);
	color: #FFF;
}

.badge-slate-light {
	background: var(--slate-light-hover);
	color: #FFF;
}

.badge-steel {
	background: var(--steel-hover);
	color: #FFF;
}

.badge-steel-light {
	background: var(--steel-light-hover);
	color: #FFF;
}

.badge-midnight {
	background: var(--midnight-hover);
	color: #FFF;
}

.badge-midnight-light {
	background: var(--midnight-light-hover);
	color: #FFF;
}

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

/* 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(176, 136, 45, 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(212, 184, 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html .btn-outline-charcoal-light:focus,
html .btn-outline-charcoal-light.focus {
	box-shadow: 0 0 0 3px rgba(74, 70, 71, 0.5);
}

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

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

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

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

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

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

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

html .btn-outline-slate-light:focus,
html .btn-outline-slate-light.focus {
	box-shadow: 0 0 0 3px rgba(84, 110, 138, 0.5);
}

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

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

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

html .btn-outline-steel:focus,
html .btn-outline-steel.focus {
	box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.5);
}

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

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

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

html .btn-outline-steel-light:focus,
html .btn-outline-steel-light.focus {
	box-shadow: 0 0 0 3px rgba(93, 115, 136, 0.5);
}

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

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

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

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

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

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

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

html .btn-outline-midnight-light:focus,
html .btn-outline-midnight-light.focus {
	box-shadow: 0 0 0 3px rgba(57, 73, 171, 0.5);
}

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

.alert-black .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-black-light {
	color: #FFF;
	background-color: var(--black-light);
	border-color: var(--black-light);
}

.alert-black-light .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-charcoal {
	color: #FFF;
	background-color: var(--charcoal);
	border-color: var(--charcoal);
}

.alert-charcoal .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-charcoal-light {
	color: #FFF;
	background-color: var(--charcoal-light);
	border-color: var(--charcoal-light);
}

.alert-charcoal-light .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-slate {
	color: #FFF;
	background-color: var(--slate);
	border-color: var(--slate);
}

.alert-slate .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-slate-light {
	color: #FFF;
	background-color: var(--slate-light);
	border-color: var(--slate-light);
}

.alert-slate-light .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-steel {
	color: #FFF;
	background-color: var(--steel);
	border-color: var(--steel);
}

.alert-steel .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-steel-light {
	color: #FFF;
	background-color: var(--steel-light);
	border-color: var(--steel-light);
}

.alert-steel-light .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-midnight {
	color: #FFF;
	background-color: var(--midnight);
	border-color: var(--midnight);
}

.alert-midnight .alert-link {
	color: #FFF;
	text-decoration: underline;
}

.alert-midnight-light {
	color: #FFF;
	background-color: var(--midnight-light);
	border-color: var(--midnight-light);
}

.alert-midnight-light .alert-link {
	color: #FFF;
	text-decoration: underline;
}