/* Core styles shared across all pages using the bs4 template.
 * Keep this file as basic/small as possible!
 *
 * NOTES:
 *  - Uses Bootstrap color variables (:root) but has older browser fallbacks (set above colors)
 *
 *  - Validate most changes using CSS LINT [http://csslint.net/]
 *
 *	- Avoid padding/margins for bootstrap elements; especially with a greedy selector.
 *    It creates a situtation where we are constantly battling the layout
 *    (like we are for Bootstrap 3).
 *
 *  - Avoid [!important] most of the time!
 *    If it is need, then something is probably designed incorrectly.
 *    Resist schedule pressure that requires it (it will save us time later).
 *
 *  - Try to use media queries for min-width [i.e. @media (min-width:...].
 *    With the non-media query sizes/padding/margins being for extra small devices
 */

/* variable colors (used in other CSS files so check before changing/removing */
:root {
	--msb-color-active: #00B533;
	--msb-color-inactive: #6c757d;
	--msb-color-slategray: #5f6982;
	--msb-color-gold: #DAA520;
	--msb-color-lightblue: #E1F3F7;

	/* Some Kaleida & Project Unite colors: */
	--kaleida-indigo-rgb: 0, 30, 97; /* #001E61 */
	--kaleida-sky-rgb: 0, 154, 222; /* #009ADE */
	--kaleida-violet-rgb: 144, 51, 249; /* #9033F9 */
	--kaleida-sunshine-rgb: 254, 195, 0; /* #F3C300 */
	--kaleida-orange-rgb: 241, 138, 0; /* #F18A00 */
	--kaleida-coral-rgb: 244, 76, 127; /* #F44C7F */
	--kaleida-silver-rgb: 177, 177, 177; /* #B1B1B1 */
	--kaleida-charcoal-rgb: 84, 86, 90; /* #54565A */

	--pu-purple-600: #5F16B8; --pu-purple-600-rgb: 95, 22, 184;
	--pu-purple-700: #3A067A; --pu-purple-700-rgb: 58, 6, 122;

	/*
	--pu-blue-400: #3781E5;
	--pu-blue-500: #1B6FE1;
	--pu-blue-600: #165BB8;
	--pu-blue-700: #06387A;

	--pu-teal-400: #2CB8B8;
	--pu-teal-500: #11A6A6;
	--pu-teal-600: #0F7A7A;
	--pu-teal-700: #035252;

	--pu-green-400: #2CB85B;
	--pu-green-500: #11A642;
	--pu-green-600: #0F7A33;
	--pu-green-700: #03521E;

	--pu-teal-400: #2CB8B8;
	--pu-teal-500: #11A6A6;
	--pu-teal-600: #0F7A7A;
	--pu-teal-700: #035252;

	--pu-purple-400: #8637E5;
	--pu-purple-500: #741BE1;
	--pu-purple-600: #5F16B8;
	--pu-purple-700: #3A067A;
	--pu-purple-800: #1D033D;

	--pu-yellow-400: #F5D03B;
	--pu-yellow-500: #F5C918;
	--pu-yellow-600: #B89407;
	--pu-yellow-700: #8F7306;

	--pu-orange-400: #F5A43B;
	--pu-orange-500: #F5971D;
	--pu-orange-600: #B87216;
	--pu-orange-700: #7A4705;

	--pu-red-400: #F54553;
	--pu-red-500: #F53141;
	--pu-red-600: #C21725;
	--pu-red-700: #8F0E19;

	--pu-neutral-400: #A3A3A3;
	--pu-neutral-500: #8F8F8F;
	--pu-neutral-600: #7A7A7A;
	--pu-neutral-700: #5C5C5C;
	*/
}

html {
	font-size: 100%; /* important for [rem] styling */
	height: 100%;
}
body {
	font-family: 'Roboto',Arial,sans-serif;
	background-color: #ffffff;
	font-size: 1rem;
    direction: ltr;
    overflow-x: hidden; /* Prevent scroll on narrow devices */

	width: 100%;
    height: 100%;
}

/* padding needed for .navbar.fixed-top * /
.main-layout { border: 3px solid green; }
.msb-top-navbar { border: 1px solid red; }
/**/
body.body-with-fixed-header {
	padding-top: 62px;
}
.msb-top-navbar {
	min-height: 62px;
}
@media (min-width: 576px) {
	body.body-with-fixed-header { padding-top: 67px; }
	.msb-top-navbar { min-height: 67px; }
}
@media (min-width: 768px) {
	body.body-with-fixed-header { padding-top: 73px; }
	.msb-top-navbar { min-height: 73px; }
}
@media (min-width: 992px) {
	body.body-with-fixed-header { padding-top: 76px; }
	.msb-top-navbar { min-height: 76px; }
}

/* Overlay Loading Spinner */
.body-overlay {
	background: #ffffff;
	color: #f8f9fa;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.15);
	z-index: 5000;
	text-align: center;
	opacity: .80; }
	.body-overlay .spinner {
		display: flex;
		align-items: center;
	    justify-content: center;
		margin: 50vh auto 0;
		height: 64px;
		width: 64px;
		color: #f8f9fa;
	}

/* Other spinners */
@-webkit-keyframes circleSpin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}
@keyframes circleSpin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
.opaq-spin { opacity: 0.5 !important; }
.opaq-spin::after {
	content:'';
	display:block;
	position:absolute;
	left:48%;top:48%;
	width:40px;height:40px;
	border-style:solid;
	border-color: #343a40;
	border-top-color:transparent;
	border-width: 4px;
	border-radius:50%;
	-webkit-animation: circleSpin .8s linear infinite;
	animation: circleSpin .8s linear infinite;
}

/*
/* Custom Colors Ensure WCAG Compliance! */
.bg-dark-blue {
	background-color: #005DE9;
}

.bg-alternating-light:nth-child(even) {
	background-color: rgba(var(--bs-light-rgb), 1);
}
.bg-alternating-light:nth-child(odd) {
	background-color: rgba(var(--bs-white-rgb), 1);
}
.bg-alternating-light .btn-outline-secondary {
	/* Needed to correct WCAG for .bg-alternating-light:nth-child(even).
	   Applied to all (not just even) for a consitant look */
	--bs-btn-color: #212529;
}

.bg-highlight-fade {
	animation: bg-highlight-fade 3000ms ease-out;
	}
	@keyframes bg-highlight-fade {
		0% { background-color: #FFE9BF; }
		100% { background-color: initial; }
	}



/* MSB Stacked Icon */
.msb-stacked-icon {
	background-color: #E4E6EB;
	color: #343a40;
	color: var(--bs-gray-dark);
	line-height: 2.25;
	border-radius: 50%;
	margin-right: 7px;
	padding: 7px;
}
.msb-stacked-icon.image {
	border-radius: 100%;
}


/* Links
	- Do NOT set color globally on links here!
	We correctly update Bootrap's colors with SASS */
a:focus {
	outline: thin dotted;
	outline: 1px dotted #005DE9;
	outline: 1px dotted var(--bs-primary);
}

.no-focus-outline:focus {
	outline: 0;
}

/* Custom handlers */
@media (max-width: 320px) {
	.hidden-xxs {
		display: none;
	}
}

/* Hover Effects */
.text-hover-white:hover, .text-hover-white:focus {
	color: #ffffff !important;
}
.hover-bg-white:hover, .hover-bg-white:focus {
	background-color: #ffffff !important;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.hover-shadow-sm:hover, .hover-shadow-sm:focus {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.hover-shadow:hover, .hover-shadow:focus {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.hover-shadow-lg:hover, .hover-shadow-lg:focus {
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
.hover-shadow-blue:hover, .hover-shadow-blue:focus {
	box-shadow: 0 0.25rem 0.5rem rgba(111, 180, 255, 0.5) !important;
}
.hover-bg-light:hover, .hover-bg-light:focus {
	background-color: #f8f9fa !important;
	background-color: var(--bs-light) !important;
}
.hover-bg-white-smoke:hover, .hover-bg-white-smoke:focus {
	background-color: whitesmoke !important;
}
.hover-bg-lightblue:hover, .hover-bg-lightblue:focus {
	background-color: var(--msb-color-lightblue) !important;
}

/* Shadow Effects */
.inset-shadow.primary { box-shadow: inset 0 0 1rem #005DE9; box-shadow: inset 0 0 1rem var(--bs-primary); }
.inset-shadow.success { box-shadow: inset 0 0 1rem #218739; box-shadow: inset 0 0 1rem var(--bs-success); }
.inset-shadow.info { box-shadow: inset 0 0 1rem #17a2b8; box-shadow: inset 0 0 1rem var(--bs-info); }
.inset-shadow.warning { box-shadow: inset 0 0 1rem #ffc107; box-shadow: inset 0 0 1rem var(--bs-warning); }
.inset-shadow.danger { box-shadow: inset 0 0 1rem #dc3545; box-shadow: inset 0 0 1rem var(--bs-danger); }

.shadow-blue { box-shadow: 0 0.25rem 0.5rem rgba(111, 180, 255, 0.5); }


/* Session Timeout Modal */
.session-timeout-modal .modal-dialog {
	min-width: 350px;
}
.session-timeout-modal .countdown-holder {
	font-size: 1.5em;
	font-weight: 500;
}
.session-timeout-modal .progress {
	height: 20px;
}
.session-timeout-modal .progress-bar-danger .countdown-holder {
	font-size: 1.75em;
	font-weight: 700;
}
.session-timeout-modal .progress.bg-danger {
  background-color: #e4b9b9 !important;
}

/* Terms of Service (TOS) Notice */
.legal-disclosure {
	font-family: 'Roboto',Arial,sans-serif;
	font-size: 1rem;
	font-weight: 400;
	margin: 10px 15px;
	color: #000000;
}
.legal-disclosure h1 {
	font-size: 1.5rem;
	color: #333;
	margin-bottom: 1em;
	text-transform: uppercase;
	font-weight: 700;
}
.modal.legal-disclosure h1 {
	font-size: 1.35rem;
}
.modal.legal-disclosure .modal-header h1 {
	margin-bottom: 0;
	text-transform: none;
	font-weight: 700;
}
.legal-disclosure h2 {
	font-size: 1.25rem;
	font-weight: 500;
	margin: 1em 0 0.45em 0;
}
.legal-disclosure p.indent-1 {
	margin-left: 1.5em;
}
.legal-disclosure p.indent-2 {
	margin-left: 2.5em;
}
.legal-disclosure p > strong {
	margin-right: 10px;
}
.modal.legal-disclosure .modal-body {
	padding: 1.5em 2em;
}
.modal.legal-disclosure .modal-footer {
	text-align: center;
}
.modal.legal-disclosure .modal-footer .btn {
	margin-left: 25px;
}
.modal.legal-disclosure .tos-content {
	 border: 1px solid #e5e5e5;
	 overflow-y: auto;
	 overflow-x: hidden;
	 max-height: 200px;
	 font-size: 80%;
}
.modal .legal-disclosure {
	/* This should not be is not be [.modal.legal-disclosure],
	   the space is important (a different div) */
	margin: 0;
	font-size: 1.15em;
}
@media only screen and (max-width : 480px) {
	.legal-disclosure, .modal.legal-disclosure {
		font-size: 1.15em;
		margin: 0;
	}
	.legal-disclosure h1, .modal.legal-disclosure h1 {
		font-size: 1.15em;
	}
	.modal.legal-disclosure .modal-body {
		padding: 1em 1em;
	}
	.modal.legal-disclosure .tos-content {
		 padding: 0;
		 max-height: 130px;
		 border-width: 1px 0 0 0;
	}
	.modal.legal-disclosure .modal-footer .btn {
		margin-left: 15px;
	}
}
@media only screen and (max-width : 320px) {
	.legal-disclosure, .modal.legal-disclosure {
		font-size: 1em;
	}
	.modal.legal-disclosure h1 {
		font-size: 1em;
	}
	.modal.legal-disclosure .modal-body {
		padding: .5em .8em;
	}
}

/* Center Modal Vertically */
.modal.modal-vertical-center {
	text-align: center;
}
.modal.modal-vertical-center:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.modal.modal-vertical-center > .modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}
@media only screen and (max-width : 768px) {
	.modal.modal-vertical-center:before {
		display: none;
	}
}

/* Hides from UI but allow screen readers to pick it up  */
.off-screen {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* System Announcements */
.system-announcement {
	position: fixed;
	top: 63px;
	right: 0;
	left: 0;
	z-index: 1029; }
	.system-announcement .toast {
		max-width: none !important;
		border-radius: 0.5rem;
		max-width: 95vw !important;
		margin: 0 auto !important;
		background-color: rgba(255, 255, 255, 0.90);
		box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
	}
	@media (min-width: 768px) {
		.system-announcement { top: 76px; }
	}
	.system-announcement .toast-body {
		color: #2D2D2D;
		font-size: 1rem;
		font-weight: 700;
		padding: 1rem 1.5rem 1.5rem;
	}


/* Generic/General Classes */
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-pointer { cursor: pointer; }
.cursor-crosshair { cursor: crosshair; }
.cursor-move { cursor: move; }
.cursor-wait { cursor: wait  !important; }

.display-none { display: none; }
.display-none-i { display: none !important; }

.font-size-micro { font-size: 0.35rem; }
.font-size-micro-i { font-size: 0.35rem !important; }
.font-size-tiny { font-size: 0.5rem; }
.font-size-tiny-i { font-size: 0.5rem !important; }
.font-size-little { font-size: 0.65rem; }
.font-size-littler { font-size: 0.6rem; }
.font-size-smallest { font-size: 0.7rem; }
.font-size-smallest-i { font-size: 0.7rem !important; }
.font-size-smaller { font-size: 0.75rem; }
.font-size-smaller-i { font-size: 0.75rem !important; }
.font-size-small { font-size: 0.85rem; }
.font-size-small-i { font-size: 0.85rem !important; }
.font-size-medium { font-size: 0.9rem; }
.font-size-medium-i { font-size: 0.9rem !important; }
.font-size-normal { font-size: 1rem; }
.font-size-normal-i { font-size: 1rem !important; }
.font-size-moderate { font-size: 1.1rem; }
.font-size-moderate-i { font-size: 1.1rem !important; }
.font-size-large { font-size: 1.25rem; }
.font-size-large-i { font-size: 1.25rem !important; }
.font-size-xlarge { font-size: 1.5rem; }
.font-size-xlarge-i { font-size: 1.5rem !important; }
.font-size-xxlarge { font-size: 1.75rem; }
.font-size-xxlarge-i { font-size: 1.75rem !important; }
.font-size-jumbo { font-size: 2.5rem; }
.font-size-jumbo-i { font-size: 2.5rem !important; }
.font-size-giant { font-size: 3.5rem; }
.font-size-giant-i { font-size: 3.5rem !important; }

.font-weight-medium, .fw-nearbold, .fw-nearbold-active.active { font-weight: 500; }




/* Force child elements to have a font size.
 * Be careful with these, they should only be used when displaying
 * something like client provided HTML descriptions and we need to
 * limit the sizes. Especially headers (h1,h2...)
 */
.font-size-tiny-plus, .font-size-tiny-plus *  { font-size: 0.5rem !important; }
.font-size-little-plus, .font-size-little-plus *  { font-size: 0.65rem !important; }
.font-size-small-plus, .font-size-small-plus *  { font-size: 0.85rem !important; }


/* Generic/General Classes - Colors */
.color-inherit, .color-inherit:hover { color: inherit; }
.color-inherit-i, .color-inherit-i:hover { color: inherit !important; }
.color-slategray { color: var(--msb-color-slategray); }
.color-slategray-i { color: var(--msb-color-slategray) !important; }
.color-gold { color: var(--msb-color-gold); }
.color-gold-i { color: var(--msb-color-gold) !important; }

.text-select-none { user-select: none; }
.text-overline { text-decoration: overline; }
.text-line-through { text-decoration: line-through; }
.text-underline { text-decoration: underline; }

/* Project Unite/Kaleida Colors: */
.border-kaleida-indigo {
	--bs-border-opacity: 1;
	border-color: rgba(var(--kaleida-indigo-rgb), var(--bs-border-opacity)) !important;
}
.text-kaleida-indigo {
	--bs-text-opacity: 1;
	color: rgba(var(--kaleida-indigo-rgb), var(--bs-text-opacity)) !important;
}
.bg-kaleida-indigo {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--kaleida-indigo-rgb), var(--bs-bg-opacity)) !important;
}

.border-kaleida-sky {
	--bs-border-opacity: 1;
	border-color: rgba(var(--kaleida-sky-rgb), var(--bs-border-opacity)) !important;
}
.text-kaleida-sky {
	--bs-text-opacity: 1;
	color: rgba(var(--kaleida-sky-rgb), var(--bs-text-opacity)) !important;
}
.bg-kaleida-sky {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--kaleida-sky-rgb), var(--bs-bg-opacity)) !important;
}

.border-kaleida-violet {
	--bs-border-opacity: 1;
	border-color: rgba(var(--kaleida-violet-rgb), var(--bs-border-opacity)) !important;
}
.text-kaleida-violet {
	--bs-text-opacity: 1;
	color: rgba(var(--kaleida-violet-rgb), var(--bs-text-opacity)) !important;
}
.bg-kaleida-violet {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--kaleida-violet-rgb), var(--bs-bg-opacity)) !important;
}

.border-kaleida-sunshine {
	--bs-border-opacity: 1;
	border-color: rgba(var(--kaleida-sunshine-rgb), var(--bs-border-opacity)) !important;
}
.text-kaleida-sunshine {
	--bs-text-opacity: 1;
	color: rgba(var(--kaleida-sunshine-rgb), var(--bs-text-opacity)) !important;
}
.bg-kaleida-sunshine {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--kaleida-sunshine-rgb), var(--bs-bg-opacity)) !important;
}

.border-kaleida-orange {
	--bs-border-opacity: 1;
	border-color: rgba(var(--kaleida-orange-rgb), var(--bs-border-opacity)) !important;
}
.text-kaleida-orange {
	--bs-text-opacity: 1;
	color: rgba(var(--kaleida-orange-rgb), var(--bs-text-opacity)) !important;
}
.bg-kaleida-orange {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--kaleida-orange-rgb), var(--bs-bg-opacity)) !important;
}

.border-kaleida-coral {
	--bs-border-opacity: 1;
	border-color: rgba(var(--kaleida-coral-rgb), var(--bs-border-opacity)) !important;
}
.text-kaleida-coral {
	--bs-text-opacity: 1;
	color: rgba(var(--kaleida-coral-rgb), var(--bs-text-opacity)) !important;
}
.bg-kaleida-coral {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--kaleida-coral-rgb), var(--bs-bg-opacity)) !important;
}

.border-kaleida-silver {
	--bs-border-opacity: 1;
	border-color: rgba(var(--kaleida-silver-rgb), var(--bs-border-opacity)) !important;
}
.text-kaleida-silver {
	--bs-text-opacity: 1;
	color: rgba(var(--kaleida-silver-rgb), var(--bs-text-opacity)) !important;
}
.bg-kaleida-silver {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--kaleida-silver-rgb), var(--bs-bg-opacity)) !important;
}

.border-kaleida-charcoal {
	--bs-border-opacity: 1;
	border-color: rgba(var(--kaleida-charcoal-rgb), var(--bs-border-opacity)) !important;
}
.text-kaleida-charcoal {
	--bs-text-opacity: 1;
	color: rgba(var(--kaleida-charcoal-rgb), var(--bs-text-opacity)) !important;
}
.bg-kaleida-charcoal {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--kaleida-charcoal-rgb), var(--bs-bg-opacity)) !important;
}

.border-pu-purple-600 {
	--bs-border-opacity: 1;
	border-color: rgba(var(--pu-purple-600-rgb), var(--bs-border-opacity)) !important;
}
.text-pu-purple-600 {
	--bs-text-opacity: 1;
	color: rgba(var(--pu-purple-600-rgb), var(--bs-text-opacity)) !important;
}
.bg-pu-purple-600 {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--pu-purple-600-rgb), var(--bs-bg-opacity)) !important;
}
.border-pu-purple-700 {
	--bs-border-opacity: 1;
	border-color: rgba(var(--pu-purple-700-rgb), var(--bs-border-opacity)) !important;
}
.text-pu-purple-700 {
	--bs-text-opacity: 1;
	color: rgba(var(--pu-purple-700-rgb), var(--bs-text-opacity)) !important;
}
.bg-pu-purple-700 {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--pu-purple-700-rgb), var(--bs-bg-opacity)) !important;
}

/* width helpers (use in addition to ones already available in Bootstrap) */
.w-80 { width: 80% !important; }
.w-85 { width: 85% !important; }
.w-90 { width: 90% !important; }
.w-95 { width: 95% !important; }

.mnh-50 { min-height: 50px; }
	.mnh-50-i { min-height: 50px !important; }
.mnh-75 { min-height: 75px; }
	.mnh-75-i { min-height: 75px !important; }
.mnh-100 { min-height: 100px; }
	.mnh-100-i { min-height: 100px !important; }
.mnh-200 { min-height: 200px; }
	.mnh-200-i { min-height: 200px !important; }
.mnh-225 { min-height: 225px; }
	.mnh-225-i { min-height: 225px !important; }
.mnh-250 { min-height: 250px; }
	.mnh-250-i { min-height: 250px !important; }
.mnh-300 { min-height: 300px; }
	.mnh-300-i { min-height: 300px !important; }
.mnh-350 { min-height: 350px; }
	.mnh-350-i { min-height: 350px !important; }
.mnh-400 { min-height: 400px; }
	.mnh-400-i { min-height: 400px !important; }
.mnh-500 { min-height: 500px; }
	.mnh-500-i { min-height: 500px !important; }

.mnw-none { min-width: none; }
	.mnw-none-i { min-width: none !important; }
.mnw-25 { min-width: 25px; }
	.mnw-25-i { min-width: 25px !important; }
.mnw-35 { min-width: 35px; }
	.mnw-35-i { min-width: 35px !important; }
.mnw-50 { min-width: 50px; }
	.mnw-50-i { min-width: 50px !important; }
.mnw-75 { min-width: 75px; }
	.mnw-75-i { min-width: 75px !important; }
.mnw-100 { min-width: 100px; }
	.mnw-100-i { min-width: 100px !important; }
.mnw-125 { min-width: 125px; }
	.mnw-125-i { min-width: 125px !important; }
.mnw-150 { min-width: 150px; }
	.mnw-150-i { min-width: 150px !important; }
.mnw-175 { min-width: 175px; }
	.mnw-175-i { min-width: 175px !important; }
.mnw-200 { min-width: 200px; }
	.mnw-200-i { min-width: 200px !important; }
.mnw-225 { min-width: 225px; }
	.mnw-225-i { min-width: 225px !important; }
.mnw-250 { min-width: 250px; }
	.mnw-250-i { min-width: 250px !important; }
.mnw-300 { min-width: 300px; }
	.mnw-300-i { min-width: 300px !important; }
.mnw-325 { min-width: 325px; }
	.mnw-325-i { min-width: 325px !important; }
.mnw-350 { min-width: 350px; }
	.mnw-350-i { min-width: 350px !important; }

.mxw-none { max-width: none; }
	.mxw-none-i { max-width: none !important; }
.mxw-25 { max-width: 25px; }
	.mxw-25-i { max-width: 25px !important; }
.mxw-50 { max-width: 50px; }
	.mxw-50-i { max-width: 50px !important; }
.mxw-75 { max-width: 75px; }
	.mxw-75-i { max-width: 75px !important; }
.mxw-100 { max-width: 100px; }
	.mxw-100-i { max-width: 100px !important; }
.mxw-125 { max-width: 125px; }
	.mxw-125-i { max-width: 125px !important; }
.mxw-150 { max-width: 150px; }
	.mxw-150-i { max-width: 150px !important; }
.mxw-175 { max-width: 175px; }
	.mxw-175-i { max-width: 175px !important; }
.mxw-200 { max-width: 200px; }
	.mxw-200-i { max-width: 200px !important; }
.mxw-225 { max-width: 225px; }
	.mxw-225-i { max-width: 225px !important; }
.mxw-250 { max-width: 250px; }
	.mxw-250-i { max-width: 250px !important; }
.mxw-300 { max-width: 300px; }
	.mxw-300-i { max-width: 300px !important; }
.mxw-325 { max-width: 325px; }
	.mxw-325-i { max-width: 325px !important; }
.mxw-1024 { max-width: 1024px; }
	.mxw-1024-i { max-width: 1024px !important; }
.mxw-1200 { max-width: 1200px; }
	.mxw-1200-i { max-width: 1200px !important; }
.mxw-1440 { max-width: 1440px; }
	.mxw-1440-i { max-width: 1440px !important; }
.mxw-1680 { max-width: 1680px; }
	.mxw-1680-i { max-width: 1680px !important; }
.mxw-1920 { max-width: 1920px; }
	.mxw-1920-i { max-width: 1920px !important; }

.mnvw-40 { min-width: 40vw; }
	.mnvw-40-i { min-width: 40vw !important; }
.mnvw-50 { min-width: 50vw; }
	.mnvw-50-i { min-width: 50vw !important; }
.mnvw-60 { min-width: 60vw; }
	.mnvw-60-i { min-width: 60vw !important; }
.mnvw-75 { min-width: 75vw; }
	.mnvw-75-i { min-width: 75vw !important; }

.mxvw-25 { max-width: 25vw; }
	.mxvw-25-i { max-width: 25vw !important; }
.mxvw-50 { max-width: 50vw; }
	.mxvw-50-i { max-width: 50vw !important; }

.mnvh-30 { min-height: 30vh; }
	.mnvh-30-i { min-height: 30vh !important; }
.mnvh-40 { min-height: 40vh; }
	.mnvh-40-i { min-height: 40vh !important; }
.mnvh-50 { min-height: 50vh; }
	.mnvh-50-i { min-height: 50vh !important; }
.mnvh-60 { min-height: 60vh; }
	.mnvh-60-i { min-height: 60vh !important; }

.mnvh-75 { min-height: 75vh; }
	.mnvh-50-i { min-height: 75vh !important; }

.mxvh-30 { max-height: 30vh; }
	.mxvh-30-i { max-height: 30vh !important; }
.mxvh-40 { max-height: 40vh; }
	.mxvh-40-i { max-height: 40vh !important; }
.mxvh-50 { max-height: 50vh; }
	.mxvh-50-i { max-height: 50vh !important; }

/* Border helpers */
.border-top-hint {
	border-top: 1px solid #f1f1f1 !important;
}
.border-bottom-hint {
	border-bottom: 1px solid #f1f1f1 !important;
	border-bottom: 1px solid var(--bs-gray-200) !important;
}
.border-right-hint {
	border-right: 1px solid #f1f1f1 !important;
	border-right: 1px solid var(--bs-gray-200) !important;
}
@media (min-width: 992px) {
	.border-right-hint-lg {
		border-right: 1px solid #f1f1f1 !important;
	}
}
.border-hint {
	border: 1px solid #f1f1f1 !important;
}

/* Overflows */
.overflow-auto { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-scroll { overflow-x: scroll !important; }
.overflow-hidden { overflow: hidden !important; text-overflow: ellipsis; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-scroll { overflow-y: scroll !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-visible { overflow: visible !important; }


/* Help Links */
.msbhelp-link {
	font-size: 1.25em;
	cursor: pointer;
	text-decoration: none !important;
	color: inherit !important;
}
.fa-help-link,
a.fa-help-link,
.fa-help-link > a {
	cursor: pointer;
	text-decoration: none;
	color: #777;
	outline: 0;
}

/* Quick Views */
.msb-quick-view {
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
	display: inline-block;
	opacity: 0.8;
}
.msb-quick-view:hover, .msb-quick-view:focus {
	opacity: 1;
}
.msb-quick-view:focus {
	outline: thin dotted;
	outline: 1px dotted #005DE9;
	outline-offset: 0;
}
a.preview-view-link {
	color: #777;
}

/* WebUi Popovers */
.webui-popover-title {
	font-family: 'Roboto',Arial,sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	color: #6c757d !important;
}
.webui-popover-title .sub-text {
	color: #A9A9A9;
	font-size: 1em;
	font-weight: normal;
	margin-left: 7px;
}
.webui-popover-inner .close {
	font-size: 1.5rem;
}
/* Correct WebUI-Popover image location */
.webui-popover i.icon-refresh {
	background-image: url('/images/loading.gif') !important;
}

/* NOTE: [.webui-popover-] is auto-prefixed to the [style] setting (we default it to preview or preview-iframe).
 *       See [webuiPopover] in script and [http://github.com/sandywalker/webui-popover] for details.
 */
.webui-popover-preview,
.webui-popover-preview-iframe {
	width: 65%;
	max-width: 800px;
	min-width: 400px;
	/* height: does not function very well when using iframes (scrollbars are out of sync).
	  If changed, make sure the scrollbar for the popover functions correctly! */
	max-height: 600px;
}
.webui-popover-preview-iframe .webui-popover-content {
	/* forces scrollbars to function properly when using iframe popovers */
	overflow: visible;
}
.webui-popover-product-view .webui-popover-content,
.webui-popover-product-view .webui-popover-content iframe {
	width: 100% !important;
	height: 100% !important;
	min-width: 40vw !important;
	min-height: 40vh !important; }
	@media (max-width: 768px) {
		.webui-popover-product-view {
			width: 75vw !important;
			margin-left:-10vw !important;
		}
	}
	@media (max-width: 320px) {
		.webui-popover-product-view {
			width: 75vw !important;
			margin-left: 0 !important;
			left: auto !important;
			right: 15px !important;
		}
	}
	@media (max-height: 450px) {
		.webui-popover-product-view {
			width: 50vw !important;
			margin-left:-25vw !important;
		}
		.webui-popover-product-view .webui-popover-content,
		.webui-popover-product-view .webui-popover-content iframe {
			min-height: 50vh !important;
		}
	}

.webui-popover-custom-view-list .webui-popover-title {
	font-size: 80%;
}
.webui-popover-custom-view-list .webui-popover-title {
	border-bottom: 1px solid #dee2e6 !important;
}
.webui-popover-custom-view-list .webui-popover-content {
	overflow: hidden;
}

/* ScrollUp plugin target.
 * Not a good idea to use IDs in selectors but the scrollup plugin has no other options.
 */
#scrollUp {
    background-color: #777;
    border-radius: 0;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
    color: #ffffff;
    font-size: 24px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    bottom: 100px;
    right: 15px;
    opacity: 0.7;
    z-index: 999 !important; /* Set to 999 to put behind bootstrap modals, chat components, etc... */
}
@media (min-width: 768px) {
	#scrollUp {
		bottom: 110px;
	}
}
/* Material Design Icons * /
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons { color: #777; }
/* Icons as black on a light background. * /
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Icons as white on a dark background. * /
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
*/

/* MSB Custom Check Toggles */
.msb-check-toggle {
	text-decoration: none !important; }
	.msb-check-toggle::before {
	    display: inline-block; }
	.msb-check-toggle.circle {
	    font-family: 'Font Awesome 6 Pro';
	    font-weight: 600;
	}
	.msb-check-toggle.active {
		color: #00B533 !important;
		color: var(--msb-color-active) !important; }
		.msb-check-toggle.active.circle::before {
			content: "\f058"; /*\f058 fa-check-circle*/
			font-weight: 600;
		}
	.msb-check-toggle.inactive {
		color: #6c757d !important;
		color: var(--msb-color-inactive) !important; }
		.msb-check-toggle.inactive.circle::before {
			content: "\f05e"; /*\f111 - fa-circle \f06a - fa-exclamation-circle \f057 - fa-times-cirlce  \f05e - fa-ban*/
			font-weight: 400;
		}
	.msb-check-toggle.processing {
		color: #909090 !important; }
		.msb-check-toggle.processing.circle::before {
			content: "\f110"; /*\f110 - fa-spinner */
			font-weight: 600;
			-webkit-animation: fa-spin 2s infinite linear;
			animation: fa-spin 2s infinite linear;
		}

/* MSB Custom Circle Check */
.msb-circle-check::after {
	font-family: 'Font Awesome 6 Pro';
    content: "\f111"; /*fal fa-circle*/
    font-size: 1.6rem;
    font-weight: 300;
    color: #D3D6DE; }
	.msb-circle-check.checked::after {
	    content: "\f058"; /*fas fa-check-circle*/
	    color: #005DE9;
	    color: var(--bs-primary);
	    font-weight: 900;
	}

/* Bootstrap Dropdowns */
.dropdown-toggle.caret-off::before {
    display: none !important; }
	.dropdown-toggle.caret-off::after {
	    display: none !important;
	}

.dropdown-menu.with-icons {
	min-width: auto; }
	.dropdown-menu.with-icons > a,
	.dropdown-menu.with-icons > li > a {
		padding: 6px 16px;
		padding-right: 48px;
	}
	.dropdown-menu.with-icons > a .fas,
	.dropdown-menu.with-icons > a .fa-solid,
	.dropdown-menu.with-icons > a .far,
	.dropdown-menu.with-icons > a .fa-regular,
	.dropdown-menu.with-icons > li > a .fas,
	.dropdown-menu.with-icons > li > a .fa-solid,
	.dropdown-menu.with-icons > li > a .far,
	.dropdown-menu.with-icons > li > a .fa-regular {
		width: 20px;
		margin-right: 10px;
	}


/* Bootstrap Toggles */
.form-switch label {
	cursor: pointer; }
	.form-switch .form-check-input ~ .form-check-label {
		color: #343a40 !important;
		color: var(--bs-gray) !important;
	}
	.form-switch .form-check-input:checked ~ .form-check-label {
		color: #005DE9 !important;
		color: var(--bs-primary) !important;
	}

.form-switch.form-switch-lg .form-check-input {
	width: 3em;
	height: 1.75em;
}

/* Watermark Overlay */
.watermark {
	position: absolute;
	height: 100%;
	width: 100%;
    display: flex;
    flex-direction: row;
	align-items: center;
    justify-content: center;

	color: rgba(0, 0, 0, 0.3);
	-webkit-text-stroke-width: 1px;
  	-webkit-text-stroke-color: #343a40;
	font-size: 2rem;
	font-weight: bold;
	text-transform: uppercase;
	/* Rotate the text */
	transform: rotate(-35deg);

	/* Disable the selection */
	user-select: none;
	z-index: 999 !important; /* Set to 999 to put behind bootstrap modals, chat components, etc... */  }
	.watermark.bottom { align-items: flex-end; }
	.watermark.top { align-items: flex-start; }
	.watermark.start { justify-content: flex-start; }
	.watermark.end { justify-content: flex-end; }
	.watermark.no-rotate { transform: rotate(0); }
	.watermark.white { color: rgba(255, 255, 255, 0.5); }


/* NOTE Box - uses bootstrap variables if available */
.note-box {
	position: relative;
	padding: 0.5rem;
	border: 1px solid #DEE2E7;
	border-left-width: 5px;
	border-radius: 0.25rem;
	background-color: #f8f9fa;
	background-color: var(--bs-light); }
	.note-box.square { border-radius: 0 !important; }
	.note-box .note-header {
		padding-bottom: 0.5rem;
		font-weight: 600; }
	.note-box.primary .note-header { color: #005DE9; color: var(--bs-primary); }
	.note-box.secondary .note-header { color: #6c757d; color: var(--bs-secondary); }
	.note-box.success .note-header { color: #218739; color: var(--bs-success); }
	.note-box.warning .note-header { color: #ffc107; color: var(--bs-warning); }
	.note-box.danger .note-header { color: #dc3545; color: var(--bs-danger); }
	.note-box.info .note-header { color: #17a2b8; color: var(--bs-info); }

	.note-box.primary { border-left-color: #005DE9; border-left-color: var(--bs-primary); }
	.note-box.secondary { border-left-color: #6c757d; border-left-color: var(--bs-secondary); }
	.note-box.success { border-left-color: #218739; border-left-color: var(--bs-success); }
	.note-box.warning { border-left-color: #ffc107; border-left-color: var(--bs-warning); }
	.note-box.danger {  border-left-color: #dc3545; border-left-color: var(--bs-danger); }
	.note-box.info {  border-left-color: #17a2b8; border-left-color: var(--bs-info); }

/* Client Announcements */
.client-announcement p { margin-top: 0; margin-bottom: 0.35rem; }
.client-announcement h1 { font-size: 1.25rem; }
.client-announcement h2 { font-size: 1.15rem; }
.client-announcement h3 { font-size: 0.9rem; }
.client-announcement h4 { font-size: 0.8rem; }
.client-announcement h5 { font-size: 12px; }
.client-announcement h6 { font-size: 11px; }
.client-announcement li { font-size: 0.75rem; }
@media (min-width: 768px) {
	.client-announcement h1 { font-size: 1.35rem; }
	.client-announcement h2 { font-size: 1.25rem; }
	.client-announcement h3 { font-size: 1rem; }
	.client-announcement h4 { font-size: 0.85rem; }
	.client-announcement h5 { font-size: 12px; }
	.client-announcement h6 { font-size: 11px; }
	.client-announcement li { font-size: 0.75rem; }
}

/* User provided HTML */
.user-html p { margin-top: 0; margin-bottom: 0.35rem; }
.user-html h1 { font-size: 1.25rem; }
.user-html h2 { font-size: 1.15rem; }
.user-html h3 { font-size: 0.9rem; }
.user-html h4 { font-size: 0.8rem; }
.user-html h5 { font-size: 12px; }
.user-html h6 { font-size: 11px; }
.user-html li { font-size: 0.75rem; }
.popover-user-html h1 { font-size: 18px; }
.popover-user-html h2 { font-size: 16px; }
.popover-user-html h3 { font-size: 14px; }
.popover-user-html h4 { font-size: 13px; }
.popover-user-html h5 { font-size: 12px; }
.popover-user-html h6 { font-size: 11px; }

/* Scrollbars that display in webkit browsers, add [webkit-scrollbar] class to page, modal, etc. */
.webkit-scrollbar ::-webkit-scrollbar {
	background: transparent;
	height: 8px;
	width: 8px; }
	.webkit-scrollbar ::-webkit-scrollbar-thumb {
		border: none;
		box-shadow: none;
		background: #dadce0;
		border-radius: 8px;
		min-height: 40px;
	}
	.webkit-scrollbar :hover::-webkit-scrollbar-thumb {
		background: #bdc1c6;
	}
	.webkit-scrollbar ::-webkit-scrollbar-thumb:hover {
		background: #bdc1c6;
	}
	.webkit-scrollbar ::-webkit-scrollbar-thumb:active {
		background: #80868b;
	}

span.p-span {
	display: block;
}
span.p-span:not(:last-child) {
	margin-bottom: 10px;
}

/* Bootstrap Carousel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
	width: 24px;
	height: 24px;
}

.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23FFFFFF'%3E%3Cpath d='M0 0h20v20H0z' fill='none'/%3E%3Cpath d='M13.41 5.41L12 4l-6 6 6 6 1.41-1.41L8.83 10z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23fff'%3E%3Cpath d='M0 0h20v20H0V0z' fill='none'/%3E%3Cpath d='M8 4L6.59 5.41 11.17 10l-4.58 4.59L8 16l6-6-6-6z'/%3E%3C/svg%3E");
}

.msb-carousel-control-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #000;
}

.carousel-control-prev,
.carousel-control-next {
	width: auto;
}

.carousel-control-prev {
	padding-left: 6px;
	padding-right: 20px;
}

.carousel-control-next {
	padding-left: 20px;
	padding-right: 6px;
}

@media (min-width: 1200px) {
	.carousel-control-prev {
		padding-left: 8px;
	}

	.carousel-control-next {
		padding-right: 8px;
	}
}

/* NEW! Logo used in tour and Marketing Popups */
.new-logo {
	padding: 1px 3px;
	color: #005DE9;
	font-family: 'Roboto',Arial,sans-serif;
	font-size: 17px;
	font-weight: 500;
	border: 1px solid #005DE9;
	border-radius: 6px;
}

/* Loading Icon */
.msb-spinner-icon {
	margin:10px auto;
	width: 25px;
	height: 25px;
	color: #777;
}

/* fieldset with inset legend */
fieldset.inset-legend {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
}
fieldset.inset-legend legend {
	font-size: 1rem;
	color: #6c757d;
	color: var(--bs-gray);
	margin-top: -0.5rem;
	background-color: #fff;
}
fieldset.inset-legend.hint {
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 0.5rem;
}
fieldset.inset-legend.hint legend {
	color: rgba(0, 0, 0, 0.5) !important;
}
/* Custom Floating Labels based on css from https://github.com/anydigital/float-label-css.
   NOTE: these are built-in for Bootstrap 5 if we ever get there. */
.floating-label {
	position:relative; }
	.floating-label label {
		font-size: 0.85rem;
		position:absolute;
		cursor:text;
		opacity: 0.75;
		-webkit-transition:all .2s;
		transition:all .2s;
		top:-0.5rem;
		left:0.75rem;
		padding: 0 0.25rem;
		line-height: normal;
		background-color: #fff !important;
		z-index:3;
	}
	.floating-label label::after {
		content:" ";
		display: inline-block;
		position:absolute;
		background:#fff;
		height:2px;
		top:50%;
		left:-0.2em;
		right:-0.2em;
		z-index:-1;
	}
	.floating-label .form-control::-webkit-input-placeholder {
		opacity:1;
		-webkit-transition:all .2s;
		transition:all .2s;
	}
	/* Firefox specific hiding */
	.floating-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder {
		opacity:0;
	}
	.floating-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
		opacity:0;
	}
	.floating-label .form-control:placeholder-shown:focus::-webkit-input-placeholder {
		opacity:0.5;
	}
	.floating-label .form-control:placeholder-shown:not(:focus)+label {
		opacity:0.5;
		top:.75em;
	}
	.input-group .floating-label {
		display:table-cell;
	}
	.input-group .floating-label .form-control {
		border-radius:0.25rem;
	}
	.input-group .floating-label:not(:last-child) .form-control {
		border-bottom-right-radius:0;
		border-top-right-radius:0;
	}
	.input-group .floating-label:not(:first-child) .form-control {
		border-bottom-left-radius:0;
		border-top-left-radius:0;
		margin-left:-1px;
	}

.dim-placeholders .form-control:placeholder-shown {
	opacity:0.5;
}

/* Custom Floating Labels for Select2 elements
   NOTE: triggering [select2:open] & [select2:close] is currently handles via script
         in msbAdminApp.js:init (search for select2-floating-label) */
label.select2-label {
	display: none !important; }
	label.select2-label.selected {
		display: block !important;
	}
	.floating-label .select2-selection {
		padding-top: 4px !important;
		padding-bottom: 3px !important;
	}

/* Labels / Columns */
.col-label {
	font-weight: 500;
	opacity: 0.75;
}
.col-value {
	font-weight: 500;
}

/* square buttons used in conjunction with bootstrap btn values */
.btn-sq {
	border-radius: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; }
	.btn-sq i { margin: 0.25rem 0; }
	.btn-sq.btn-sm p { font-size: 70%; margin: 0; }


/* custom select list (i.e. MsbStudentGroupList...) */
.msb-check-list {
	font-size: 0.85rem;
	min-height: 20vh;
	resize: vertical;
	overflow-y: auto; }
	.msb-check-list.short { height: 20vh; }
	.msb-check-list.medium { height: 30vh; }
	.msb-check-list.tall { height: 40vh; }
	.msb-check-list.full { height: 100%; }
	.msb-check-list:not(.no-select) li:not(.none-found):not(li *)::before, /*:not(li *) not a descendent of li, skip sub li items */
	.msb-check-list:not(.no-select) li:not(.none-found):not(li *).checked::before {
	    font-family: 'Font Awesome 6 Pro';
	    font-size: 1rem;
	    position: relative;
	    float: left;
	    margin-right: 7px;
	}
	.msb-check-list:not(.no-select) li:not(.checked).disabled::before {
	    content: "\f05e"; /*f05e ban*/
	}
	.msb-check-list:not(.no-select) li:not(.none-found):not(li *)::before {
	    content: "\f0c8"; /*fa5 square*/
	}
	.msb-check-list:not(.no-select) li:not(.none-found):not(li *).checked::before {
	    content: "\f14a"; /*fa5 check-square*/
	    color: #005DE9;
	    color: var(--bs-primary);
	    font-weight: 900;
	}
	.msb-check-list:not(.no-select) li:not(.none-found):not(li *).checked {
		font-weight: 500;
	}
	.msb-check-list li:not(li *) {
		display: flex;
		align-items: center;
	    justify-content: flex-start;
		/*line-height: normal;*/
	}

/* Bootstrap Popover Changes */
/* Bootstrap v5.2.3 has a top margin on the popover-header which displays incorrectly. */
.popover-header { margin-top: 0;  }
.popover-content {
	word-wrap:break-word;
	text-overflow: ellipsis !important;
	overflow-y: hidden !important;
}

/* Bootstrap form-control Calendar icon - positioned the same as validation icons */
.form-control.calendar-append {
	/*padding-right: calc(1.5em + 0.75rem) !important;*/
	background-image: url("/images/icons/calendar-append.svg");
	background-repeat: no-repeat;
	background-position: right calc(0.375em + 0.1875rem) center;
	background-size: calc(0.65em + 0.375rem) calc(0.65em + 0.375rem);
}

/* Errors/Warning/Success... */
.has-warning .help-inline,
	.has-warning .help-block,
	.has-warning .control-label,
	.has-warning .col-form-label,
	.has-warning label {
	  color: #c09853;
	  color: var(--bs-warning);
	}
	.has-warning .help-block {
		font-size: 80%;
	}
.has-error .help-inline,
	.has-error .help-block,
	.has-error .control-label,
	.has-error .col-form-label,
	.has-error label {
	  color: #b94a48;
	  color: var(--bs-danger);
	}
	.has-error .help-block {
		font-size: 80%;
		margin-top: 5px;
	}

.has-success .help-inline,
	.has-success .help-block,
	.has-success .control-label,
	.has-success .col-form-label {
	  color: #468847;
	  color: var(--bs-success);
	}
	.has-success .help-block {
		font-size: 80%;
	}


/* Section Blocks */
.section-block .section-header {
	width: 100%;
	padding: 0.75rem 1.5rem; }
	.section-block .section-header .header-title {
		margin: 0 0 0.25rem;
		font-weight: 500;
		font-size: 1.25rem;
	}
.section-block .section-body {
	padding: 1.15rem 1.5rem;
}
.section-block .section-footer {
	width: 100%;
	padding: 0.75rem 1.5rem;
}

/* Badges */
.msb-on-off-badge {
	position: relative !important;
	z-index: 2;
	font-size: 65%;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	padding: 0.35rem 0.5rem;
	white-space: normal; }
	.msb-on-off-badge.on {
		background-color: #D5FFE0;
		background-color: rgba(0, 181, 51, 0.08);
		color: #00B533;
		font-weight: 600; }
		.msb-on-off-badge.on, .msb-on-off-badge.on a {
			color: #00B533;
		}
		.msb-on-off-badge.on:hover a, .msb-on-off-badge.on:focus a {
			color: #00B533;
			background-color: #D5FFE0;
			background-color: rgba(0, 181, 51, 0.08); }
	.msb-on-off-badge.off {
		background-color: #EAEBEE;
		color: #343a40;
		font-weight: 400; }
		.msb-on-off-badge.off, .msb-on-off-badge.off a {
			color: #343a40;
		}
		a.msb-on-off-badge.off:hover, a.msb-on-off-badge.off:focus {
			color: #343a40;
			background-color: #EAEBEE;
		}
	@media (min-width: 576px) {
		.msb-on-off-badge {
			font-size: 75%;
		}
	}


/* Summernote bug for Bootstrap 5 - dropdowns not working and configured incorrectly.
   The temporary fix is to use the [lite] version but that has extra arrow-downs
   after dropdowns. This removes the axtra arrows. */
.note-editor .dropdown-toggle::after {
    display: none !important;
}

/* Bootstrap 5 disables pointer-events for disabled buttons
   and removed the not-allowed cursor. This just adds back the cursor
   we are accustomed to seeing. */
.btn.disabled,
.btn[disabled] {
	cursor: not-allowed;
}

/* textButton start; from old base.css  */
.comp_textButton {
	display: inline-block;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	outline: none;
	border: none;
	user-select: none;
	vertical-align: top;
}

.comp_textButton-bg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.12);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.comp_textButton-hoverBg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #5f6368;
	opacity: 0;
}

.comp_textButton:hover .comp_textButton-hoverBg {
	opacity: 0.04;
}

.comp_textButton.comp_textButton-focus .comp_textButton-hoverBg {
	opacity: 0.12;
}

.comp_textButton.comp_textButton-active .comp_textButton-bg {
	opacity: 0.8;
}

.comp_textButton-text {
	color: #5f6368;
	font-weight: 500;
	font-size: 14px;
	line-height: 36px;
	white-space: nowrap;
	padding: 0 8px;
}
/* textButton end */

/* Help videos & links (youtube, vimeo...) */
.help-video-link:hover, .help-video-link:focus {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.help-video-bg {
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: left top;
	width: 100%;
	height: 286px;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.help-video-bg img { opacity: 1; }

@media (max-width: 767px) {
	.border-0-sm-max {
		border: 0 !important;
	}
}

/* Added for PCI 4.0 styling effort */
.displayBlock { display:block; }
.displayFlex {display:flex;}
.fontSize18px { font-size: 18px; }
.fontSize12px { font-size: 12px; }
.fontSize15px { font-size: 15px; }
.alignItemsCenter {align-items:center;}
.marginLeftAuto { margin-left:auto; }
.width100pct { width:100%;}
.width4rem { width:4rem;}
.width1px { width: 1px; }
.width30px { width: 30px; }
.width50px { width:50px; }
.width75px { width:75px; }
.height4px { height:4px; }
.height16px { height:16px; }
.height50px { height:50px; }
.height100px { height:100px; }
.textAlignCenter { text-align:center; }
.textAlignJustify { text-align:justify; }
.flexDirectionRowReverse { flex-direction:row-reverse; }
.floatRight	{ float:right; }
.minWidth5px { min-width:5px; }
.minWidth120px { min-width:120px; }
.minWidth200px { min-width: 200px; }
.minWidth300px { min-width:300px; }
.minWidth350px { min-width:350px; }
.minWidth400px { min-width: 400px }
.maxHeight25vh { max-height: 25vh; }
.maxWidth50vw { max-width: 50vw; }
.maxWidth0px { max-width: 0px }
.maxWidth400px { max-width: 400px }
.padding2pxImportant { padding: 2px !important; }
.paddingTop40vh { padding-top:40vh; }
.floatLeft { float:left; }
.overflowAuto { overflow: auto; }
.overflowYAuto { overflow-y: auto; }
.overflowYVisible { overflow-y:visible; }
.fontSize0dot8rem { font-size: 0.8rem; }
.positionAbsolute { position:absolute; }
.leftMinus50px { left: -50px; }
.leftMinus9999px { left: -9999px; }
.topMinus50px { top: -50px; }
.borderWidth0px { border-width:0px; }
.cvv-icon-center { display: block; margin-left: auto; margin-right: auto; }