/*------------------------------------ BTN  ------------------------------------/*

/*!
    Styles to progressively enhance the .btn class from BS v5.2

    @version 1
    @used http://flemingcollege.ca/*
    @TODO 
    @module BTN
*/
.btn {
	--bs-btn-font-weight: 600;
	--bs-btn-font-size: var(--fc-normal-text);
	--bs-btn-border-width: 2px;
	position: relative;
}
.btn.with-icon:not(.MenuToggler .btn):not(.btn-link) {
	display:inline-flex;
}

.btn-xs {

	--bs-btn-font-weight: 500;
	--bs-btn-font-size: 1rem;
	--bs-btn-border-width: 1px;
	--bs-btn-padding-x: 0.375rem;
}
.btn-xs i {
	margin-right: 0;

}


.btn-primary,
.white-background .btn-primary {
	color:  var(--fc-fleming-white)!important;
	--bs-btn-bg: var(--fc-bright-iris);
	--bs-btn-hover-color:  var(--fc-fleming-white);
	--bs-btn-hover-bg:var(--fc-bright-iris);
	--bs-btn-hover-border-color: var(--fc-bright-iris-1);
	--bs-btn-active-color:  var(--fc-fleming-white);
	--bs-btn-active-bg: var(--fc-bright-iris-1);
	--bs-btn-active-border-color: rgba(var(--fc-bright-iris-1-rgb),0.2);
	--bs-btn-disabled-color: var(--fc-fleming-white);
	--bs-btn-disabled-bg: rgba(var(--fc-bright-iris-1-rgb), 0.5);
	--bs-btn-disabled-border-color:  rgba(var(--fc-bright-iris-1-rgb), 0.2);

}
.btn-primary:hover,
.white-background .btn-primary:hover {
	box-shadow: var(--fc-bright-iris-4) 0px 1px 3px, var(--fc-bright-iris-4) 0px 0px 0px 2px;
}

.black-background .btn-primary {
	color: var(--fc-fleming-black)!important;
	--bs-btn-bg: var(--fc-fleming-teal);
	--bs-btn-border-color: var(--fc-fleming-teal-3);
	--bs-btn-hover-color: var(--fc-fleming-black);
	--bs-btn-hover-bg: var(--fc-fleming-teal);
	--bs-btn-hover-border-color: var(--fc-fleming-teal-4);
	--bs-btn-active-color: var(--fc-fleming-black);
	--bs-btn-active-bg: var(--fc-fleming-teal-1);
	--bs-btn-active-border-color:var(--fc-fleming-teal-4);
	--bs-btn-disabled-color: var(--fc-slate);
	--bs-btn-disabled-bg: rgba(var(--fc-fleming-teal-2-rgb),0.8);
	--bs-btn-disabled-border-color: rgba(var(--fc-fleming-teal-1-rgb),0.8);
}
.black-background .btn-primary:hover {
	box-shadow: var(--fc-fleming-teal-3) 0px 1px 3px, var(--fc-fleming-teal-3) 0px 0px 0px 2px;
}
.black-background a.btn-primary {
	color: var(--fc-fleming-black)!important;
}

.black-background .btn-primary.with-icon::before,
.black-background .btn-primary.with-icon-after::after {

	color: var(--fc-fleming-black);
}

.blue-background .btn-primary {
	color: var(--fc-bright-iris)!important;
	--bs-btn-bg:var(--fc-fleming-white);
	--bs-btn-border-color:var(--fc-bright-iris-3);
	--bs-btn-hover-color: var(--fc-bright-iris-3);
	--bs-btn-hover-bg: var(--fc-cloud);
	--bs-btn-hover-border-color:var(--fc-bright-iris-4);
	--bs-btn-active-color: var(--fc-bright-iris);
	--bs-btn-active-bg: var(--fc-cloud);
	--bs-btn-active-border-color:var(--fc-bright-iris-4);
	--bs-btn-disabled-color: rgba(var(--fc-bright-iris-1-rgb), 0.5);
	--bs-btn-disabled-bg:var(--fc-fleming-white);
	--bs-btn-disabled-border-color: rgba(var(--fc-bright-iris-1-rgb), 0.5);
	
}
.blue-background .btn-primary:hover {
	box-shadow: var(--fc-bright-iris-3) 0px 1px 3px, var(--fc-bright-iris-3) 0px 0px 0px 2px;
}
.blue-background a.btn-primary {
	color: var(--fc-bright-iris)!important;
}

.blue-background .btn-primary.with-icon::before,
.blue-background .btn-primary.with-icon-after::after {
    color: var(--fc-bright-iris)!important;
}

.btn-secondary,
.white-background .btn-secondary {
	color: var(--fc-bright-iris)!important;
	--bs-btn-bg:var(--fc-fleming-white);
	--bs-btn-border-color: var(--fc-bright-iris);
	--bs-btn-hover-color:var(--fc-bright-iris);
	--bs-btn-hover-bg:var(--fc-cloud);
	--bs-btn-hover-border-color: var(--fc-bright-iris-3);
	--bs-btn-active-color: var(--fc-bright-iris-1);
	--bs-btn-active-bg:var(--fc-cloud);
	--bs-btn-active-border-color: var(--fc-bright-iris-3);
	--bs-btn-disabled-color: rgba(var(--fc-bright-iris-1-rgb), 0.5);
	--bs-btn-disabled-bg:var(--fc-fleming-white);
	--bs-btn-disabled-border-color: rgba(var(--fc-bright-iris-1-rgb), 0.5);
	
}
.btn-secondary:hover,
.white-background .btn-secondary:hover {
	box-shadow:var(--fc-bright-iris-4) 0px 1px 3px, var(--fc-bright-iris-4) 0px 0px 0px 2px;
}
a.btn-secondary {
	color: var(--fc-bright-iris)!important;
}

.btn-secondary.with-icon::before,
.btn-secondary.with-icon-after::after {

	color: var(--fc-bright-iris)!important;
}

.black-background .btn-secondary {
	color: var(--fc-fleming-teal-3)!important;
	--bs-btn-bg:var(--fc-fleming-black);
	--bs-btn-border-color: var(--fc-fleming-teal-3);
	--bs-btn-hover-color: var(--fc-fleming-teal-3);
	--bs-btn-hover-bg: var(--fc-fleming-black);
	--bs-btn-hover-border-color: var(--fc-fleming-teal-4);
	--bs-btn-focus-shadow-rgb: 248,249,250;
	--bs-btn-active-color: var(--fc-fleming-white);
	--bs-btn-active-bg: var(--fc-fleming-black);
	--bs-btn-active-border-color: var(--fc-fleming-teal-4);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--fc-fleming-teal-3); 
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--fc-fleming-teal-3);
	--bs-gradient: none;
	
}
.black-background .btn-secondary:hover {
	box-shadow: var(--fc-fleming-teal-3) 0px 1px 3px, var(--fc-fleming-teal-3) 0px 0px 0px 2px;
}
.black-background a.btn-secondary {
	color: var(--fc-fleming-teal)!important;
}
.black-background .btn-secondary.with-icon::before,
.black-background .btn-secondary.with-icon-after::after {

	color: var(--fc-fleming-teal-3)!important;
}

.blue-background .btn-secondary {
	color:var(--fc-fleming-white)!important;
	--bs-btn-bg: var(--fc-bright-iris-3);
	--bs-btn-border-color:var(--fc-fleming-white);
	--bs-btn-hover-color:var(--fc-fleming-white);
	--bs-btn-hover-bg:var(--fc-bright-iris-3);
	--bs-btn-hover-border-color:rgba(var(--fc-fleming-white-rgb), 0.75);
	--bs-btn-active-color:var(--fc-fleming-white);
	--bs-btn-active-bg: var(--fc-bright-iris-1);
	--bs-btn-active-border-color:rgba(var(--fc-fleming-white-rgb), 0.75);
	--bs-btn-disabled-color: var(--fc-fleming-white);
	--bs-btn-disabled-bg: var(--fc-bright-iris-3);
	--bs-btn-disabled-border-color:var(--fc-fleming-white);
}
.blue-background .btn-secondary:hover {
	box-shadow: var(--fc-fleming-white) 0px 1px 3px, var(--fc-fleming-white) 0px 0px 0px 2px;
}
.blue-background a.btn-secondary {
	color:var(--fc-fleming-white)!important;
}
.blue-background .btn-secondary.with-icon::before,
.blue-background .btn-secondary.with-icon-after::after {
    color:var(--fc-fleming-white)!important;
}

.btn-success,
.white-background .btn-success {
	color:  var(--fc-fleming-white)!important;
	--bs-btn-bg: var(--fc-darker-green);
	--bs-btn-hover-color:  var(--fc-fleming-white);
	--bs-btn-hover-bg:var(--fc-darker-green);
	--bs-btn-hover-border-color: var(--fc-darker-green);
	--bs-btn-active-color:  var(--fc-fleming-white);
	--bs-btn-active-bg: var(--fc-darker-green);
	--bs-btn-active-border-color: rgba(var(--fc-darker-green-rgb),0.2);
	--bs-btn-disabled-color: var(--fc-fleming-white);
	--bs-btn-disabled-bg: rgba(var(--fc-darker-green-rgb), 0.5);
	--bs-btn-disabled-border-color:  rgba(var(--fc-green-rgb), 0.2);

}
.btn-success:hover,
.white-background .btn-success:hover {
	box-shadow: var(--fc-green) 0px 1px 3px, var(--fc-green) 0px 0px 0px 2px;
}


.btn-danger,
.white-background .btn-danger {
	color:  var(--fc-fleming-white)!important;
	--bs-btn-bg: var(--fc-darker-red);
	--bs-btn-hover-color:  var(--fc-fleming-white);
	--bs-btn-hover-bg:var(--fc-darker-red);
	--bs-btn-hover-border-color: var(--fc-darker-red);
	--bs-btn-active-color:  var(--fc-fleming-white);
	--bs-btn-active-bg: var(--fc-darker-red);
	--bs-btn-active-border-color: rgba(var(--fc-darker-red-rgb),0.2);
	--bs-btn-disabled-color: var(--fc-fleming-white);
	--bs-btn-disabled-bg: rgba(var(--fc-darker-red-rgb), 0.5);
	--bs-btn-disabled-border-color:  rgba(var(--fc-red-rgb), 0.2);

}
.btn-danger:hover,
.white-background .btn-danger:hover {
	box-shadow: var(--fc-red) 0px 1px 3px, var(--fc-red) 0px 0px 0px 2px;
}


.btn-warning,
.white-background .btn-warning {
	color:  var(--fc-fleming-white)!important;
	--bs-btn-bg: var(--fc-darker-orange);
	--bs-btn-hover-color:  var(--fc-fleming-white);
	--bs-btn-hover-bg:var(--fc-darker-orange);
	--bs-btn-hover-border-color: var(--fc-darker-orange);
	--bs-btn-active-color:  var(--fc-fleming-white);
	--bs-btn-active-bg: var(--fc-darker-orange);
	--bs-btn-active-border-color: rgba(var(--fc-darker-orange-rgb),0.2);
	--bs-btn-disabled-color: var(--fc-fleming-white);
	--bs-btn-disabled-bg: rgba(var(--fc-darker-orange-rgb), 0.5);
	--bs-btn-disabled-border-color:  rgba(var(--fc-orange-rgb), 0.2);

}
.btn-warning:hover,
.white-background .btn-warning:hover {
	box-shadow: var(--fc-orange) 0px 1px 3px, var(--fc-orange) 0px 0px 0px 2px;
}


.btn-info,
.white-background .btn-info {
	color:  var(--fc-fleming-white)!important;
	--bs-btn-bg: var(--fc-darker-blue);
	--bs-btn-hover-color:  var(--fc-fleming-blue);
	--bs-btn-hover-bg:var(--fc-darker-blue);
	--bs-btn-hover-border-color: var(--fc-darker-blue);
	--bs-btn-active-color:  var(--fc-fleming-white);
	--bs-btn-active-bg: var(--fc-darker-blue);
	--bs-btn-active-border-color: rgba(var(--fc-darker-blue-rgb),0.2);
	--bs-btn-disabled-color: var(--fc-fleming-white);
	--bs-btn-disabled-bg: rgba(var(--fc-darker-blue-rgb), 0.5);
	--bs-btn-disabled-border-color:  rgba(var(--fc-blue-rgb), 0.2);

}
.btn-info:hover,
.white-background .btn-info:hover {
	box-shadow: var(--fc-blue) 0px 1px 3px, var(--fc-blue) 0px 0px 0px 2px;
}


.btn-light,
.white-background .btn-light {
	color: var(--fc-fleming-black)!important;
	--bs-btn-bg:var(--fc-fleming-white);
	--bs-btn-border-color: var(--fc-fleming-black);
	--bs-btn-hover-color: var(--fc-fleming-black);
	--bs-btn-hover-bg: var(--fc-cloud);
	--bs-btn-hover-border-color: var(--fc-fleming-black);
	--bs-btn-active-color: var(--fc-fleming-black);
	--bs-btn-active-bg: var(--fc-cloud);
	--bs-btn-active-border-color: var(--fc-fleming-black);
	--bs-btn-disabled-color:rgba(var(--fc-fleming-black-rgb),0.5);
	--bs-btn-disabled-bg:var(--fc-fleming-white);
	--bs-btn-disabled-border-color: rgba(var(--fc-slate-rgb),0.5);
	
}
.btn-light:hover,
.white-background .btn-light:hover {
	box-shadow: rgba(var(--fc-slate-rgb),0.5) 0px 1px 3px, rgba(var(--fc-slate-rgb),0.5) 0px 0px 0px 2px;
}
a.btn-light,
.white-background a.btn-light {
	color: var(--fc-fleming-black)!important;
}
.btn-light.with-icon::before,
.btn-light.with-icon-after::after {

	color: var(--fc-fleming-black)!important;
}

.black-background .btn-light {
	color: var(--fc-fleming-black)!important;
	--bs-btn-bg:var(--fc-fleming-white);
	--bs-btn-border-color:var(--fc-fleming-white);
	--bs-btn-hover-color: var(--fc-fleming-black);
	--bs-btn-hover-bg: var(--fc-cloud);
	--bs-btn-hover-border-color:var(--fc-fleming-white);
	--bs-btn-active-color: var(--fc-fleming-black);
	--bs-btn-active-bg: var(--fc-cloud);
	--bs-btn-active-border-color: rgba(var(--fc-fleming-white-rgb),0.2);
	--bs-btn-disabled-color: var(--fc-fleming-black);
	--bs-btn-disabled-bg:var(--fc-fleming-white);
	--bs-btn-disabled-border-color: rgba(var(--fc-slate),0.5);
	
}
.black-background .btn-light:hover {
	box-shadow: rgba(var(--fc-fleming-white-rgb), 0.8) 0px 1px 3px, rgb(var(--fc-fleming-white-rgb), 0.8) 0px 0px 0px 2px;
}
.black-background a.btn-light {
	color: var(--fc-fleming-black)!important;
}

.blue-background .btn-light {
	color: var(--fc-fleming-black)!important;
	--bs-btn-bg:var(--fc-fleming-white);
	--bs-btn-border-color: var(--fc-fleming-black);
	--bs-btn-hover-color: var(--fc-fleming-black);
	--bs-btn-hover-bg: var(--fc-cloud);
	--bs-btn-hover-border-color: var(--fc-fleming-black);
	--bs-btn-active-color: var(--fc-fleming-black);
	--bs-btn-active-bg: var(--fc-cloud);
	--bs-btn-active-border-color: var(--fc-fleming-black);
	--bs-btn-disabled-color: rgba(var(--fc-slate-rgb),0.8);
	--bs-btn-disabled-bg:var(--fc-fleming-white);
	--bs-btn-disabled-border-color: rgba(var(--fc-slate-rgb),0.8);
	
}
.blue-background .btn-light:hover {
	box-shadow: var(--fc-slate) 0px 1px 3px, var(--fc-slate) 0px 0px 0px 2px;
}
.blue-background a.btn-light {
	color: var(--fc-fleming-black)!important;
}


.btn-dark,
.white-background .btn-dark {
	color: var(--fc-fleming-white)!important;
	--bs-btn-bg: var(--fc-fleming-black);
	--bs-btn-hover-color: var(--fc-fleming-white);
	--bs-btn-hover-bg: var(--fc-slate);
	--bs-btn-hover-border-color: rgba(var(--fc-fleming-black-rgb),0.8);
	--bs-btn-active-color: var(--fc-fleming-white);
	--bs-btn-active-bg: var(--fc-slate);
	--bs-btn-active-border-color:rgba(var(--fc-fleming-black-rgb),0.8);
	--bs-btn-disabled-color: var(--fc-light-slate);
	--bs-btn-disabled-bg: var(--fc-fleming-black);
	--bs-btn-disabled-border-color: rgba(var(--fc-fleming-white-rgb),0.8);
}
.btn-dark:hover,
.white-background .btn-dark:hover {
	box-shadow:var(--fc-light-slate) 0px 1px 3px, var(--fc-light-slate) 0px 0px 0px 2px;
}

a.btn-dark {
	color:var(--fc-fleming-white)!important;
}

.black-background .btn-dark {
	color:var(--fc-fleming-white)!important;
	--bs-btn-bg: var(--fc-fleming-black);
	--bs-btn-border-color:var(--fc-fleming-white);
	--bs-btn-hover-color:var(--fc-fleming-white);
	--bs-btn-hover-bg:var(--fc-slate);
	--bs-btn-hover-border-color:var(--fc-fleming-white);
	--bs-btn-active-color:var(--fc-fleming-white);
	--bs-btn-hover-bg:var(--fc-slate);
	--bs-btn-active-border-color: rgba(var(--fc-slate-rgb),0.2);
	--bs-btn-disabled-color:var(--fc-fleming-white);
	--bs-btn-disabled-bg: rgba(var(--fc-slate-rgb),0.5);
	--bs-btn-disabled-border-color:var(--fc-fleming-white);
}
.black-background .btn-dark:hover {
	box-shadow: rgba(var(--fc-fleming-white-rgb), 0.8) 0px 1px 3px, rgb(var(--fc-fleming-white-rgb), 0.8) 0px 0px 0px 2px;
}
.black-background a.btn-dark {
	color:var(--fc-fleming-white)!important;
}
.black-background .btn-dark {
	color:var(--fc-fleming-white)!important;
	--bs-btn-bg: var(--fc-fleming-black);
	--bs-btn-border-color:var(--fc-fleming-white);
	--bs-btn-hover-color:var(--fc-fleming-white);
	--bs-btn-hover-bg:var(--fc-slate);
	--bs-btn-hover-border-color:var(--fc-fleming-white);
	--bs-btn-active-color:var(--fc-fleming-white);
	--bs-btn-hover-bg:var(--fc-slate);
	--bs-btn-active-border-color: rgba(var(--fc-slate-rgb),0.2);
	--bs-btn-disabled-color:var(--fc-fleming-white);
	--bs-btn-disabled-bg: rgba(var(--fc-slate-rgb),0.5);
	--bs-btn-disabled-border-color:var(--fc-fleming-white);
}
.blue-background .btn-dark:hover {
	box-shadow: rgba(var(--fc-fleming-white-rgb), 0.8) 0px 1px 3px, rgb(var(--fc-fleming-white-rgb), 0.8) 0px 0px 0px 2px;
}
.blue-background a.btn-dark {
	color:var(--fc-fleming-white)!important;
}

.btn-link {
	color: var(--fc-link-color)!important;
	--bs-btn-hover-color: var(--fc-link-color);
	--bs-btn-active-color: var(--fc-link-color);
	--bs-btn-disabled-color: var(--fc-link-color);
	text-decoration: underline;
}

.btn-link.with-icon::before,
.white-background .btn-link.with-icon::before,
.btn-link.with-icon-after::after,
.white-background .btn-link.with-icon-after::after {

	color: var(--fc-link-color)!important;
}


.black-background .btn-link,
.blue-background .btn-link {
	color: var(--fc-fleming-white)!important;
	--bs-btn-hover-color: var(--fc-fleming-white);
	--bs-btn-disabled-color: var(--fc-fleming-white);
}


.black-background .btn-link.with-icon::before,
.black-background .btn-link.with-icon-after::after,
.blue-background .btn-link.with-icon::before,
.blue-background .btn-link.with-icon-after::after {

	color: var(--fc-fleming-white)!important;
}

.btn-tag-pill {
	--bs-btn-color: var(--fc-fleming-black);
	--bs-btn-bg: var(--fc-fleming-teal-2);
	--bs-btn-border-color: var(--fc-fleming-teal-2);
	--bs-btn-border-radius: 0.8rem;
	--bs-btn-hover-color: var(--fc-fleming-white);
	--bs-btn-hover-bg: var(--fc-fleming-teal-1);
	--bs-btn-hover-border-color: var(--fc-fleming-teal);
	--bs-btn-focus-shadow-rgb: rgb(75, 77, 237, 100%);
	--bs-btn-active-color: var(--fc-fleming-black);
	--bs-btn-active-bg: var(--fc-fleming-teal);
	--bs-btn-active-border-color:var(--fc-fleming-teal);

	position: relative;
	font-size: 60%;
}

.blue-background a.btn-tag-pill {
	color: var(--fc-fleming-black);
}
.blue-background a.btn-tag-pill:hover {
	color: var(--fc-fleming-white);
}