/*------------------------------------------------------------------
HTML Tag Styles
------------------------------------------------------------------*/
BODY {
    /*iPhone/mobile fix for enlarged text*/
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: none;
	position:relative;
/**/
	background: #fff;
	isolation: isolate;
	--ck-split-bg-left: var(--bs-light);
	--ck-split-bg-right: #fff;

}


/*--------------------------------------------------------------------------------------------------*/
.ckcommon-site {
	background:transparent;
	margin-top:50px !important; /*profile navbar fixed*/
	/*overflow:hidden; important for hero type containers and split-bg. NO. Prevents scrollbars*/
	/*site layout designed with this so split-bg has a single container background dimensions to worry about*/
}


.ckcommon-wrap {
	background: transparent; /*required for split background on body to show*/
}

	.ckcommon-wrap.ckcommon-intranet {
		--bs-body-font-family: 'Open Sans', Arial, sans-serif;
		--bs-body-font-weight: 300;
		padding-bottom: 0; /*trying out to see. Added extra padding to row-form-group which is common intranet control*/
	}

.ckcommon-intranet .ckcommon {
	padding-top: 1.5rem;
}
.ckcommon {
	/*The ckcommon qualifier is so individual sites don't have to set a padding for all left containers but can control anything there for ckcommon pages.  E.g. NASP has image that needs to be all the way top, but needs padding for ckcommon pages like contacts and conversations.*/
	padding-top: 3rem;
	padding-bottom: 3rem;
	min-height: 600px;
	flex-grow: 1 !important;
}

	/*The .ck-wrap-split-bg class allows setting on interior page and having it affect entire body*/
	body:has(.wrap-split-bg)::before {
		content: "";
		position: absolute;
		inset: 0;
		right: 0;
		z-index: -1;
		width: 100%;
		height:100%;
		min-width:100vw;
		left: 50%;
		transform:translateX(-50%);
		pointer-events:none; /*prevent intercepting clicks*/

		/*default gutter on columns is 1.5, so since we can't access the --bs-gutter-x var since we're not on a row, set here to handle a large majority of cases*/
		--ck-split-gutter-calc:calc(1.5rem / 2);
		/* compute split offset in viewport space. */
		background: linear-gradient( to right, 
			var(--ck-split-bg-left,var(--bs-light)) 
				calc( 
						( (100vw - var(--container-max, 1320px)) / 2 ) 
						+ ( var(--container-max, 1320px) * var(--ck-split-bg-calc,0.5) )
						+ var(--ck-split-gutter-calc)
					), 
			var(--ck-split-bg-right,#fff) 
				calc( 
						( (100vw - var(--container-max, 1320px)) / 2 ) 
						+ ( var(--container-max, 1320px) * var(--ck-split-bg-calc,0.5) ) 
						+ var(--ck-split-gutter-calc)
					) 
		);
	}

	/* Map data-split variants to ratios (left side %)  */
	.split-bg[data-ck-split="6\/6"], .ckcommon-wrap:has(.wrap-split-bg[data-ck-split="6\/6"]), body:has(.wrap-split-bg[data-ck-split="6\/6"]) {
		--ck-split-bg-calc: calc(6/12);
	}
	.split-bg[data-ck-split="5\/7"], .ckcommon-wrap:has(.wrap-split-bg[data-ck-split="5\/7"]), body:has(.wrap-split-bg[data-ck-split="5\/7"]) {
		--ck-split-bg-calc: calc(5/12);
	}
	.split-bg[data-ck-split="7\/5"], .ckcommon-wrap:has(.wrap-split-bg[data-ck-split="7\/5"]), body:has(.wrap-split-bg[data-ck-split="7\/5"]) {
		--ck-split-bg-calc: calc(7/12);
	}
	.split-bg[data-ck-split="4\/8"], .ckcommon-wrap:has(.wrap-split-bg[data-ck-split="4\/8"]), body:has(.wrap-split-bg[data-ck-split="4\/8"]) {
		--ck-split-bg-calc: calc(4/12);
	}
	.split-bg[data-ck-split="8\/4"], .ckcommon-wrap:has(.wrap-split-bg[data-ck-split="8\/4"]), body:has(.wrap-split-bg[data-ck-split="8\/4"]) {
		--ck-split-bg-calc: calc(8/12);
	}
	.split-bg[data-ck-split="2\/10"], .ckcommon-wrap:has(.wrap-split-bg[data-ck-split="2\/10"]), body:has(.wrap-split-bg[data-ck-split="2\/10"]) {
		--ck-split-bg-calc: calc(2/12);
	}
	.split-bg[data-ck-split="3\/9"], .ckcommon-wrap:has(.wrap-split-bg[data-ck-split="3\/9"]), body:has(.wrap-split-bg[data-ck-split="3\/9"]) {
		--ck-split-bg-calc: calc(3/12);
	}

@media (min-width: 576px)  { .split-bg::before,.ckcommon-wrap:has(.wrap-split-bg)::before, body:has(.wrap-split-bg)::before { --container-max: 540px; } }
@media (min-width: 768px)  { .split-bg::before,.ckcommon-wrap:has(.wrap-split-bg)::before, body:has(.wrap-split-bg)::before { --container-max: 720px; } }
@media (min-width: 992px)  { .split-bg::before,.ckcommon-wrap:has(.wrap-split-bg)::before, body:has(.wrap-split-bg)::before { --container-max: 960px; } }
@media (min-width: 1200px) { .split-bg::before,.ckcommon-wrap:has(.wrap-split-bg)::before, body:has(.wrap-split-bg)::before { --container-max: 1140px; } }
@media (min-width: 1400px) { .split-bg::before,.ckcommon-wrap:has(.wrap-split-bg)::before, body:has(.wrap-split-bg)::before { --container-max: 1320px; } }
@media (min-width: 1600px) { .split-bg::before,.ckcommon-wrap:has(.wrap-split-bg)::before, body:has(.wrap-split-bg)::before { --container-max: 1440px; } }
@media (min-width: 1800px) { .split-bg::before,.ckcommon-wrap:has(.wrap-split-bg)::before, body:has(.wrap-split-bg)::before { --container-max: 1560px; } }
@media (min-width: 2000px) { .split-bg::before,.ckcommon-wrap:has(.wrap-split-bg)::before, body:has(.wrap-split-bg)::before { --container-max: 1680px; } }


/* login/join ------------------------------------------------------------*/
#syslogin {
	--bs-modal-padding: 0;
}
	#syslogin .img-fluid {
		max-height:450px;
		min-height:450px;
		max-width:300px;
	}


	#syslogin .nav-pills {
	}

		#syslogin .nav-pills .nav-link:not(.active) {
			background-color: var(--bs-secondary-bg);
			color: rgba(var(--bs-secondary-rgb),0.4);
		}

		#syslogin .nav-pills .nav-link.active {
			--bs-nav-pills-link-active-color: var(--ck-primary-comp);
			--bs-nav-pills-link-active-bg: var(--bs-body-bg);
		}

		#syslogin .nav-pills .arrow span {
			--fa-primary-color: var(--ck-primary-comp);
			--fa-secondary-color: #fff;
		}

		#syslogin .nav-pills .nav-link.active + .arrow span {
			--fa: "\f359";
			/*transform: scaleX(-1);*/
		}

.



/* cksynopsis ------------------------------------------------------------*/
.cksynopsis {
    --ck-synopsis-height: 200;
    position: relative;
    display: block; /*important if place on elements like <small> */
    max-height: calc(1px * var(--ck-synopsis-height)); /*allows placing this class on element so initial display (before DOMContentLoaded fires) is max height and screen doesn't jump*/
    overflow:hidden;
}
    .cksynopsis.collapsed {
        height: calc(1px * var(--ck-synopsis-height));
        overflow: hidden;
    }
    .cksynopsis.show {
        overflow:visible;
        max-height:max-content;
        height:max-content;
    }

    .cksynopsis.collapsed .fade-out {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 30px 0;
        /* "transparent" only works here because == rgba(0,0,0,0) */
        background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }


a.cksynopsis-toggle.collapsed span:nth-child(1) {
    display: inline-block;
}

a.cksynopsis-toggle.collapsed span:nth-child(2) {
    display: none;
}

a.cksynopsis-toggle:not(.collapsed) span:nth-child(1) {
    display: none;
}

a.cksynopsis-toggle:not(.collapsed) span:nth-child(2) {
    display: inline-block;
}
/* ckautogrow ------------------------------------------------------------*/


/*New method without replicated value. So much simpler. Not sure why needed all this other before */
.ckautogrow {
	/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
	display: grid;
	overflow-y: auto;
	flex-grow: 1 !important;
	border:var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	background-color:#FFF; /*otherwise padding visible if textarea on non-white background*/
}
    .ckautogrow:focus-within {
        /*activate normal BS style focus on parent*/
        border-color: var(--bs-focus-ring-color);
        box-shadow: var(--ck-focus-box-shadow);
    }
    .ckautogrow::after {
        /* Note the weird space! Needed to preventy jumpy behavior */
        content: attr(data-replicated-value) " ";
        /* This is how textarea text behaves */
        white-space: pre-wrap;
        /* Hidden from view, clicks, and screen readers */
        visibility: hidden;
    }

    .ckautogrow  textarea {
        /* You could leave this, but after a user resizes, then it ruins the auto sizing */
        resize: none;
        /* Firefox shows scrollbar on growth, you can hide like this. */
        overflow: hidden;
    }

    .ckautogrow  textarea,
    .ckautogrow::after {
        /* Identical styling required!! */
        font: inherit;
        /* Place on top of each other */
        grid-area: 1 / 1 / 2 / 2;
        /*match form-control, but border now only on ckautogrow*/
        border: 0;
        width: 100%;
        line-height: 1.5rem;
        padding: 0.375rem 0.75rem;
        border-radius:0.375rem;
    }


/*Need to replicate BS .form-control settings for validation since autogrow hides textarea. Need to apply to autogrow div instead */
.was-validated .ckautogrow:valid, .ckautogrow.is-valid {
    border-color: #28a745;
}
.was-validated .ckautogrow:invalid, .ckautogrow.is-invalid {
    border-color: #dc3545;
}

/*------------------------------------------------------------------------------------------------------------------
Fonts
--------------------------------------------------------------------------------------------------------------------*/

@font-face {
	font-family: "Dancing Script";
	src: url("/ckcommon/util/fonts/dancing-script/DancingScript-VariableFont_wght.ttf") format('truetype');
	font-size-adjust: 1.5;
}
@font-face {
	font-family: "Meow Script";
	src: url("/ckcommon/util/fonts/meow-script/MeowScript-Regular.ttf") format('truetype');
	font-weight:400;
}

@font-face {
	font-family: "Casino Hand";
	src: url("/ckcommon/util/fonts/casino_hand/casino_hand-webfont.eot?#iefix");
	src: url("/ckcommon/util/fonts/casino_hand/casino_hand-webfont?#iefix") format("embedded-opentype"), url("/ckcommon/util/fonts/casino_hand/casino_hand-webfont.woff") format("woff"), url("/ckcommon/util/fonts/casino_hand/casino_hand-webfont.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

.handwriting,
.ff-handwriting-standard {
	font-family: 'Casino Hand', cursive !important;
	font-weight: normal;
	font-size: 24px;
	line-height: 1 !important;
}

.ff-handwriting-script {
	font-family: 'Meow Script',cursive !important;
	line-height: 1.875;
	font-size-adjust:0.5; /*simply too small otherwise. No effect if placed in @font-face*/
}
.ff-blocked {
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	letter-spacing:-0.03rem;
}

@font-face {
	font-family: 'sohne-var';
	src: url('/ckcommon/util/fonts/sohne/sohne.woff2') format('woff2');
}


@font-face {
	font-family: "Redacted";
	src: url("/ckcommon/util/fonts/redacted/Redacted-Regular.ttf") format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: "Redacted Script";
	src: url("/ckcommon/util/fonts/redacted/RedactedScript-Bold.ttf") format('truetype');
	font-weight: 700;
}

@font-face {
	font-family: "Redacted Script";
	src: url("/ckcommon/util/fonts/redacted/RedactedScript-Regular.ttf") format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: "Redacted Script";
	src: url("/ckcommon/util/fonts/redacted/RedactedScript-Light.ttf") format('truetype');
	font-weight: 300;
}

.redacted {
	font-family: Redacted;
	letter-spacing: 0.25rem;
}

.redacted-script {
	font-family: 'Redacted Script';
}



/*--Special font that looks good in headers. Diff sizes needed since it's a smaller/condensed font. 0.5rem above BS  --------------------------------------------------------------------*/
.fst-condensed {
	letter-spacing:-0.0675em;
}
/*------------*/
.tiny {
	font-size: 0.65rem;
}

.help-label {
	border-bottom: 2px dotted #CCCCCC;
	cursor: help;
	padding-bottom:2px; /*slight separation between border and icons or other elements that may make border hard to see*/
}

	.help-label.help-label-white {
		border-bottom-color: #FFFFFF;
	}

	.help-label.help-label-dark {
		border-bottom-color: #333333;
	}

.cursor-zoom-in {
	cursor: -moz-zoom-in;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
}
.cursor-pointer {
	cursor: pointer;
}

.cursor-default,
.cursor-default:hover {
	cursor: default;
}
.d-hover-block {
	display: none;
}
	a:hover .d-hover-block {
		display: block;
	}
.d-hover-inline {
	display: none;
}
	a:hover .d-hover-inline {
		display: inline;
	}
/*----------------------------------------------------
Hide spinner arrows on input type="number" boxes. With right aligned numbers, they just clutter the box.*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
	-moz-appearance: textfield; /* Firefox */
}

input[type=date] {
	min-width: 14rem !important;
	max-width: 14rem !important; /*just looks better to not have browser calendar control so close to numbers. !important so stays even in input-group*/
}
/*----------------------------------------------------
	see ckError for implementation
*/
.modal-alert .ck-error-icon {
	display:none;
}

/*----------------------------------------------------*/
.list-recordCount {
	--bs-border-opacity: 1;
	--bs-border-color: var(--bs-primary-bg-subtle);
	background-color: var(--bs-primary-bg-subtle) !important;
	color: var(--bs-primary-text-emphasis) !important;
	border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	border-radius: var(--bs-border-radius) !important;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	margin-right: 0.5rem;
	margin-left: 0.5rem;
	font-weight:bold;
	/*transition: transform 0.3s ease, opacity 0.3s ease;*/
	display: inline-block;
	transition: transform 0.3s ease;
}
	.list-recordCount.updating {
		transform: scale(1.2);
		opacity: 0.6;
	}
		.list-recordCount.updating.pulse {
			transform: scale(1.4);
			opacity: 0.5;
			transition: transform 0.25s ease-out, opacity 0.25s ease-out;
		}

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

.ck-arrowbadge-right {
	position: relative;
	background: var(--bs-primary) !important;
	color: white !important;
	font-size: 1.75rem !important;
	/*flex*/
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	display: -ms-inline-flexbox;
	display: inline-flex;
	padding: 0.5rem;
	margin-right: 2rem;
}

	.ck-arrowbadge-right + div {
		letter-spacing: -0.035rem;
		font-size: 2rem !important;
	}

	.ck-arrowbadge-right:after,
	.ck-arrowbadge-right:before {
		content: "";
		position: absolute;
		width: 1.25rem;
		height: 50%;
		left: 100%;
	}

	.ck-arrowbadge-right:after {
		bottom: 0;
		background: linear-gradient(to right bottom, var(--bs-primary) 50%, transparent 50%);
	}

	.ck-arrowbadge-right:before {
		top: 0;
		background: linear-gradient(to right top, var(--bs-primary) 50%, transparent 50%);
	}

	.ck-arrowbadge-right.arrowbadge-sm {
		margin-right: 1.5rem;
		padding: 0.25rem 0.5rem;
		font-size: 1.5rem !important;
	}
		.ck-arrowbadge-right.arrowbadge-sm + div {
			font-size: 1.5rem !important;
		}

		.ck-arrowbadge-right.arrowbadge-sm:after, .ck-arrowbadge-right.arrowbadge-sm:before {
			content: "";
			position: absolute;
			width: 1rem;
			height: 50%;
			left: 100%;
		}


/*----- Common Contact -------------------------------------------------------------*/
#commonContact.thankYouContainer {
	font-size:14px;
	font-weight:bold;
	color:#333333;
	padding:15px;
	text-align:center;
}



.backgroundColor {
	background-color: #2d3851;
}


TD.popupHeader {
	font-size:13px;
	background:url(/images/popupHeaderFill.jpg) repeat-x top left;
	font-weight:bold;
	margin-bottom:5px;
	padding:0px;
	margin:0px;

}


ul.arrows {
	padding-left: 20px;
	list-style: none;
	margin-left: 15px;
}
	ul.arrows li {
		margin-bottom: 3px;
	}
	ul.arrows > li:before {
		font-family: 'Font Awesome 5 Pro';
		content: "\f30b";
		margin: 0 5px 0 -20px;
		font-style: normal;
		font-weight: normal;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	ul.arrows.arrows-sm li {
		font-size:0.75rem;
	}


.ellipsis {
	width: 230px;/*default. should be controlled with inline style*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}



/*---------------------------------------------------------------
Text
----------------------------------------------------------------*/
.textSm		 { font-size: 9px; }
.textMed	 { font-size: 11px; }
.textLg		 { font-size: 12px; }
.textHigh    { color: #6f2222; }
.textBlend   { color: #b2b0a6; }
.textError   { color: #ff0000; }
.textWarning { color: #FF0000; }
.text-strike {
	text-decoration: line-through;
}


.text-rank-gold {
	color:#FFD700 !important;
}
.text-rank-silver {
	color :#C0C0C0 !important;
}
.text-rank-bronze {
	color:#CD7F32 !important;
}
.text-rank-mention {
	color: #E9E9E9 !important;
}

/*---------------------------------------------------------------
Forms
----------------------------------------------------------------*/

.formMandatory {
    color: var(--bs-danger);
    font-size:0.75rem;
}



/*----- TAB ---------------------------------*/
DIV.ck-tabContent {
	display:none;
	
	min-height:400px; /*so small tabs stay at least a little consistent*/
	clear:left; /*required for FF so content stays within tab DIV*/
	width:100%; /*using width:100% and padding left or right causes IE to make it slightly too short, and FF too long but eliminating it makes the tab too wide*/
	padding-top:0.875rem;
	padding-bottom:0rem; /*removing bottom padding allows containers to full extend to bottom of screen. Add padding to content within the tab (like row-form-group does) if needed*/
	padding-right:0px;
	padding-left:0px;
	
}


/*----- ckQuickview ---------------------------------*/
DIV.ckQuickview-defaultWrapper {
	padding:6px;
	position:absolute;
	border:1px solid #999999;
	background-color:#FFFFCC;
	color:#666666;
	display:none;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	
	box-shadow:1px 1px 8px #525252;
	-moz-box-shadow: 1px 1px 8px #525252;
	-webkit-box-shadow: 1px 1px 8px #525252;
	-khtml-box-shadow: 1px 1px 8px #525252;

}
DIV.ckQuickview-icon {
	background-image:url(/_ckcommon/images/icons/moreInfo.gif);
	background-repeat:no-repeat;
	float:left;
	width:23px;
	height:13px;
	cursor:help;
	margin-right:4px;
	
}
/*----- Paging ----------------------------------------*/
DIV.pagination {
	color:#000000;
	font-size:11px;
	font-family:Arial;
	font-weight:bold;
}
DIV.pagination .disabled {
	font-weight:normal;
	color:#999999;
	float:left;
}
DIV.pagination .separator,
DIV.pagination .currentPage {
	float:left;
	margin:0 6px 0 6px;
}
DIV.pagination .currentPage { 
	font-weight:bold;
}
DIV.pagination A {
	font-weight:normal;
	display:block;
	float:left;
	padding:0 3px 0 3px;
	margin:0 5px 0 5px;
}
DIV.pagination A:hover { }


						
/*-------------------- 
HTML5
----------------------*/

::-webkit-input-placeholder {
	color: #AAA;
	font-style: italic;
}

:-moz-placeholder {
	color: #AAA;
	font-style: italic;
}



/*-----------------------------------------------------------------------------
Common Layout Classes
-----------------------------------------------------------------------------*/
.grey-bg {
	background: none repeat scroll 0% 0% #F7F8F8 !important;
	border-bottom: 1px solid #dadfe1;
}
	.grey-bg.border {
		padding: 15px;

	}
	.grey-bg .inner-border {
		border: 1px solid rgba(176, 186, 191, 0.25);
		
	}



DIV.divider { /*DIV qualifier important to avoid conflict with LI dividers*/
	width: 50px;
	height: 1px;
	margin-top: 15px;
	margin-bottom:15px; /*do not specify left-right so we can use center-block class to center*/
	background-color:rgba(105,121,129,0.5);
}
	DIV.divider.divider-sm {
		width: 50px;
	}
	DIV.divider.divider-md {
		width: 100px;
	}
	DIV.divider.divider-lg {
		width: 150px;
	}


.overlay-x-black {
	background: url(/ckcommon/images/backgrounds/overlay_x_black.png) repeat;
}
.overlay-x-white {
	background: url(/_ckcommon/images/backgrounds/overlay_x_white.png) repeat;
}

.overlay-horiz-white {
	background: url(/_ckcommon/images/backgrounds/overlay_horiz_white.png) repeat;
}

.overlay-diag {
	background: url(/_ckcommon/images/backgrounds/overlay_diag.png) repeat;
}
.overlay-diag-white {
	background: url(/_ckcommon/images/backgrounds/overlay_diag_white.png) repeat;
}
.overlay-diag-purple {
	background: url('/_ckcommon/images/backgrounds/overlay_diag_purple.png?v=101123.1245') repeat;
}
.overlay-diag-blue {
	background: url('/_ckcommon/images/backgrounds/overlay_diag_blue.png?v=101123.1245') repeat;
}
.overlay-dark * {
	color:rgba(255,255,255,0.85) !important;
}
.pattern-diag-white {
	background: url('/_ckcommon/images/backgrounds/pattern_diag_white.png') repeat;
}
.pattern-dots-white {
	background: url('/_ckcommon/images/backgrounds/pattern_dots_white.png') repeat;
}
.parallax {
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}
/*-------------------------------------------------------*/
.block-title {
	position: relative;
	margin-bottom: .25em;
	font-weight: 600;
	text-transform: uppercase;
	padding: 30px 35px;
	line-height: 1;
	text-align: center;
	display: inline-flex !important;
	margin: -.5675em auto .5em auto;
	background: #CCCCCC;
	color: #FFFFFF;
	font-size: 55px;
}
	.block-title.top { /*if appears at the top of the page, we don't want a negative margin*/
		margin: 0.5675em auto .5em auto;
	}
	.block-title:before {
		content: ' ';
		display: block;
		position: absolute;
		left: 0;
		top: 100%;
		height: 0;
		width: 0;
		border-left: .5em solid transparent;
		border-top: .375em solid #C0C0C0;
		z-index: 10;
	}
	.block-title.light {
		color: white;
		text-shadow: 1px 0 0 #1c3635, 2px 1px 0 #f4eb64, 2px 0 0 #f4eb64;
	}

/*------ standardized sizing for padding and margins */
 /*do not specify a left/right padding with cushions so this can be used in conjunction with border-left/right. Used on any container, including col */
.cushion-none {
	padding-top:0;
	padding-bottom:0;
}
.cushion-xs {
	padding-top: 15px;
	padding-bottom: 15px;
}
.cushion-sm {
	padding-top: 30px;
	padding-bottom: 30px;
}
.cushion-md {
	padding-top: 60px;
	padding-bottom: 60px;
}
.cushion-lg {
	padding-top: 80px;
	padding-bottom: 80px;
}
.cushion-xl {
	padding-top: 150px;
	padding-bottom: 150px;
}

.cushion-bottom-none {
	padding-bottom: 0;
}
.cushion-bottom-xs {
	padding-bottom: 15px;
}
.cushion-bottom-sm {
	padding-bottom: 30px;
}
.cushion-bottom-md {
	padding-bottom: 60px;
}
.cushion-bottom-lg {
	padding-bottom: 80px;
}
.cushion-bottom-xl {
	padding-bottom: 150px;
}

.cushion-top-none {
	padding-top: 0;
}
.cushion-top-xs {
	padding-top: 15px;
}
.cushion-top-sm {
	padding-top: 30px;
}
.cushion-top-md {
	padding-top: 60px;
}
.cushion-top-lg {
	padding-top: 80px;
}
.cushion-top-xl {
	padding-top: 150px;
}

.cushion-right-none {
	padding-right: 0;
}
.cushion-right-xs {
	padding-right: 15px;
}
.cushion-right-sm {
	padding-right: 20px;
}
.cushion-right-md {
	padding-right: 25px;
}
.cushion-right-lg {
	padding-right: 30px;
}
.cushion-right-xl {
	padding-right: 35px;
}
.cushion-left-none {
	padding-right: 0;
}
.cushion-left-xs {
	padding-left: 15px;
}
.cushion-left-sm {
	padding-left: 20px;
}
.cushion-left-md {
	padding-left: 25px;
}
.cushion-left-lg {
	padding-left: 30px;
}
.cushion-left-xl {
	padding-left:35px;
}
@media (max-width: 767px) {
	.cushion-none-xs {
		padding: 0px;
	}
}
@media (min-width:768px) and (max-width:991px) {
	.cushion-none-sm {
		padding: 0px;
	}
}



@media(min-width:768px) {
	/*mobile first, so normal bootstrap padding for xs is not destroyed. */
	/*for xs displays, no reason to show border and padding since always collapsed (and it messes up centered elements if not)*/
	.border-padding-x {
		border-left: 1px solid #dadfe1;
		padding-left: 40px;
		border-right: 1px solid #dadfe1;
		padding-right: 40px;
	}
	.border-padding-left { /*border-left and border-right go directly on col containers*/
	  border-left: 1px solid #dadfe1;
	  padding-left: 40px;
	}

	.border-padding-right {
	  border-right: 1px solid #dadfe1;
	  padding-right: 40px;
	}
	.padding-right { /*placed in the column to the left of a border-left class*/
		padding-right: 40px;
	}
	.padding-left { /*placed in the column to the right of a border-right class*/
		padding-left: 40px;
	}

}


/*---------------------------------------------------------------------------
Special Shadows
---------------------------------------------------------------------------*/

.shadow-inset {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px 0px inset;
}

.shadow-muted {
	/*large, but slightly less noticeable than BS large*/
	box-shadow: 0 0 30px 0 rgba(0,0,0,.04);
}

.shadow-corners {
	position: relative;
}

	.shadow-corners:before, .shadow-corners:after {
		z-index: -1;
		position: absolute;
		content: "";
		left: 10px;
		width: 50%;
		max-width: 300px;
		background: #777;
	}

	.shadow-corners.shadow-corners-top:before,
	.shadow-corners.shadow-corners-top:after {
		bottom: 80%;
		top: 15px;

		-webkit-box-shadow: 0 -15px 10px #777;
		-moz-box-shadow: 0 -15px 10px #777;
		box-shadow: 0 -15px 10px #777;

		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-o-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		transform: rotate(3deg);
	}
	.shadow-corners.shadow-corners-bottom:before,
	.shadow-corners.shadow-corners-bottom:after {
		bottom: 15px;
		top: 80%;

		-webkit-box-shadow: 0 15px 10px #777;
		-moz-box-shadow: 0 15px 10px #777;
		box-shadow: 0 15px 10px #777;

		-webkit-transform: rotate(-3deg);
		-moz-transform: rotate(-3deg);
		-o-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);
	}

	.shadow-corners.shadow-corners-bottom:after {
		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-o-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		transform: rotate(3deg);
		right: 10px;
		left: auto;
	}

	.shadow-corners.shadow-corners-top:after {
		-webkit-transform: rotate(-3deg);
		-moz-transform: rotate(-3deg);
		-o-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);
		right: 10px;
		left: auto;
	}





.shadow-squeeze {
	position: relative;
}

	.shadow-squeeze:before, .shadow-squeeze:after {
		content: "";
		position: absolute;
		z-index: -1;
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
		top: 0;
		bottom: 0;
		left: 10px;
		right: 10px;
		-moz-border-radius: 100px / 10px;
		border-radius: 100px / 10px;
	}

	.shadow-squeeze:after {
		right: 10px;
		left: auto;
		-webkit-transform: skew(8deg) rotate(3deg);
		-moz-transform: skew(8deg) rotate(3deg);
		-ms-transform: skew(8deg) rotate(3deg);
		-o-transform: skew(8deg) rotate(3deg);
		transform: skew(8deg) rotate(3deg);
	}



.shadow-fade-bottom {
	box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}
.shadow-fade-top {
	box-shadow: rgba(33, 35, 38, 0.1) 0px -10px 10px -10px;
}
/* Sortable Table ckSortableTable.js. Important override necessary to counteract BS5 striped table rules. The nowrap on grip allows table-numbered to appear properly */
.table-sortable td.table-sortable-grip {
	color: rgba(0,0,0,0.1) !important;
	
}
	.table-sortable td.table-sortable-grip:hover {
		cursor: ns-resize;
		background-color: rgba(0,0,0,0.1) !important;
		color:#FFFFFF !important;
	}
.table-sortable .invalid-position {
	border:2px solid #FF0000;
}

select optgroup {
	background: var(--bs-light);
	
	font-style: normal;
	font-weight: normal;
}


/*designed to allow numbering on rows that were also sortable, so sorting automatically renumbers. If table is sortable, number appears after sort grip*/
.table-numbered {
	counter-reset: row-number;
}

	.table-numbered tbody tr {
		counter-increment: row-number;
	}

	.table-numbered tr td:first-child {
		white-space: nowrap !important;
	}

	.table-numbered tr td:not(.table-sortable-grip):first-child::before {
		content: counter(row-number) ". ";
		font-weight: normal;
		color: var(--bs-gray-500);
		margin-right: 0.875rem;
	}

	.table-numbered tr td.table-sortable-grip:first-child::after {
		content: counter(row-number) ". ";
		font-weight: normal;
		color: var(--bs-gray-500);
		margin-left: 0.875rem;
	}