/*-----------------------------------------------------------------------------
 * Auto-Generated Color System CSS - kkranchstone.info
 * Generated: 2025-12-04 11:35:44
 * Generated by Sagentic Dashboard Color System
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
	/* Primary - Cello */
	--cello: #213064;
	--cello-hover: #0e142a;
	--cello-light: #334b9d;
	--cello-light-hover: #566fc7;

	/* Secondary - Crimson */
	--crimson: #ED2024;
	--crimson-hover: #b20e11;
	--crimson-light: #f26669;
	--crimson-light-hover: #f8adaf;

	/* Tertiary - Sapphire */
	--sapphire: #2E5FAF;
	--sapphire-hover: #1e3e72;
	--sapphire-light: #5685d2;
	--sapphire-light-hover: #93b1e2;

	/* Quaternary - Sunshine */
	--sunshine: #f3ea1b;
	--sunshine-hover: #f3ea1b;
	--sunshine-light: #f3ea1b;
	--sunshine-light-hover: #f3ea1b;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html .btn-crimson-light.disabled,
html .btn-crimson-light:disabled {
	background-color: var(--crimson-light);
	border-color: var(--crimson-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(46, 95, 175, 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(86, 133, 210, 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html .heading.heading-crimson-light h1,
html .heading.heading-crimson-light h2,
html .heading.heading-crimson-light h3,
html .heading.heading-crimson-light h4,
html .heading.heading-crimson-light h5,
html .heading.heading-crimson-light h6 {
	border-color: var(--crimson-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);
}

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

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

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

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

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

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

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

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

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

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

html .bg-crimson-light,
html .background-color-crimson-light {
	background-color: var(--crimson-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;
}

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

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

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

/* Cello Badges */
.badge-cello {
	background: var(--cello-hover);
	color: #FFF;
}

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

/* Crimson Badges */
.badge-crimson {
	background: var(--crimson-hover);
	color: #FFF;
}

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

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

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

/* sunshine Badges */
.badge-sunshine {
	background: var(--sunshine-hover);
	color: #FFF;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html .btn-outline-crimson-light:focus,
html .btn-outline-crimson-light.focus {
	box-shadow: 0 0 0 3px rgba(242, 102, 105, 0.5);
}

html .btn-outline-crimson-light.disabled,
html .btn-outline-crimson-light:disabled {
	color: var(--crimson-light);
	background-color: transparent;
	border-color: var(--crimson-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(46, 95, 175, 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(86, 133, 210, 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.alert-crimson-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-sunshine {
	color: #FFF;
	background-color: var(--sunshine);
	border-color: var(--sunshine);
}

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

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

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