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

/*THIS IS TEMPORARY until I can rewrite all client side validation. BS4 did away with "has-error" which ckError is based on*/

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
	color: #a94442;
}

.has-error .form-control,
.has-error .custom-select {
	border-color: #a94442;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

	.has-error .form-control:focus,
	.has-error .custom-select:focus {
		border-color: #843534;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
	}

.has-error .input-group-append,
.has-error .input-group-prepend {
	color: #a94442;
	background-color: #f2dede;
	border-color: #a94442;
}

.has-error .form-control-feedback {
	color: #a94442;
}
/*-----------------------------------------------------------------------------------
	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);
}

.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);
	/*for now, no difference when clicked except border*/
	--bs-btn-active-color: var(--bs-primary);
	--bs-btn-active-bg: #fff;
	--bs-btn-active-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-primary:focus, .btn-primary.focus {
		background-color: var(--bs-primary);
		border-color: var(--bs-primary);
		color: white;
		box-shadow: var(--ck-focus-box-shadow); /*to override BS default of a blue glow
	}*/

	/*.btn-primary:disabled, .btn-primary.disabled {
		/*bs format is same color, but opacity will change
		background-color: var(--bs-primary);
		border-color: var(--bs-primary);
		color: white;
	}
		*/

	/*just weird ones from BS, but need to override because these rules take effect when a btn is clicked*/
	
	/*.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
	.show > .btn-primary.dropdown-toggle {
		background-color: var(--bs-primary) !important;
		color: #FFFFFF !important;
		border-color: filter:brightness(50%); 
	}
	
		.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
		.show > .btn-primary.dropdown-toggle:focus {
			box-shadow: var(--ck-focus-box-shadow); /*to override BS default of a blue glow
			box-shadow: none;
		*/

.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	color: #fff;
	border-color: var(--bs-primary);
	background-color: var(--bs-primary);
}

.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*/
}
/*-- Breakpoint Widths --------------------------------------------*/
.w-66 {
	width: 66% !important;
}
.w-33 {
	width: 33% !important;
}
@media (min-width: 992px) {
	.w-lg-50 {
		width: 50%;
	}

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

	.w-lg-auto {
		width: auto;
	}
}
@media (min-width: 768px) {
	.w-md-50 {
		width: 50%;
	}

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

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

@media (min-width: 576px) {
    .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 * { /*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.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 and more distinct shadow
*/
.popover {
	max-width: 375px; 
/*	box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);*/
}

.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;
}
*/
	/*For the yes/no switch, make the "yes" color same as success */
	.custom-control-input:checked ~ .custom-control-label.custom-control-yesno::before {
	color: #fff;
	border-color: #48c765;
	background-color: #28a745;
}


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

/*-----------------------------------------------------------*/
.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,
.form-group > label {
	color: var(--bs-primary);
	font-weight: bold;
}
.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 {
	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;
    }








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

/*-----------------------------------------------------------*/
.toast-container {
    z-index:1055; /*on top of BS modal*/
}

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

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

	/*-----------------------------------------------------------*/
	.form-condensed .form-group,
	.form-group.form-control-condensed {
		margin-bottom: 3px; /*sometimes for a static display form (no input fields) it doesn't need to be so spaced out*/
	}

	.form-group label .help-block {
		font-weight: normal
	}


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

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



/*----------------------------------------------------------------------------------------------------------------------------
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: #a0a1a2;
			font-size: 0.85rem;
			line-height: 0.85rem;
			padding-top: 1rem;
			padding-bottom: 1rem;
			border-radius:0.3rem;
		}

		.row-form-group > .row > div:nth-child(2) {
			background-color: #ffffff;
			padding-top: 1rem;
			padding-bottom: 0.75rem; /*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 > div .group-heading {
			text-align: center;
		}

			.row-form-group > .row > div .group-heading i[class^="fa"] { /*covers fa, fal, fa-light, fas, fa-solid...*/
				padding-left: 0.5rem;
			}



		.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 */
	.row-form-group > .row > div[class^="col-xl-"] {
		margin-top: 0;
		border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
		border-radius: 0;
	}
	.row-form-group > .row:first-child > div[class^="col-xl-"] {
		border-top: 0; /*top row never has a border when expanded*/
	}
		.row-form-group > .row > div[class^="col-xl-"] .group-heading {
			text-align: right;
		}
}
@media (min-width:992px) { /* LG and above */
	.row-form-group > .row > div[class^="col-lg-"] {
		margin-top: 0;
		border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
		border-radius: 0;
	}
	.row-form-group > .row:first-child > div[class^="col-lg-"] {
		border-top:0;
	}
		.row-form-group > .row > div[class^="col-lg-"] .group-heading {
			text-align: right;
		}
}
@media (min-width:768px) { /* MD and above */
	.row-form-group > .row > div[class^="col-md-"] {
		margin-top: 0;
		border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
		border-radius: 0;
	}

	.row-form-group > .row:first-child > div[class^="col-md-"] {
		border-top: 0
	}

	.row-form-group > .row > div[class^="col-md-"] .group-heading {
		text-align: right;
	}

	.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[class^="col-sm-"] {
		margin-top: 0;
		border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
		border-radius: 0;
	}
	.row-form-group > .row:first-child > div[class^="col-sm-"] {
		border-top: 0;
	}
		.row-form-group > .row > div[class^="col-sm-"] .group-heading {
			text-align: right;
		}
}

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

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

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

		.btn-danger-hover:hover {
			color: #ffffff !important;
			background-color: #d9534f !important;
		}

		.btn-info-hover:hover {
			color: #FFFFFF !important;
			background-color: #17A2B8 !important;
		}

		.btn-success-hover:hover {
			color: #fff !important;
			background-color: #5cb85c !important;
		}

		.btn-warning-hover:hover {
			color: #fff !important;
			background-color: #f0ad4e !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-shadowed > .accordion-item {
		box-shadow: var(--bs-box-shadow-sm) !important;
	}

[class^="accordion toggle-"] .accordion-button:after,
[class^="accordion toggle-"] .accordion-button:not(.collapsed)::after {
	background-image: none; /*wipe out BS accordion preset*/
}
[class^="accordion toggle-"] .accordion-button:before {
	font-family: 'Font Awesome 6 Pro';
	padding-right: 10px;
	font-style: normal;
	font-weight: 900;
}

.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-primary);
	background-color: inherit;
}

	/* 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. 
*/
	.accordion-button:not(.collapsed) + .accordion-button-append {
		background-color: inherit; /*var(--bs-accordion-active-bg);*/
		box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
	}
	.accordion-button:not(.collapsed) + .btn-group {
		background-color: inherit; /*var(--bs-accordion-active-bg);*/
		box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
	}

.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);
	background-color: #fff;
	font-size: 1rem;
}
.accordion-button.accordion-button-sm {
	padding: calc(var(--bs-accordion-btn-padding-y) /2) var(--bs-accordion-btn-padding-x)
}



	
/*--------------------------------------------------------------------------------------------------
	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-group {
		margin-bottom: 0.25rem;
	}

	.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;
}

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


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