/*------------------------------------------------------------------
HTML Tag Styles
------------------------------------------------------------------*/

BODY {
    /*iPhone/mobile fix for enlarged text*/
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: none;
}

BODY.popup {
	margin:10px;
	background-color:#ffffff;
	background-image:none;
	font-size:12px;
}


DIV.popupCopyrightFooter {
	font-size:9px;
	color:#888888;
	text-align:left;fmark
	margin-top:5px;
}

BODY.intranet {
	background-color:#E5E5E5;
	background-image: none;
	
}


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


.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;
}
/*--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;
}
.ff-blocked {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
}
/*------------*/
.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;
}


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

/*----------------------------------------------------
	see ckError for implementation
*/
.modal-alert .ck-error-icon {
	display:none;
}

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

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

/*---------------------------------------------------------------
Standard Buttons
----------------------------------------------------------------*/




/*---------------------------------------------------------------
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: #9D0000;
    font-size:0.75rem;
}



/*----- TAB ---------------------------------*/
DIV.ck-tabContent {
	display:none;
	
	min-height:300px; /*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:10px;padding-bottom:10px;
	padding-right:0px;padding-left:0px;
	/*
	9/13/16: removed overflow settings to allow BS3 dropdown menus in short tabs still display. This was prob in here from before BS3 layout and likely not needed anyway now
	overflow-y:auto;
	overflow-x:hidden;
	*/
	
}


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

/*--------------------------------------------
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.
*/
.ckcommon {
	padding-top:1rem;
	padding-bottom:1rem;
	min-height:800px;
}



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