/*-----------------------------------------------------------------------------
 * Auto-Generated Color System CSS - fremontcountyclerkco.gov
 * Generated: 2026-01-16 15:47:41
 * Generated by Sagentic Dashboard Color System
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
	/* Primary - Black */
	--black: #030303;
	--black-hover: #000000;
	--black-light: #292929;
	--black-light-hover: #4f4f4f;

	/* Secondary - Rusty-Red */
	--rusty-red: #d9303e;
	--rusty-red-hover: #9f1d28;
	--rusty-red-light: #e4707a;
	--rusty-red-light-hover: #f0b1b6;

	/* Tertiary - Sapphire */
	--sapphire: #2d6da6;
	--sapphire-hover: #1c4569;
	--sapphire-light: #4f93cf;
	--sapphire-light-hover: #8cb8df;

	/* Quaternary - Fern-Green */
	--fern-green: #618c42;
	--fern-green-hover: #3c5829;
	--fern-green-light: #86b664;
	--fern-green-light-hover: #afce98;

	/* Link Colors */
	--hyperlinks: #0066ff;
	--hover: #0052cc;
}

/*-----------------------------------------------------------------------------
 * Links
 *---------------------------------------------------------------------------*/
a {
	color: var(--hyperlinks);
}

a:hover,
a:focus {
	color: var(--hover);
}

a:active {
	color: var(--hyperlinks);
}

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

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

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

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

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

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

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

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

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

html .btn-rusty-red-light:focus,
html .btn-rusty-red-light.focus {
	box-shadow: 0 0 0 3px rgba(228, 112, 122, 0.5);
	background-color: var(--rusty-red-light);
	border-color: var(--rusty-red-light);
}

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

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

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

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

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

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

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

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

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

/* Fern-Green */
html .btn-fern-green {
	background-color: var(--fern-green);
	border-color: var(--fern-green);
	color: #fff;
}

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

html .btn-fern-green:focus,
html .btn-fern-green.focus {
	box-shadow: 0 0 0 3px rgba(97, 140, 66, 0.5);
	background-color: var(--fern-green);
	border-color: var(--fern-green);
}

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

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

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

html .btn-fern-green-light:focus,
html .btn-fern-green-light.focus {
	box-shadow: 0 0 0 3px rgba(134, 182, 100, 0.5);
	background-color: var(--fern-green-light);
	border-color: var(--fern-green-light);
}

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

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

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

html .heading.heading-black h1,
html .heading.heading-black h2,
html .heading.heading-black h3,
html .heading.heading-black h4,
html .heading.heading-black h5,
html .heading.heading-black h6 {
	border-color: var(--black);
}

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

html .heading.heading-black-light h1,
html .heading.heading-black-light h2,
html .heading.heading-black-light h3,
html .heading.heading-black-light h4,
html .heading.heading-black-light h5,
html .heading.heading-black-light h6 {
	border-color: var(--black-light);
}

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

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

html .heading.heading-rusty-red h1,
html .heading.heading-rusty-red h2,
html .heading.heading-rusty-red h3,
html .heading.heading-rusty-red h4,
html .heading.heading-rusty-red h5,
html .heading.heading-rusty-red h6 {
	border-color: var(--rusty-red);
}

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

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

html .heading.heading-rusty-red-light h1,
html .heading.heading-rusty-red-light h2,
html .heading.heading-rusty-red-light h3,
html .heading.heading-rusty-red-light h4,
html .heading.heading-rusty-red-light h5,
html .heading.heading-rusty-red-light h6 {
	border-color: var(--rusty-red-light);
}

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

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

html .heading.heading-sapphire h1,
html .heading.heading-sapphire h2,
html .heading.heading-sapphire h3,
html .heading.heading-sapphire h4,
html .heading.heading-sapphire h5,
html .heading.heading-sapphire h6 {
	border-color: var(--sapphire);
}

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

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

html .heading.heading-sapphire-light h1,
html .heading.heading-sapphire-light h2,
html .heading.heading-sapphire-light h3,
html .heading.heading-sapphire-light h4,
html .heading.heading-sapphire-light h5,
html .heading.heading-sapphire-light h6 {
	border-color: var(--sapphire-light);
}

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

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

html .heading.heading-fern-green h1,
html .heading.heading-fern-green h2,
html .heading.heading-fern-green h3,
html .heading.heading-fern-green h4,
html .heading.heading-fern-green h5,
html .heading.heading-fern-green h6 {
	border-color: var(--fern-green);
}

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

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

html .heading.heading-fern-green-light h1,
html .heading.heading-fern-green-light h2,
html .heading.heading-fern-green-light h3,
html .heading.heading-fern-green-light h4,
html .heading.heading-fern-green-light h5,
html .heading.heading-fern-green-light h6 {
	border-color: var(--fern-green-light);
}

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

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

/* Rusty-Red Background Colors */
html .bg-rusty-red,
html .background-color-rusty-red {
	background-color: var(--rusty-red) !important;
}

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

/* Sapphire Background Colors */
html .bg-sapphire,
html .background-color-sapphire {
	background-color: var(--sapphire) !important;
}

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

/* Fern-Green Background Colors */
html .bg-fern-green,
html .background-color-fern-green {
	background-color: var(--fern-green) !important;
}

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

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

/* Black Badges */
.badge-black {
	background: var(--black-hover);
	color: #fff;
}

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

/* Rusty-Red Badges */
.badge-rusty-red {
	background: var(--rusty-red-hover);
	color: #fff;
}

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

/* Sapphire Badges */
.badge-sapphire {
	background: var(--sapphire-hover);
	color: #fff;
}

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

/* Fern-Green Badges */
.badge-fern-green {
	background: var(--fern-green-hover);
	color: #fff;
}

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

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

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

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

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

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

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

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

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

html .btn-outline-rusty-red-light:focus,
html .btn-outline-rusty-red-light.focus {
	box-shadow: 0 0 0 3px rgba(228, 112, 122, 0.5);
}

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

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

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

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

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

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

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

html .btn-outline-sapphire-light:focus,
html .btn-outline-sapphire-light.focus {
	box-shadow: 0 0 0 3px rgba(79, 147, 207, 0.5);
}

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

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

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

html .btn-outline-fern-green:focus,
html .btn-outline-fern-green.focus {
	box-shadow: 0 0 0 3px rgba(97, 140, 66, 0.5);
}

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

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

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

html .btn-outline-fern-green-light:focus,
html .btn-outline-fern-green-light.focus {
	box-shadow: 0 0 0 3px rgba(134, 182, 100, 0.5);
}

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

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

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

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

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

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

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

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

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

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

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

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