/*------bootstrap.css override --------------------------------------------------*/
/* 3/6/22 Started changes for BS5 */

:root {
	/*These --ck- values should be customized in each site's CSS */
	--bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
	--ck-primary-comp: #FF0000; /*set to ugly so we know it needs to be set/customized. Complement color to primary. Will be the link hover color among other things*/
	--ck-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
	--bs-link-color: var(--bs-primary);
	--bs-link-hover-color: var(--ck-primary-comp);
	--bs-tertiary: #8b8d90;
	--ck-zindex-above-modal: 1060;
	--bs-box-shadow: 0px 18px 36px -18px rgba(0,0,0,0.1),0px 30px 45px -30px rgba(50,50,93,0.25); /*more bulge. less side leakage*/
}

:root {
/*standardized settings once client stylesheet set so each one doesn't have to declare these*/
	--bs-link-color: var(--bs-primary);
	--bs-link-color-rgb: var(--bs-primary-rgb);
	--bs-link-hover-color:var(--ck-primary-comp);
	--bs-link-hover-color-rgb: var(--ck-primary-comp-rgb);
	--bs-nav-link-color:var(--bs-primary);
	--bs-nav-link-hover-color:var(--ck-primary-comp);

	--bs-body-font-family: 'Open Sans', Arial, sans-serif;
	--bs-body-font-weight:300;
}
/*-----------------------------------------------------------------------------------
	Primary
	-All controls that should use primary color. Shouldn't need most of these anymore now that using variables??
	--Definitely need text-bg-primary though because that is hardcoded color in BS
*/


.text-primary-comp {
	color:var(--ck-primary-comp) !important;
}
.text-bg-primary-comp {
	color: #fff !important;
	background-color: rgba(var(--ck-primary-comp-rgb),var(--bs-bg-opacity,1)) !important;
}
.bg-primary-comp {
	background-color:var(--ck-primary-comp) !important;
}

.table-primary {
	--bs-table-bg: var(--bs-primary-bg-subtle);
	--bs-table-border-color: var(--bs-primary-border-subtle);
}
.table-transparent {
	--bs-table-bg: transparent;
}
.btn-outline-primary {
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bs-primary); /*most important for radio buttons*/
	--bs-btn-active-border-color: var(--bs-primary);
	--bs-btn-disabled-color: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: var(--bs-primary);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bs-primary);
	--bs-btn-active-border-color: #fff;
	--bs-btn-active-border-color: var(--bs-primary-text-emphasis);
	--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
	--bs-btn-disabled-bg: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-primary-comp {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--ck-primary-comp);
	--bs-btn-border-color: var(--ck-primary-comp);
	--bs-btn-hover-color: var(--ck-primary-comp);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: var(--ck-primary-comp);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--ck-primary-comp);
	--bs-btn-active-border-color: #fff;
	--bs-btn-active-border-color: var(--ck-primary-comp);
	--bs-btn-focus-shadow-rgb: var(--ck-primary-comp-rgb);
	--bs-btn-disabled-bg: var(--ck-primary-comp);
	--bs-btn-disabled-border-color: var(--ck-primary-comp);
}

.btn-outline-primary-comp {
	--bs-btn-color: var(--ck-primary-comp);
	--bs-btn-border-color: var(--ck-primary-comp);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--ck-primary-comp);
	--bs-btn-hover-border-color: var(--ck-primary-comp);
	--bs-btn-focus-shadow-rgb: var(--ck-primary-comp-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--ck-primary-comp); /*most important for radio buttons*/
	--bs-btn-active-border-color: var(--ck-primary-comp);
	--bs-btn-disabled-color: var(--ck-primary-comp);
	--bs-btn-disabled-border-color: var(--ck-primary-comp);
}


.container-fluid.container-fluid-breakout { /*allows a full width container even if structurally already within a container. Must be !important to break the formatting of element placed on*/
    width: 100vw !important;
    position: relative;
    margin-left: -50vw !important;
    left: 50% !important;
}
/*-- Tertiary --------------------------------------------*/

.text-bg-tertiary {
	/*missing from BS*/
	color: var(--bs-tertiary-color) !important;
	background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity, 1)) !important;
}
.btn-tertiary {
	/*missing from bs and same as secondary except for background/border colors*/
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-tertiary);
	--bs-btn-border-color: var(--bs-tertiary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #5c636a;
	--bs-btn-hover-border-color: #565e64;
	--bs-btn-focus-shadow-rgb: 130, 138, 145;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #565e64;
	--bs-btn-active-border-color: #51585e;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-tertiary-color);
	--bs-btn-disabled-border-color: var(--bs-tertiary-color);
}

.bg-light-start {
	background-image: url(/_ckcommon/images/backgrounds/bg_light_start.jpg);
	background-size: contain;
	background-repeat: repeat-y;
	min-height:0 !important; /*ckcommon setting of 800px could cause to much of the background to show vertically if the content is not at least 800px*/
}

/*easier to have in a class than set a style to change the value*/
.border-dashed {
	--bs-border-style: dashed;
}
.border-dotted {
	--bs-border-style: dotted;
}
.border-solid {
	--bs-border-syle: solid;
}

/*-- Breakpoint Borderless (login card) --------------------------------------------*/
@media (max-width: 575.98px) {
    .border-xs-0 {
        border:0;
    }
	.card.border-xs-0 {
		box-shadow: none;
	}
}

/*-- Breakpoint Widths --------------------------------------------*/
.w-66 {
	width: 66% !important;
}
.w-33 {
	width: 33% !important;
}
@media (min-width: var(--bs-breakpoint-lg)) {
	.w-lg-25 {
		width: 25%;
	}
	.w-lg-33 {
		width: 33%
	}
	.w-lg-50 {
		width: 50%;
	}

	.w-lg-75 {
		width: 75%;
	}

	.w-lg-auto {
		width: auto;
	}
}
@media (min-width:var(--bs-breakpoint-md)) {
	.w-md-25 {
		width: 25%;
	}
	.w-md-33 {
		width: 33%
	}
	.w-md-50 {
		width: 50%;
	}

	.w-md-75 {
		width: 75%;
	}

	.w-md-auto {
		width: auto;
	}
}

@media (min-width: var(--bs-breakpoint-sm)) {
    .w-sm-50 {
        width:50%;
    }
	.w-sm-auto {
		width: auto;
	}
}

/*-- Focus Box Shadow (Glow) Customized --------------------------------------------*/
.pagination {
    --bs-pagination-focus-box-shadow: var(--ck-focus-box-shadow);
}

/*----------------------------------------------*/
.list-group {
	--bs-list-group-active-bg: var(--bs-primary);
	--bs-list-group-active-border-color: var(--bs-primary);
}
	.list-group.list-group-condensed .list-group-item {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}
.list-group-item.active a {
	color: var(--bs-list-group-active-color); /*BS style doesn't change A color in an active list-group, only text color. So we need to do it*/
}

.list-group .list-group-item.list-group-item-action:not(.cursor-default) * { /*without the *, pointer does not show. */
	cursor: pointer;
}

.list-group.list-group-striped li:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, 0.05);
}
.list-group.list-group-striped li:nth-of-type(odd):hover {
	background-color: rgba(0, 0, 0, 0.075);
}
/*----------------------------------------------
FORMS
Placing mandatory form field on the element itself instead of on the label. With input groups, it's common to have one label for multiple inputs

*/

.form-control:not(.autogrow):focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: var(--ck-focus-box-shadow);
}
    
.form-control.autogrow:focus {
    box-shadow:none;
}

.form-control-muted {
	background-color: var(--bs-light);
	border: 0;
}

.form-control.is-required:not(.is-invalid):not(.is-valid) {
	/*border-color: #dc3545;*/
	padding-right: calc(1.5em + .75rem);
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIiBmaWxsPSIjOUQwMDAwIj48cGF0aCBkPSJNNDEzLjggMzY4LjFDNDEwLjggMzczLjIgNDA1LjUgMzc2IDM5OS4xIDM3NmMtMi43NjYgMC01LjU2Mi0uNzE4Ny04LjEyNS0yLjIxOUwyNDAgMjg0VjQ2NGMwIDguODQ0LTcuMTU2IDE2LTE1LjEgMTZTMjA4IDQ3Mi44IDIwOCA0NjRWMjg0bC0xNTEuOSA4OS43M0M1My41OCAzNzUuMyA1MC43OSAzNzYgNDguMDIgMzc2Yy01LjQ2OSAwLTEwLjgtMi44MTItMTMuOC03Ljg1OWMtNC40ODQtNy42MDktMS45NjktMTcuNDIgNS42NDEtMjEuOTJMMTkyLjUgMjU2TDM5Ljg2IDE2NS44Yy03LjYwOS00LjUtMTAuMTItMTQuMzEtNS42NDEtMjEuOTJjNC41MzEtNy41NzggMTQuMzEtMTAuMDYgMjEuOTItNS42NDFMMjA4IDIyNy4xVjQ4QzIwOCAzOS4xNiAyMTUuMiAzMiAyMjQgMzJTMjQwIDM5LjE2IDI0MCA0OHYxNzkuMWwxNTEuOS04OS43M2M3LjY0MS00LjQyMiAxNy40Mi0xLjkzOCAyMS45MiA1LjY0MWM0LjQ4NCA3LjYwOSAxLjk2OSAxNy40Mi01LjY0MSAyMS45MkwyNTUuNSAyNTZsMTUyLjcgOTAuMjJDNDE1LjcgMzUwLjcgNDE4LjMgMzYwLjUgNDEzLjggMzY4LjF6Ii8+PC9zdmc+');
	background-position: right calc(.375em + .1875rem) center;
	background-size: calc(.3em + .375rem) calc(.3em + .375rem);
	background-repeat: no-repeat;
}

.form-select.is-required:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"] {
	padding-right: 4.125rem;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIiBmaWxsPSIjOUQwMDAwIj48cGF0aCBkPSJNNDEzLjggMzY4LjFDNDEwLjggMzczLjIgNDA1LjUgMzc2IDM5OS4xIDM3NmMtMi43NjYgMC01LjU2Mi0uNzE4Ny04LjEyNS0yLjIxOUwyNDAgMjg0VjQ2NGMwIDguODQ0LTcuMTU2IDE2LTE1LjEgMTZTMjA4IDQ3Mi44IDIwOCA0NjRWMjg0bC0xNTEuOSA4OS43M0M1My41OCAzNzUuMyA1MC43OSAzNzYgNDguMDIgMzc2Yy01LjQ2OSAwLTEwLjgtMi44MTItMTMuOC03Ljg1OWMtNC40ODQtNy42MDktMS45NjktMTcuNDIgNS42NDEtMjEuOTJMMTkyLjUgMjU2TDM5Ljg2IDE2NS44Yy03LjYwOS00LjUtMTAuMTItMTQuMzEtNS42NDEtMjEuOTJjNC41MzEtNy41NzggMTQuMzEtMTAuMDYgMjEuOTItNS42NDFMMjA4IDIyNy4xVjQ4QzIwOCAzOS4xNiAyMTUuMiAzMiAyMjQgMzJTMjQwIDM5LjE2IDI0MCA0OHYxNzkuMWwxNTEuOS04OS43M2M3LjY0MS00LjQyMiAxNy40Mi0xLjkzOCAyMS45MiA1LjY0MWM0LjQ4NCA3LjYwOSAxLjk2OSAxNy40Mi01LjY0MSAyMS45MkwyNTUuNSAyNTZsMTUyLjcgOTAuMjJDNDE1LjcgMzUwLjcgNDE4LjMgMzYwLjUgNDEzLjggMzY4LjF6Ii8+PC9zdmc+');
	background-position: right .75rem center,center right 2.25rem;
	background-size: 16px 12px,calc(.3em + .375rem) calc(.3em + .375rem);
}

.form-check-input:checked {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}


.form-range:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 1px #fff, var(--ck-focus-box-shadow);
}

.form-range:focus::-moz-range-thumb {
	box-shadow: 0 0 0 1px #fff, var(--ck-focus-box-shadow);
}
/*----------------------------------------------*/
a.stretched-link:hover {
	/*do not show underline on a stretched link. It'll underline everything it's stretched over*/
	text-decoration: none;
}
/* BS5: Using .table-responsive within a flex container will not work unless the flex item which wraps .table-responsive has min-width:0 set*/
.flex-table-responsive {
	min-width: 0;
}
/*-----------------------------------------------------------*/

/* Popover
	-slightly larger max width 
*/
.popover {
	max-width: 375px; 
}
.popover-image {
	max-width: 840px; /*so an image in a popover can show large*/
	box-shadow: var(--bs-box-shadow);
}
.popover-icon-info {
	color: #FF9966;
}

	.popover-icon-info:hover, .popover-icon-info:visited, .popover-icon-info:active {
		text-decoration: none;
	}





.tooltip {
	--bs-tooltip-max-width: 395px;
}
.tooltip-inner {
	text-align: left;

	--bs-tooltip-padding-x: 1rem;
	--bs-tooltip-padding-y: 0.775rem;
}

.custom-tooltip {
	--bs-tooltip-opacity: 1;
}
.custom-tooltip .tooltip-inner {
	padding:0.475rem;
}
	 
	
	/*A yellow background popover stands out on the typical white background of a site. The BS default is a white popover.*/
	/*.tooltip.show {
	opacity: 1;
}
.tooltip-inner {
	max-width: 395px;
	background-color: #FFFFE7;
	color: #404040;
	box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
	border: 1px solid #EEEEEE;
	text-align: left;
}

.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {
	border-top-color:#d0d0d0;
}
.bs-tooltip-right .tooltip-arrow::before, .bs-tooltip-auto[x-placement^="right"] .tooltip-arrow::before {
	border-right-color: #d0d0d0;
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before {
	border-bottom-color: #d0d0d0;
}
.bs-tooltip-left .tooltip-arrow::before, .bs-tooltip-auto[x-placement^="left"] .tooltip-arrow::before {
	border-left-color: #d0d0d0;
}
*/


/*-----------------------------------------------------------*/
/*BS version is too dark and looks like a regular input. Lighten and italicize. Does not work unless each psuedo element has it's own rule*/

.form-control::-webkit-input-placeholder {
	color: #CACBCC;
	font-style: italic;
}
.form-control::-moz-placeholder {
	color: #CACBCC;
	font-style: italic;
}
.form-control:-ms-input-placeholder {
	color: #CACBCC;
	font-style: italic;
}
.form-control::-ms-input-placeholder {
	color: #CACBCC;
	font-style: italic;
}
.form-control:placeholder {
	color: #CACBCC;
	font-style: italic;
}

.form-floating > label {
	font-style: italic;
	opacity:0.45; /*reversing what BS does. I want light as placeholder, then darker when content typed*/
}

.form-floating > .form-control-plaintext ~ label, 
.form-floating > .form-control:focus ~ label, 
.form-floating > .form-control:not(:placeholder-shown) ~ label, 
.form-floating > .form-select ~ label {
	opacity:1;
}

/*-----------------------------------------------------------*/

.p-6 {
	padding: 6rem !important;
}
.py-6 {
	padding-top: 6rem !important;
	padding-bottom: 6rem !important;
}
.px-6 {
	padding-left: 6rem !important;
	padding-right: 6rem !important;
}

/*-----------------------------------------------------------*/
legend {
	font-size: 14px;
	font-weight: bold;
}
.ratio-9x16 {
	--bs-aspect-ratio: 177.7777777778%;
}
/*-----------------------------------------------------------*/
/*Default tabs need a background color and slight gap between so they stand out as tabs. Background color needs to be visible on ckcommon F9F9F9 background */
.nav-tabs .nav-item {
	background-color:var(--bs-light);
	margin-right:0.25rem;	
}
.nav-tabs .nav-link:hover {
	background-color: #EEEEEE;	
}
.nav-tabs .nav-link.active {
	border-top: 1px solid #6D6E6F;
	
}

.nav-tabs li.nav-item.nav-text {
	background:none;
	border-bottom: 0;
	padding-left: 3rem;
	padding-right:0.5rem;
	align-self: center !important;
}
@media (min-width:768px) {
	/* on small screens, gaps aren't worth it*/
	.nav-tabs li.gap {
		background: none;
		border-bottom: 0px;
		padding-left: 25px;
	}
}

.nav-pills .nav-link {
	--bs-nav-pills-link-active-bg: var(--bs-primary); /*override BS primary blue color hardcode*/
}
/*-----------------------------------------------------------*/
.img-thumbnail-user { /*img-fluid not needed in conjunction with this*/
	/*padding:1px;*/
	/*box-shadow:0 5px 5px -5px rgba(0,0,0,0.5);*/
	height: auto; /*so max-width and responsive layouts will scale images as appropriate to the container*/
	border-radius: var(--bs-border-radius);
	max-width: 100%;
}
	.img-thumbnail-user.user-xs {
		width: 30px;
		min-width: 30px;
		/*height:30px; do not specify a height since max-width and responsive layouts will scale images as appropriate to the container*/

	}
	.img-thumbnail-user.user-sm {
		width: 45px;
		min-width: 45px;
		/*height:50px; do not specify a height since max-width and responsive layouts will scale images as appropriate to the container*/
		
	}
	.img-thumbnail-user.user-md {
		width: 80px;
		min-width: 80px;
	}
	.img-thumbnail-user.user-lg {
		width: 100px;
		min-width: 100px;
	}
	.img-thumbnail-user.user-noshadow {
		box-shadow: none;
	}



/*-----FORMS---------------------------------------------------------------------------*/
label.col-form-label,
label.form-label {
	color: var(--bs-primary);	
	font-weight:600;
}
.form-text-help {
	color:rgba(var(--bs-secondary-rgb),0.8);
}





/*only want it right align when not stacked (but each field could have different breakpoints. Hmmm....maybe why bs4 always aligns left*/
@media (min-width: 768px) {	
	/* use bs responsive breakpoints for alignment instead...i.e. text-lg-end. But for most circumstances, this works*/
	.col-form-label {
		text-align: right;
	}
    
	
}
@media (max-width: 991.98px) {
    /*modal on medium screens generally too small for side by side form fields*/
    .modal-content .col-form-label {
        text-align: left !important;
    }
}



	/*-----------------------------------------------------------*/
	.caret-up {
		border: 0;
		border-bottom: 4px solid;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
		vertical-align: bottom;
	}

/*-----------------------------------------------------------*/
.table TH,
.row.thead > [class*="col-"] {
	font-weight: bold;
	font-size: 0.75rem;
	color: rgba(0,0,0,0.5);
	border-color: rgba(150,150,150,0.2);
}

.table-striped.table-hover tbody tr:nth-of-type(odd):hover {
	background-color: rgba(0, 0, 0, 0.07);
}


.table-fixed  {
    height:300px;
    overflow-y:scroll;
    width:100%;
}
    .table-fixed thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #FFF;
        box-shadow: inset 0px -1px 0px 0px #CCCCCC;
        overflow:unset; /*SO article indicating overflow set may cause sticky to not work on some browsers*/
    }
    .table-fixed table {
        overflow: unset;
    }



table.table-hover[data-ck-selection-mode=""] tr:not(.no-hover) td:last-child > *,
table.table-hover[data-ck-selection-mode="actions"] tr:not(.no-hover) td:last-child > *,
.list-group[data-ck-selection-mode="actions"] .list-group-item-action .row:not(.no-hover) > [class*="col-"]:last-child > * {
	/*actions is standard listing with buttons in last cell*/
	opacity: 0.2;
}

table.table-hover[data-ck-selection-mode=""] tr:hover td:last-child > *,
table.table-hover[data-ck-selection-mode="actions"] tr:hover td:last-child > * ,
.list-group[data-ck-selection-mode="actions"] .list-group-item-action:hover .row > [class*="col-"]:last-child > * {
	opacity: revert;
}

/*when a table has a checkbox in a column and stretched-link is used to make the row clickable, position-relative has to be on the row, but that collapses borders, so this visually recreates the collapsed border*/
table.table-hover[data-ck-selection-mode="select"] > tbody .stretched-link::after {
	cursor: pointer !important;
}
table.table-hover[data-ck-selection-mode="select"] tr.position-relative::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px; /* Some rows look thicker than others, but zooming browser out looks good so...hmmm */
	background-color:var(--bs-border-color);
}

/*Allow certain rows to not show hover colors*/
.table-hover > tbody > tr.no-hover:hover > * {
	--bs-table-color-state: initial; 
	--bs-table-bg-state: initial; 
}



/*BS has table-sm, but not table-lg for added padding */
.table-lg > :not(caption) > * > * {
    padding: 1rem 1rem;
}

tr.table-group-divider {
	/*only on TR so a divider on tbody will still just make a dark line under header*/
	border-top: 3rem solid #FFF;
	border-bottom: 1px solid var(--bs-border-color);
}

.table.table-hover:has(.stretched-link) {
	/*when adding relative on a TR (for stretched-link), the borders collapse so aren't shown*/
	border-collapse: separate;
}
}
/*-----------------------------------------------------------*/
.toast-container {
    z-index:var(--ck-zindex-above-modal);
}

.toast.toast-dark {
	--bs-toast-bg: rgba(0,0,0,0.8);
	--bs-toast-color: #fff;
	--bs-toast-header-bg: rgba(0,0,0,0.95);
	--bs-toast-header-color: rgba(255,255,255,0.8);
	border:0;
}
	.toast.toast-dark .btn-close {
		filter:var(--bs-btn-close-white-filter);
	}

	/*-----------------------------------------------------------*/
	/*modal standard alert shows directly below the title and is full width, so radius border does not look good. Only modify for that one, not other alerts which appear in modals*/


.modal {
	--bs-modal-footer-bg: #F5F5F5;
	--bs-backdrop-opacity: 0.6;
	backdrop-filter:blur(3px);
}
	.modal .modal-status {
		background-color: var(--bs-modal-footer-bg);
		border-bottom-left-radius: 6px;
		border-bottom-right-radius:6px;
		color: #454545;
	}

	.modal form {
		background-color: var(--bs-modal-bg); /*solution right now for modal containers not being in BS required order*/
	}

.modal-dialog.modal-wait {
	width: 500px;
}
.modal-content {
	box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22), 0 25px 55px 0 rgba(0,0,0,0.21);
}
.modal-title {
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: calc(1.275rem + .3vw); /* h4 */
}

#modal_fullimage {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: black;
}
	#modal_fullimage > div {
		background-size: contain;
		background-repeat: no-repeat no-repeat;
		background-position: center center;
		height:90vh;
	}

@media (max-width: 768px) {
	.modal-dialog.modal-wait, .modal-dialog.modal-alert {
		width: auto;
	}

}

form .modal-body,
.modal-body form
.modal-body .form-placeholder {
	/*to make it so form elements don't extend to the extreme right side of a modal, I typically only use an 11 column grid instead of 12. To eliminate that practice, adding extra side padding to modals. Both sides same to keep even for centered elements*/
	padding-right: 2.2rem;
	padding-left: 2.2rem;
}


/*-----------------------------------------------------------*/
.dropdown-menu {
	--bs-dropdown-link-active-bg : var(--bs-primary); /*color that shows when a dropdown item is clicked on*/
}
	.dropdown-menu.dropdown-menu-padded > li > a {
		padding: 10px 20px; /*looks better with a little more spacing (6px vs 3px)*/
	}

/*-----------------------------------------------------------
Row/Col layouts
---------------------------------------------------------------*/

	DIV.col-heading {
		background: none;
		border: 0;
		font-weight: normal;
		font-size: 18px;
		line-height: 21px;
		border-bottom: 1px solid #DDDDDD;
		padding: 35px 0 4px 0;
		margin-bottom: 10px;
		text-transform: uppercase;
		color: #888888;
	}

		DIV.col-heading.top {
			padding-top: 0;
		}


	/*------bootstrap.css extend --------------------------------------------------*/
	hr.hr-sm {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	

	small.tiny {
		font-size: 60%;
	}

	dl.dl-horizontal {

	}
		dl.dl-horizontal > div {
			display:flex;
			justify-content:space-between !important;
		}
			dl.dl-horizontal > div dt {
				flex:1 1 auto !important;
				text-align:right;
				margin-right:1rem;
			}
			dl.dl-horizontal > div dd {
				flex: 1 1 auto !important;
			}


	@media (min-width:768px) {
		.dl-horizontal-lg dt {
			width: 250px;
		}

		.dl-horizontal-lg dd {
			margin-left: 270px;
		}
	}



	.row > .no-stack-gap {
		margin-bottom: 0 !important;
	}

	.row .no-col-gap > [class*="col-"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/*-----------------------------------------------------------*/


	.navbar a span.desc,
	.dropdown-menu a span.desc {
		/*smaller descriptive text underneath normal link text*/
		display: block;
		font-size: smaller;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #aaaaaa;
	}

	.dropdown-menu a span.desc-inline {
		display: inline;
		padding-left: 10px;
	}




	/*-------------------------------------------------------------
All this for the little caret to show between the dropdown menu and navbar. Only shows when the navbar is not collapsed*/

	@media (min-width:768px) {
		.navbar:not(.navbar-fixed-bottom) .navbar-nav > li.dropdown-onhover:hover:not(.disabled) > a:after,
		.navbar.dropdown-onhover:not(.navbar-fixed-bottom) .navbar-nav > li:hover:not(.disabled) > a:after,
		.navbar:not(.navbar-fixed-bottom) .navbar-nav.dropdown-onhover > li:hover:not(.disabled) > a:after,
		.navbar:not(.navbar-fixed-bottom) .navbar-nav > .open > a:after {
			bottom: -2px;
			border-width: 0px 8px 8px;
		}

		.navbar.dropdown-onhover:not(.no-open-arrow) .navbar-nav > li:hover:not(.disabled) > a.dropdown-toggle:after,
		.navbar.dropdown-onhover:not(.no-border):not(.no-open-arrow) .navbar-nav > li:hover:not(.disabled) > a.dropdown-toggle:before,
		.navbar:not(.no-open-arrow) .navbar-nav.dropdown-onhover > li:hover > a.dropdown-toggle:after,
		.navbar:not(.no-border):not(.no-open-arrow) .navbar-nav.dropdown-onhover > li:hover > a.dropdown-toggle:before,
		.navbar:not(.no-open-arrow) .navbar-nav > li.dropdown-onhover:hover > a.dropdown-toggle:after,
		.navbar:not(.no-border):not(.no-open-arrow) .navbar-nav > li.dropdown-onhover:hover > a.dropdown-toggle:before,
		.navbar:not(.no-active-arrow) .navbar-nav > .active > a:after,
		.navbar:not(.no-border):not(.no-active-arrow) .navbar-nav > .active > a:before,
		.navbar:not(.no-open-arrow) .navbar-nav > .open > a.dropdown-toggle:after,
		.navbar:not(.no-border):not(.no-open-arrow) .navbar-nav > .open > a.dropdown-toggle:before {
			content: " ";
			position: absolute;
			left: 50%;
			width: 0px;
			height: 0px;
			border-style: solid;
			line-height: 0px;
			margin-left: -8px;
			border-color: transparent;
			z-index: 1001;
		}

		.navbar.navbar-inverse:not(.navbar-fixed-bottom) .navbar-nav > .open > a:after,
		.navbar.navbar-inverse:not(.navbar-fixed-bottom) .navbar-nav > li.dropdown-onhover:hover:not(.disabled) > a:after,
		.navbar.navbar-inverse:not(.navbar-fixed-bottom) .navbar-nav.dropdown-onhover > li:hover:not(.disabled) > a:after {
			border-bottom-color: #ffffff;
		}

		.navbar.navbar-default:not(.navbar-fixed-bottom) .navbar-nav > .open > a:after,
		.navbar.navbar-default:not(.navbar-fixed-bottom) .navbar-nav > li.dropdown-onhover:hover:not(.disabled) > a:after,
		.navbar.navbar-default:not(.navbar-fixed-bottom) .navbar-nav.dropdown-onhover > li:hover:not(.disabled) > a:after {
			border-bottom-color: #ffffff;
		}

		.navbar-nav > li > .dropdown-menu {
			margin-top: 1px;
		}
	}
	/*-----------------------------------------------------------*/

	.badge.badge-danger {
		background-color: #d9534f;
	}

	.badge.badge-info {
		background-color: #5bc0de;
	}

	.badge.badge-success {
		background-color: #5cb85c;
	}
	/*-----------------------------------------------------------*/
.card-footer {
	/*used in BS5, but not defined */
	--bs-card-cap-padding-y: 1.25rem;
	--bs-card-cap-padding-x: 1.25rem;
}
.card-actions {
	margin-bottom: 1rem;
	border:0;
}
	.card-actions .card-footer {
		background-color: #F4F5F6;
		border: 0;
	}
	.card-actions.card-actions-sm .card-footer {
		--bs-card-cap-padding-y: 0.5rem;
	}
	.card-footer > button {
		/*only apply if a direct descendant so it doesn't affect btn-group buttons*/
		margin-right: 2px;
		margin-left: 2px;
	}

	
	

	/*-----------------------------------------------------------*/
div:has(> div.wait-cover) {
	/*ensure parent of a wait-cover has same minimum height, otherwise cover will appear over other content*/
	min-height:2rem;
}

.wait-cover {
	position: absolute;
	z-index: var(--ck-zindex-above-modal);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	min-height: 2rem;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	background: transparent !important;
	/*colored background doesn't look good when cover container is not in a contained area...such as with comments.  background:rgba(0,0,0,0.05);*/
	color: #000000 !important;
	overflow:hidden;
}


.modal-body.alert {
    border-width:0px 0px 0px 15px;
    margin-bottom:0;
}
.modal-body.alert-danger {
    border-color: var(--bs-danger);
}

.alert-sm {
    margin-bottom: 0.4rem;
    --bs-alert-padding-y:0.375rem;
}

    .alert-sm.alert-dismissible .btn-close {
        padding-top: calc((var(--bs-alert-padding-y) + 0.5rem) / 2);
        background-size: 0.75em;
        height:0.5em;
    }

	.alert-waiting {
		background: url(/_ckcommon/images/loading_16x16.gif) no-repeat;
		background-position: 10px 50%;
		background-color: #EDEEEF;
		color: #666768;
		padding-left: 2.5rem;
		border: 1px solid #E0E1E2;
	}

.alert-faint {
	background-color: rgba(175,176,177,.05);
	color: rgba(175,176,177,1);
	border: 1px solid rgba(175,176,177,0.5);
}

	.alert-more {
		color: #8a6d3b;
		background-color: #fcf8e3;
		border-color: #faebcc;
		text-align: center;
		cursor: pointer;
	}

		.alert-more i {
			opacity: 0.5
		}

		.alert-more:hover {
			color: #66512c;
		}

			.alert-more:hover i {
				opacity: 1.0
			}

	

	/*-----------------------------------------------------------*/
	.text-faint {
		color: rgba(0,0,0,0.25); /*phase out in favor of below*/
	}

	.text-faint-inverted {
		color: rgba(255,255,255,0.25);
	}

	/*Include A selector so regular A style will not override if this used. */
	.text-faint-dark,
	a.text-faint-dark {
		color: rgba(0,0,0,0.2) !important;
	}

	.text-faint-light,
	a.text-faint-light {
		color: rgba(255,255,255,0.75) !important; /*Usually white on a dark background, so alpha is 75% white, otherwise to light to see sometimes*/
	}

.xsmall {
	font-size: 0.5em;
}

.search-results mark { /*BS adds padding, but search content uses mark to highlight matched words, which may be partial matches so mark tag placed in middle of text. Padding adds visual space in middle of word in that case*/
	padding: 0;
}
	/*-----------------------------------------------------------*/
	.row-striped-group > .row:nth-of-type(even) {
		background-color: rgba(0,0,0,0.03); /*instead of setting a color, use opacity so still looks good rendered on a different color (dark) background*/
	}

	.row-striped-group > .row {
		padding-top: 15px;
		padding-bottom: 15px;
	}

		.row-striped-group > .row:nth-child(1) {
			padding-top: 0px;
		}





/*----------------------------------------------------------------------------------------------------------------------------
ROW-FORM-GROUP

Everyone starts out with what we want the stacked view to look like (top border, center text) then, detect what the row-form-group breakpoint 
is (look at first div breakpoint) and remove the border if we're at or above that.

*/
.row-form-group {
}
	.row-form-group > .row {
		margin-left: 0; /*default BS row pushes margins out left and right, which for this component will cause sides to appear out of bounds. Readjust*/
		margin-right: 0;
		
	}
	.row-form-group.row-bordered > .row {
		border-radius: var(--bs-border-radius);
		margin-top: 1rem;
		margin-bottom: 1rem;
		border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
	}


	.row-form-group > .row > div:first-child {
		background-color: #f4F5F6;
		margin-top: 3rem;
		/**/
		color: var(--bs-gray-500);
		font-size: 0.875rem;
		padding-top: 1.75rem;
		padding-bottom: 1.75rem;
		border-radius: 0.3rem;
	}
		.row-form-group > .row > div:first-child.sysadmin {
			background-color: var(--bs-warning-bg-subtle);
		}

	.row-form-group > .row > div:nth-child(2) {
		background-color: #ffffff;
		padding-top: 2.25rem;
		padding-bottom: 2rem; /*less on bottom because typical for elements within to already have a bottom margin*/
	}

	.row-form-group > .row:first-child > div:first-child { /*top most has no margin (usually directly below action bar or tab) */
		margin-top: 0;
	}

	.row-form-group > .row:last-child > div:nth-child(2) {
		padding-bottom:10rem !important; /*especially good on intranet so form doesn't touch bottom and column 1 colored fill extends t*/
	}
	.modal-body .row-form-group > .row:last-child > div:nth-child(2) {
		padding-bottom: 2rem !important;
	}


	.row-form-group > .row > div .group-heading {
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		color: var(--bs-primary);
		gap: 0.5rem;
	}
		.row-form-group > .row > div .group-heading i[class^="fa"],
		.row-form-group > .row > div .group-heading span[class^="fa"] {
			color: rgba(200,200,200,0.4) !important;
		}



	.row-form-group > .row > div:nth-child(3),
	.row-form-group > .form-row > div:nth-child(3) { /*usually help block style. See article properties. Do not make different bg color because content in this area may not be same size as other col*/
		color: #A0A0A0;
		background-color: #fcfcfc;
		border-left: 1px solid #F0F0F0;
		font-size: 0.8rem;
		text-align: justify;
		padding-top: 25px;
		padding-bottom: 15px;
		padding-right: 15px;
	}


	.row-form-group .action-row {
		background-color: rgba(244,245,246,0.5);
		padding: 10px;
		/*negative margins extend row to full width of BS col using same method as BS rows*/
		margin-right: -15px;
		margin-left: -15px;
	}

		.row-form-group .action-row.action-top {
			margin-bottom: 1rem;
			margin-top: -1rem; /*overcome the padding added to the row-form-group column*/
		}

		.row-form-group .action-row.action-bottom {
			margin-top: 1rem;
			margin-bottom: -0.75rem; /*overcome the padding added to the row-form-group column*/
		}

	.row-form-group .form-group.action-row {
		/*when combining with form-group class, padding adjusts to overcome negative margins BS puts on form-group*/
		padding-right: 25px;
		padding-left: 25px;
	}

		


@media (min-width:1200px) { /* XL and above */

}
@media (min-width:992px) { /* LG and above */
	.row-form-group > .row > div .group-heading {
		flex-direction:column;
	}
		.row-form-group > .row > div .group-heading i[class^="fa"],
		.row-form-group > .row > div .group-heading span[class^="fa"] {
			font-size: 1.5rem;
		}

}
@media (min-width:768px) { /* MD and above */
	.row-form-group.row-bordered > .row > div[class^="col-md-"] {
		border-top: 0;
	}
}
@media (min-width:576px) { /* SM and above */
	.row-form-group > .row > div {
		border-top: 1px dotted var(--bs-border-color);
	}

		.row-form-group > .row > div:first-child {
			margin-top: 0;
			border-radius: 0;
		}

	.row-form-group > .row:first-child > div {
		border-top: 0;
	}
}

@media(min-width:768px) {
	/*only for widths greater than sm should the transparent mod be active.  On xs, the row-form-group typically is set to stack, so we want the color separation*/
	.row-form-group.transparent > .row,
	.row-form-group.transparent > .form-row,
	.row-form-group.transparent > .row > div:nth-child(2),
	.row-form-group.transparent > .form-row > div:nth-child(2) {
		background: none;
	}
}
/*----------------------------------------------------------------------------------------------------------------------------*/

.fa-duotone.icon-duotone-primary {
	--fa-primary-color:var(--bs-primary);
	--fa-secondary-color:var(--bs-secondary);
}
	
/*An example of how to format these*/
.fa-duotone.fa-french-fries.duotone-colored {
	--fa-primary-color: rgb(218, 41, 28);
	--fa-secondary-color: rgb(255, 199, 43);
}

.fa-eyes.searching {
	--fa-animation-iteration-count: 500;
	--fa-animation-duration: 3s;
	--fa-animation-timing: step-start;
	--fa-primary-color: #000;
	--fa-primary-opacity: 0.2;
	--fa-secondary-color: #000;
	--fa-secondary-opacity: 1;
}

.fa-animate.fa-point {
	/*discontinued by FA, but perfect for arrows pointing*/
	animation: animate-point 1.5s ease-in-out infinite alternate;
}
@keyframes animate-point {
	0% {
		transform: scale(1) translateX(0);
		opacity: 1;
	}

	5% {
		transform: scale(0.9) translateX(5px); /* Adjust translateX for direction */
		opacity: 0.8;
	}

	10% {
		transform: scale(1) translateX(0);
		opacity: 1;
	}
	15% {
		transform: scale(1.1) translateX(5px); /* Adjust translateX for direction */
		opacity: 0.8;
	}

	20% {
		transform: scale(1) translateX(0);
		opacity: 1;
	}
}
/*-----------------------------------------------------------*/
/*BS uses .dropdown-toggle to automatically add a caret on dropdown buttons and split dropdowns, but ALSO looks for that class to provide rounded edges 
	on the right side of split buttons/groups...so we can't not have the class. This class allows us to hide the caret, but keep the .dropdown-toggle classname on the element.
	Then we can add our own icon in the split button element
*/
.dropdown-toggle.dropdown-toggle-custom::after {
	display: none;
}

/*standard btn-link still has all the button padding an alignment, so can't be placed inline along other text*/
.btn.btn-inline {
	vertical-align:baseline;
	padding:0;
	border:0;
	--bs-btn-font-weight:var(--bs-body-font-weight);
}

/*think they just forgot to put their opacity settting on this. They have it hardcoded to 0.65*/
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
	opacity: var(--bs-btn-disabled-opacity);
}
a.btn[disabled], a.btn:disabled, a:disabled {
	pointer-events: none;
	color: var(--bs-btn-disabled-color);
	background-color: var(--bs-btn-disabled-bg);
	border-color: var(--bs-btn-disabled-border-color);
	opacity: var(--bs-btn-disabled-opacity);
}
/*group mods to look better specifically for icon only groups*/

.btn-group.border-0 button, .btn-group-vertical.border-0 button {
	border: 0;
}
.btn-group.rounded-0 button,
.btn-group-vertical.rounded-0 button {
	border-radius: 0;
}


.btn-group button.btn-light {
	border-color: #DCDDDE; /*so on btn-group, you can see a little delimiter*/
}
.btn-group button.btn-secondary {
	border-color: #828a93; /*so on btn-group, you can see a little delimiter*/
}
.btn-group button.btn-primary {
	border-color: var(--bs-primary-text-emphasis); /*so on btn-group, you can see a little delimiter*/
}
	button.btn-lg, .btn-lg { /*I like a larger button area, but not a huge font, so smaller font than BS, and more padding to make up for it*/
		/*padding: 15px 25px; Modifying this makes it so the "lg" size doesn't align with btn-group-lg sized buttons unless I were to modify that class too. Decided just to leave BS default*/
	}

	button.btn-xl, .btn-xl { /*no such thing in BS*/
		/*font-size: 24px;
		padding: 20px 30px;
		border-radius: 5px;
		*/
		--bs-btn-padding-y:0.75rem;
		--bs-btn-padding-x: 1.25rem;
		--bs-btn-font-size:1.5rem;
		--bs-btn-border-radius:var(--bs-border-radius-lg);
	}

.btn-group .btn-icononly,
.btn-group-vertical .btn-icononly {
	/*slightly thinner and shorter, but only when displayed in the group (actions). Pair with btn-outline-secondary for best results (white background). BS4 removed default white button, so adding white back too*/
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #FFF;
	--bs-btn-border-color:#DfDfDF;
	--bs-btn-padding-x:0.5rem;
	--bs-btn-padding-y:0.15rem;
}

	/*btn-group will collapse on table-responsive if screen too small, so this avoids that, but only use for "action" column type situations with simple buttons (https://github.com/twbs/bootstrap/issues/9939) */
	.btn-group.btn-group-nowrap {
		white-space: nowrap;
	}

		.btn-group.btn-group-nowrap .btn {
			float: none;
			display: inline-block;
		}

.btn-group-borderless .btn-icononly {
	--bs-btn-border-color: rgba(255,255,255,0);
}
.btn-group.btn-group-circled {
	align-items: center !important;
}
.btn-group.btn-group-circled .btn-icononly {
	border-radius: 50% !important;
	--bs-btn-padding-x: 0.325rem;
	--bs-btn-padding-y: 0.2rem;

}
.btn-group.btn-group-circled .btn-icononly i,
.btn-group.btn-group-circled .btn-icononly span {
	width: 1.25em !important;
	height: 1.25em !important;
}


@media(max-width:500px) {
	/*on very small screens button groups like the one at the bottom of programs needs just a little less padding to fit*/
	.btn-group .btn {
		padding-left: 0.4rem;
		padding-right: 0.4rem;
	}
}

	

	.btn.btn-radio.active {
		background-color: #58B058;
		background-image: -moz-linear-gradient(center top, #51A351, #62C462);
		background-repeat: repeat-x;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		color: #FFFFFF;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	}

.icon-edit {
	color: #d1920c;
	--fa-primary-color: #d1920c;
	--fa-secondary-color: #929292;
}

.icon-info {
	color: #0000CC;
}

.icon-note {
	color: #FFE44A;
}

.icon-spoof {
	color: #707070;
}

.icon-approve,
.icon-activate {
	color: #468847;
}

.icon-delete,
.icon-sysadmin-delete,
.icon-remove,
.icon-user-times,
.icon-deactivate,
.icon-inactive,
.icon-decline,
.icon-error,
.icon-view-error {
	color: #b94a48;
}

.icon-rss {
	color: #FF9326;
}

.icon-users {
	--fa-primary-color: #555555;
	--fa-secondary-color: var(--bs-primary);
}
.icon-settings, .icon-properties {
	color: #454545;
}
.icon-bookmark {
	color: #96623e !important;
	--fa-primary-color: #96623e;
	--fa-secondary-color: #96623e;
}


	/*-----------------------------------------------------------*/
	.fa-rotate-45 {
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.fa-rotate-315 {
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3.5);
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		-ms-transform: rotate(315deg);
		-o-transform: rotate(315deg);
		transform: rotate(315deg);
	}


	.fa-btn {
		/* a fa icon acting like a button, but must use bootstrap btn class as well. button identifier required in declaration so padding will be enforced on .close */
		/*padding: 0 0.15em 0.15em;*/
		background: none;
		color: inherit;
	}

		.fa-btn:hover {
			color: #000000;
			background-color: #F6F6F6;
		}

		
.btn-white { /*useful to have a simple white button for use on bg-light background*/
	--bs-btn-bg: #fff;
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: var(--bs-border-color);
	--bs-btn-hover-color: var(--ck-primary-comp);
}


	.btn-text-success-hover,
	.btn-text-info-hover,
	.btn-text-warning-hover,
	.btn-text-primary-hover,
	.btn-text-secondary-hover {
		color: rgba(0,0,0,0.2); 
	}

		.btn-text-primary-hover:hover {	--bs-btn-hover-color: var(--bs-primary); }
		.btn-text-warning-hover:hover {	--bs-btn-hover-color: var(--bs-warning); }
		.btn-text-sucdess-hover:hover {	--bs-btn-hover-color: var(--bs-success); }
		.btn-text-info-hover:hover {	--bs-btn-hover-color: var(--bs-info); }
		.btn-text-secondary-hover:hover {	--bs-btn-hover-color: var(--bs-secondary); }

.btn-text-danger-hover {
	--bs-btn-hover-color: var(--bs-danger);
	--bs-btn-color: rgba(0,0,0,0.2);
}

	.btn-danger-hover,
	.btn-success-hover,
	.btn-info-hover,
	.btn-warning-hover,
	.btn-primary-hover,
	.btn-secondary-hover {
		color: rgba(0,0,0,0.2); /*this was commented out. Not sure why. Without, all icon buttons on helpticket are black*/
	}

		.btn-danger-hover:hover {
			color: #ffffff !important;
			background-color: var(--bs-danger) !important;
		}

		.btn-info-hover:hover {
			color: #FFFFFF !important;
			background-color: var(--bs-warning) !important;
		}

		.btn-success-hover:hover {
			color: #fff !important;
			background-color: var(--bs-success) !important;
		}

		.btn-warning-hover:hover {
			color: #fff !important;
			background-color: var(--bs-warning) !important;
		}
		.btn-primary-hover:hover {
			color: #FFF !important;
			background-color: var(--bs-primary) !important;
		}
		.btn-secondary-hover:hover {
			color: #FFF !important;
			background-color: var(--secondary) !important;
		}

	


/*Toggle icon on accordion. Modifier class toggle-* placed on .accordion container.  */
.accordion {
	--bs-accordion-btn-focus-border-color: var(--bs-focus-ring-color);
	--bs-accordion-btn-focus-box-shadow:var(--ck-focus-box-shadow);
	
}
	.accordion.item-separated > .accordion-item {
		border-radius: var(--bs-border-radius);
		margin-top: 1rem;
		margin-bottom: 1rem;
		border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
	}
		.accordion.item-separated > .accordion-item .accordion-button.collapsed {
			border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
			border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
			border-top-left-radius: var(--bs-accordion-inner-border-radius);
			border-top-right-radius: var(--bs-accordion-inner-border-radius);
		}

	.accordion.item-shadowed > .accordion-item {
		box-shadow: var(--bs-box-shadow-sm) !important;
	}


[class^="accordion"][class*="toggle-"] .accordion-button:after,
[class^="accordion"][class*="toggle-"] .accordion-button:not(.collapsed)::after {
	background-image: none; /*wipe out BS accordion preset*/
}
[class^="accordion"][class*="toggle-"] .accordion-button:before {
	font-family: 'Font Awesome 7 Pro';
	padding-right: 10px;
	font-style: normal;
	font-weight: 900;
}
/*appealing for long lists, like Site types*/
[class^="accordion"][class*="toggle-"] .accordion-button:hover:before {
	color:var(--ck-primary-comp);
}

.accordion.toggle-chevron .accordion-button:before {
	content: "\f078";
}
.accordion.toggle-chevron .accordion-button.collapsed:before {
	content: "\f054";
}

.accordion.toggle-chevron-circle .accordion-button:before {
	content: "\f13a";
}

.accordion.toggle-chevron-circle .accordion-button.collapsed:before {
	content: "\f138";
}
.accordion.toggle-chevron-square .accordion-button:before {
	content: "\f329";
}

.accordion.toggle-chevron-square .accordion-button.collapsed:before {
	content: "\f32b";
}

.accordion.toggle-caret .accordion-button:before {
	content: "\f0d7";
}

.accordion.toggle-caret .accordion-button.collapsed:before {
	content: "\f0da";
}

.accordion.toggle-plusMinus .accordion-button:before {
	content: "\f068";
}

.accordion.toggle-plusMinus .accordion-button.collapsed:before {
	content: "\f067"
}

.accordion.toggle-plusMinusCircle .accordion-button:before {
	content: "\f056";
}

.accordion.toggle-plusMinusCircle .accordion-button.collapsed:before {
	content: "\f055"
}




.accordion-button:not(.collapsed) {
	color: var(--bs-accordion-active-color);
	background-color: var(--bs-accordion-active-bg); 
}

	/* 
	--A button which appears next to the accordion actuator button, in the same accordion header. Example, have a button far right to edit program, but rest of accordion header opens accordion. All this
	does is make it change to the same background as the opened accordion. 
	--Always add the standard btn class to the appended button so we can take advantage of --bs-btn-- variables
	*/
	.accordion-button:not(.collapsed) + .accordion-button-append {
		/*background-color: var(--bs-accordion-active-bg);*/
		box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
		--bs-btn-bg: var(--bs-accordion-active-bg);
		--bs-btn-hover-bg:#fff
	}
	.accordion-button:not(.collapsed) + .btn-group {
		background-color: var(--bs-accordion-active-bg);
		box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
	}

.accordion-header:has(.accordion-button-append) .accordion-button {
	border-top-right-radius: 0;
}

.accordion-button-append { /*certain styles need to match accordion-button*/
	border: 0;
	padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
	font-size: 1rem;
	--bs-btn-bg: #fff;
	--bs-btn-hover-bg:var(--bs-accordion-active-bg);
}
.accordion-button.accordion-button-sm {
	padding: calc(var(--bs-accordion-btn-padding-y) /2) var(--bs-accordion-btn-padding-x)
}



/*just annoying to have a table in an accordion/collapse, which already has lines and the last line of the table is next to the line of the accordion header*/
.accordion-collapse .table:first-of-type tr:last-child td {
	--bs-border-width: 0;
}
	
/*--------------------------------------------------------------------------------------------------
	Printing is important in programs. Collapsed items should print expanded...and other modifications. Originally
	written for program calculation printing, so if any of these defaults do not work elsewhere, be sure to test CFF program
*/

@media print {

	
	.collapse {
		display: block !important;
		height: auto !important;
	}
	tr.collapse {
		display: table-row !important;
	}

	.popover-label {
		border-bottom: 0
	}

	.form-control {
		padding: 0.275rem, 0.5rem;
		line-height: 1;
	}

	.form-control-label {
		line-height: 1;
	}

	pre, blockquote {
		/*for some reason BS4 puts border on blockquote when printed*/
		border: 0;
	}


	.modal.modal-printable {
		visibility: visible !important;
		overflow: visible !important;
		position:unset; /* very important*/
	}

	.modal-printable .modal-dialog {
		/*combines all the same settings as modal-fullscreen and modal-dialog-scrollable*/
		width: 100vw;
		max-width: none;
		height: 100%;
		margin: 0;
		/**/
		visibility:visible !important;
		overflow:visible !important;
	}

		.modal-printable .modal-content {
			height: 100%;
			border: 0;
			border-radius: 0;
			/**/
			max-height: 100%;
			/*overflow: hidden;*/
			box-shadow:none;
		}

		.modal-printable .modal-header,
		.modal-printable .modal-footer {
			border-radius: 0;
		}

		.modal-printable .modal-body {
			overflow-y: auto;
		}

		.modal-printable + .modal-backdrop {
			display:none;
		}
	
}
/*--------------------------------------------------------------------------------------------------*/

	/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/

	.carousel-fade .carousel-inner .item {
		opacity: 0;
		transition-property: opacity;
	}

	.carousel-fade .carousel-inner .active {
		opacity: 1;
	}

		.carousel-fade .carousel-inner .active.left,
		.carousel-fade .carousel-inner .active.right {
			left: 0;
			opacity: 0;
			z-index: 1;
		}

	.carousel-fade .carousel-inner .next.left,
	.carousel-fade .carousel-inner .prev.right {
		opacity: 1;
	}

	.carousel-fade .carousel-control {
		z-index: 2;
	}

	/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
	@media all and (transform-3d), (-webkit-transform-3d) {
		.carousel-fade .carousel-inner > .item.next,
		.carousel-fade .carousel-inner > .item.active.right {
			opacity: 0;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		.carousel-fade .carousel-inner > .item.prev,
		.carousel-fade .carousel-inner > .item.active.left {
			opacity: 0;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

			.carousel-fade .carousel-inner > .item.next.left,
			.carousel-fade .carousel-inner > .item.prev.right,
			.carousel-fade .carousel-inner > .item.active {
				opacity: 1;
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
	}



/*- Jukebox List. Built off format of fa-ul so simple adding .jukebox will work. Same look, but different than ol.jukebox ------------------------------------------------------------------------------------------*/
.fa-ul.jukebox {
	
}

@media (min-width: 768px) {
	.fa-ul.jukebox {
		margin-right:var(--fa-li-margin,2.5em);
	}
}
.fa-ul.jukebox li {
	padding: 1em 2em 1em 2em;
	margin: .5em 0 0.5em 1.5em;
	display: flex;
	align-items: center;
}

.fa-ul.jukebox li .fa-li {
	background: #999;
	border-radius: 2em;
	border: 0.3em solid #FFF;
	width: 3em;
	height: 3em;
	line-height: 2.5em;
	align-content: center;
	text-align: center;
	color: #FFF;
	display: block;
}

.fa-ul.jukebox.jukebox-words li {
	padding-left:5.5em;
}
.fa-ul.jukebox.jukebox-words li .fa-li {
	width:6.5em;
	border-radius:0;
}



/*hide tooltips SM and above. Must declare this custom tooltip class when creating*/
@media (min-width: 576px) {
	.tooltip-sm-none {
		display:none;
	}
}
@media (min-width: 768px) {
	/*hide tooltips MD and above*/
	.tooltip-md-none {
		display:none;
	}
}