/************************
COLORS: GENERAL
*************************/
.bg-light {
	background: var(--light)!important;
}

.text-light {
	color: var(--light)!important;
}

.bg-dark {
	background: var(--dark)!important;
}

.text-dark {
	color: var(--dark)!important;
}

/************************
COLORS: GENERAL UI ELEMENTS
*************************/
.bg-danger, .text-bg-danger, .alert-danger {
	background: var(--danger)!important;
}

.text-danger {
	color: var(--danger)!important;
}

.bg-warning, .text-bg-warning, .alert-warning {
	background: var(--warning)!important;
}

.text-warning {
	color: var(--warning)!important;
}

.bg-success, .text-bg-success, .alert-success {
	background: var(--success)!important;
}

.text-info {
	color: var(--success)!important;
}

.bg-info, .text-bg-info, .alert-info {
	background: var(--info)!important;
}

.text-info {
	color: var(--info)!important;
}

/************************
COLORS: PRIMARY BACKGROUNDS
*************************/
/*base color*/
.bg-primary, .alert-primary {
	background: var(--primary)!important;
}
	
/*controls tints*/
	.bg-primary-tint-20, mark {
		background: color-mix(in srgb, var(--primary) 20%, white)!important;
	}
	
	.bg-primary-tint-40 {
		background: color-mix(in srgb, var(--primary) 40%, white)!important;
	}
	
	.bg-primary-tint-60 {
		background: color-mix(in srgb, var(--primary) 60%, white)!important;
	}
	
	.bg-primary-tint-80 {
		background: color-mix(in srgb, var(--primary) 80%, white)!important;
	}
	
/*controls shades*/
	.bg-primary-shade-20 {
		background: color-mix(in srgb, var(--primary), black 20%)!important;
	}
	
	.bg-primary-shade-40 {
		background: color-mix(in srgb, var(--primary), black 40%)!important;
	}
	
	.bg-primary-shade-60 {
		background: color-mix(in srgb, var(--primary), black 60%)!important;
	}
	
	.bg-primary-shade-80 {
		background: color-mix(in srgb, var(--primary), black 80%)!important;
	}

/************************
COLORS: PRIMARY TEXT COLORS
*************************/
.text-primary {
	color: color-mix(in srgb, var(--primary) 100%, white)!important;
}

/*controls tints*/
	.text-primary-tint-20 {
		color: color-mix(in srgb, var(--primary) 20%, white)!important;
	}
	
	.text-primary-tint-40 {
		color: color-mix(in srgb, var(--primary) 40%, white)!important;
	}
	
	.text-primary-tint-60 {
		color: color-mix(in srgb, var(--primary) 60%, white)!important;
	}
	
	.text-primary-tint-80 {
		color: color-mix(in srgb, var(--primary) 80%, white)!important;
	}
	
/*controls shades*/
	.text-primary-shade-20 {
		color: color-mix(in srgb, var(--primary), black 20%)!important;
	}
	
	.text-primary-shade-40 {
		color: color-mix(in srgb, var(--primary), black 40%)!important;
	}
	
	.text-primary-shade-60 {
		color: color-mix(in srgb, var(--primary), black 60%)!important;
	}
	
	.text-primary-shade-80 {
		color: color-mix(in srgb, var(--primary), black 80%)!important;
	}
	
/************************
COLORS: SECONDARY BACKGROUNDS
*************************/
/*base color*/
.bg-secondary {
	background: var(--secondary)!important;
}
	
/*controls tints*/
	.bg-secondary-tint-20 {
		background: color-mix(in srgb, var(--secondary) 20%, white)!important;
	}
	
	.bg-secondary-tint-40 {
		background: color-mix(in srgb, var(--secondary) 40%, white)!important;
	}
	
	.bg-secondary-tint-60 {
		background: color-mix(in srgb, var(--secondary) 60%, white)!important;
	}
	
	.bg-secondary-tint-80 {
		background: color-mix(in srgb, var(--secondary) 80%, white)!important;
	}
	
/*controls shades*/
	.bg-secondary-shade-20 {
		background: color-mix(in srgb, var(--secondary), black 20%)!important;
	}
	
	.bg-secondary-shade-40 {
		background: color-mix(in srgb, var(--secondary), black 40%)!important;
	}
	
	.bg-secondary-shade-60 {
		background: color-mix(in srgb, var(--secondary), black 60%)!important;
	}
	
	.bg-secondary-shade-80 {
		background: color-mix(in srgb, var(--secondary), black 80%)!important;
	}

/************************
SECONDARY TEXT COLORS
*************************/
.text-secondary {
	color: color-mix(in srgb, var(--secondary) 100%, white)!important;
}

/*controls tints*/
	.text-secondary-tint-20 {
		color: color-mix(in srgb, var(--secondary) 20%, white)!important;
	}
	
	.text-secondary-tint-40 {
		color: color-mix(in srgb, var(--secondary) 40%, white)!important;
	}
	
	.text-secondary-tint-60 {
		color: color-mix(in srgb, var(--secondary) 60%, white)!important;
	}
	
	.text-secondary-tint-80 {
		color: color-mix(in srgb, var(--secondary) 80%, white)!important;
	}
	
/*controls shades*/
	.text-secondary-shade-20 {
		color: color-mix(in srgb, var(--secondary), black 20%)!important;
	}
	
	.text-secondary-shade-40 {
		color: color-mix(in srgb, var(--secondary), black 40%)!important;
	}
	
	.text-secondary-shade-60 {
		color: color-mix(in srgb, var(--secondary), black 60%)!important;
	}
	
	.text-secondary-shade-80 {
		color: color-mix(in srgb, var(--secondary), black 80%)!important;
	}
	
/************************
COLORS: TERTIARY BACKGROUNDS
*************************/
/*base color*/
.bg-tertiary {
	background: var(--tertiary)!important;
}
	
/*controls tints*/
	.bg-tertiary-tint-20 {
		background: color-mix(in srgb, var(--tertiary) 20%, white)!important;
	}
	
	.bg-tertiary-tint-40 {
		background: color-mix(in srgb, var(--tertiary) 40%, white)!important;
	}
	
	.bg-tertiary-tint-60 {
		background: color-mix(in srgb, var(--tertiary) 60%, white)!important;
	}
	
	.bg-tertiary-tint-80 {
		background: color-mix(in srgb, var(--tertiary) 80%, white)!important;
	}
	
/*controls shades*/
	.bg-tertiary-shade-20 {
		background: color-mix(in srgb, var(--tertiary), black 20%)!important;
	}
	
	.bg-tertiary-shade-40 {
		background: color-mix(in srgb, var(--tertiary), black 40%)!important;
	}
	
	.bg-tertiary-shade-60 {
		background: color-mix(in srgb, var(--tertiary), black 60%)!important;
	}
	
	.bg-tertiary-shade-80 {
		background: color-mix(in srgb, var(--tertiary), black 80%)!important;
	}

/************************
COLORS: TERTIARY TEXT COLORS
*************************/
.text-tertiary {
	color: color-mix(in srgb, var(--tertiary) 100%, white)!important;
}

/*controls tints*/
	.text-tertiary-tint-20 {
		color: color-mix(in srgb, var(--tertiary) 20%, white)!important;
	}
	
	.text-tertiary-tint-40 {
		color: color-mix(in srgb, var(--tertiary) 40%, white)!important;
	}
	
	.text-tertiary-tint-60 {
		color: color-mix(in srgb, var(--tertiary) 60%, white)!important;
	}
	
	.text-tertiary-tint-80 {
		color: color-mix(in srgb, var(--tertiary) 80%, white)!important;
	}
	
/*controls shades*/
	.text-tertiary-shade-20 {
		color: color-mix(in srgb, var(--tertiary), black 20%)!important;
	}
	
	.text-tertiary-shade-40 {
		color: color-mix(in srgb, var(--tertiary), black 40%)!important;
	}
	
	.text-tertiary-shade-60 {
		color: color-mix(in srgb, var(--tertiary), black 60%)!important;
	}
	
	.text-tertiary-shade-80 {
		color: color-mix(in srgb, var(--tertiary), black 80%)!important;
	}

/************************
BUTTON STYLES
*************************/
/*button with primary colors*/
.btn-primary {
	background: var(--primary);
	border-color: var(--primary);
}

	.btn-primary:hover {
		background: color-mix(in srgb, var(--primary), black 20%)!important;
		border-color: var(--primary)!important;
	}
	
	.btn-primary:active, .btn-primary:focus {
		background: color-mix(in srgb, var(--primary), black 20%)!important;
		border-color: var(--primary)!important;
	}
	
	.btn-primary:focus-visible {
		border-color: var(--primary);
		background: var(--primary);
		box-shadow: 0 0 0 .25rem rgba(0,0,0,.25)!important;
	}
	
/*button with secondary background colors*/
.btn-secondary {
	background: var(--secondary);
	border-color: var(--secondary);
}

	.btn-secondary:hover {
		background: color-mix(in srgb, var(--secondary), black 20%)!important;
		border-color: var(--secondary)!important;
	}
	
	.btn-secondary:active, .btn-secondary:focus {
		background: color-mix(in srgb, var(--secondary), black 20%)!important;
		border-color: var(--secondary)!important;
	}
	
	.btn-secondary:focus-visible {
		border-color: var(--secondary);
		background: var(--secondary);
		box-shadow: 0 0 0 .25rem rgba(0,0,0,.25)!important;
	}
	
/*button with tertiary background colors*/
.btn-tertiary {
	background: var(--tertiary);
	border-color: var(--tertiary);
}

	.btn-tertiary:hover {
		background: color-mix(in srgb, var(--tertiary), black 20%)!important;
		border-color: var(--tertiary)!important;
	}
	
	.btn-tertiary:active, .btn-tertiary:focus {
		background: color-mix(in srgb, var(--tertiary), black 20%)!important;
		border-color: var(--tertiary)!important;
	}
	
	.btn-tertiary:focus-visible {
		border-color: var(--tertiary);
		background: var(--tertiary);
		box-shadow: 0 0 0 .25rem rgba(0,0,0,.25)!important;
	}


/*button outline with primary colors*/
.btn-outline-primary {
	background: none;
	color: var(--primary);
	border-color: var(--primary);
}

	.btn-outline-primary:hover {
		background: color-mix(in srgb, var(--primary), black 20%)!important;
		border-color: var(--primary)!important;
	}
	
	.btn-outline-primary:active, .btn-outline-primary:focus {
		background: color-mix(in srgb, var(--primary), black 20%)!important;
		border-color: var(--primary)!important;
	}
	
	.btn-outline-primary:focus-visible {
		border-color: var(--primary)!important;
		background: var(--primary)!important;
		box-shadow: 0 0 0 .25rem rgba(0,0,0,.25)!important;
	}

/*button with secondary background colors*/
.btn-outline-secondary {
	background: none;
	color: var(--secondary);
	border-color: var(--secondary);
}

	.btn-outline-secondary:hover {
		background: color-mix(in srgb, var(--secondary), black 20%)!important;
		border-color: var(--secondary)!important;
	}
	
	.btn-outline-secondary:active, .btn-secondary:focus {
		background: color-mix(in srgb, var(--secondary), black 20%)!important;
		border-color: var(--secondary)!important;
	}
	
	.btn-outline-secondary:focus-visible {
		border-color: var(--secondary);
		background: var(--secondary);
		box-shadow: 0 0 0 .25rem rgba(0,0,0,.25)!important;
	}
	
/*button with tertiary background colors*/
.btn-outline-tertiary {
	background: none;
	color: var(--tertiary);
	border-color: var(--tertiary);
}

	.btn-outline-tertiary:hover {
		background: color-mix(in srgb, var(--tertiary), black 20%)!important;
		border-color: var(--tertiary)!important;
	}
	
	.btn-outline-tertiary:active, .btn-tertiary:focus {
		background: color-mix(in srgb, var(--tertiary), black 20%)!important;
		border-color: var(--tertiary)!important;
	}
	
	.btn-outline-tertiary:focus-visible {
		border-color: var(--tertiary);
		background: var(--tertiary);
		box-shadow: 0 0 0 .25rem rgba(0,0,0,.25)!important;
	}