/* VERINFO applicant-default.css Release: REL26.0.0.0.0.0 (20/03/2023 16:24:00) */

/**********
HTML tags and Bootstrap 4 overrides
**********/

a {
	color: #3375cb;
	text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

a:active {
	color: #1d427a;
}

a.btn, a.nav-link, a.page-link {
	text-decoration: none;
}

.text-primary {
	color: #3375cb !important;
}

/*	Note: To increase the size of elements globally, just need to alter body font-size here (or just remove body style and use default instead).
	Due to use of rem units the rest of the styles should scale accordingly. */
body {
	font-size: 14px;
}

h1, .h1 {
	font-size: 1.9rem;
}

h2, .h2 {
	font-size: 1.5rem;
}

h3, .h3 {
	font-size: 1.15rem;
}

/*	Note: Default Bootstrap 4 table padding was found to be too large for requirements.
	padding: 0.75rem - Bootstrap 4 default.
	padding: 0.45rem - Visually, same row height as Bootstrap 3 (but this looks a bit small due to higher default font height of Bootsrtap 4).
	padding: 0.5rem - Seems to be the best option.
*/
.table td,
.table th {
	padding: 0.5rem;
	vertical-align: top;
	border-top: 1px solid #dee2e6;
}

.table-borderless td {
	border: none;
}

legend,
.legend {
	font-weight: bold;
	font-size: 0.875rem;
}

@media (max-width: 767px) {
	/* Reduce left/right padding on small devices */
	.card {
		margin-left: -30px;
		margin-right: -30px;
		border-radius: 0;
	}
}

@media (max-width: 767px) {
	.popover-inner {
		max-width:75% !important;
	}
	.popover {
		max-width:75% !important;
	}
	.popover.cc-popover-invalid {
		max-width: 276px !important;
	}
}

@media (min-width: 768px) {
	.popover-inner {
		max-width:55% !important;
	}
	.popover {
		max-width:55% !important;
	}
	.popover.cc-popover-invalid {
		max-width: 276px !important;
	}
}

@media (min-width: 1200px) {
	.popover-inner {
		max-width:35% !important;
	}
	.popover {
		max-width:35% !important;
	}
	.popover.cc-popover-invalid {
		max-width: 276px !important;
	}
}

/*	Prevents flickering if a popover appears over a triggering hover element
	Also prevents popover from closing immediately on touch devices if the popover appears over the triggering element */
.popover {
	pointer-events: none;
}

/*	Un-comment the following rule set if there are issues scrolling within modals */
/*
.modal {
	overflow-y: auto;
}
*/

.form-control:focus,
.custom-file-input:focus~.custom-file-label {
	color:#495057;
	background-color:#ffffff;
	border-color:#3375cb;
	outline:0;
	box-shadow:0 0 0 0.125rem rgba(51, 117, 203, 1);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.custom-file-input.is-invalid:focus ~ .custom-file-label,
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.125rem rgba(220, 53, 69, 1);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.custom-file-input.is-valid:focus ~ .custom-file-label,
.was-validated .custom-file-input:valid:focus ~ .custom-file-label {
	border-color: #28a745;
	box-shadow: 0 0 0 0.125rem rgba(40, 167, 69, 1);
}

.form-check-input, 
.form-check-input:focus:not(:checked) {
	color: #ffffff;
	border: 2.5px solid #3375cb;
	background-color: #ffffff;
}

.form-check-input:checked ~ .form-check-label::before {
	color: #ffffff;
	border: 2.5px solid #3375cb;
	background-color: #3375cb;
}

.form-check-input:focus:not(:checked)~ .form-check-label::before,
.form-check-input:focus~ .form-check-label::before,
.form-check .form-check-input:focus {
	outline: 0;
	box-shadow: 0 0 0 0.125rem #ffffff,0 0 0 0.3rem #3375cb;
}

.carousel-control-next, .carousel-control-prev,
.carousel-control-next:hover, .carousel-control-prev:hover {
	opacity: 1;
}

.carousel-control-next:focus .carousel-control-next-icon,
.carousel-control-prev:focus .carousel-control-prev-icon {
	box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #3375cb;
	opacity: 1;
}

.btn-link {
	color: #3375cb;
}
.btn-link:hover {
	color: #1d427a;
}

.btn-primary {
	background-color: #3375cb;
}

.btn-primary:not(:disabled):not(.disabled).hover,
.btn-primary:not(:disabled):not(.disabled):hover {
	background-color: #1d427a;
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0;
	box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.3rem #3375cb;
	background-color: #3375cb;
}

.page-link:focus {
	outline: 0;
	box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.3rem #3375cb;
}

.page-item.active .page-link,
.page-link:hover {
	background-color: #3375cb;
	border-color: #3375cb;
	color: #ffffff;
}
.btn-secondary:focus,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
	outline: 0;
	box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.3rem #635d63;
	background-color: #635d63;
	color: #ffffff!important;
}

/* not supported by bootstrap 5.2.3 anymore 
.custom-switch .custom-control-label::after {
	background-color: #71706d;
}*/

/* added when upgrade to bootstrap 5.2.3 */
.form-switch .form-check-label::after {
	background-color: #71706d;
}

/**********
Callista classes which extend Bootstrap 4 classes
**********/

/*	The following classes are used to enable easy global customisation of standard form column layouts, both static and updateable (prefix: cc-col-).
	(Note: rs1 = 'right shift 1 column').

	.cc-col-static-left			- extends Bootstrap 4 class .col-sm-4
	.cc-col-static-right		- extends Bootstrap 4 class .col-sm-8
	.cc-col-static-left-rs1		- extends Bootstrap 4 class .col-sm-5 
	.cc-col-static-right-rs1	- extends Bootstrap 4 class .col-sm-7

	.cc-col-input-left			- extends Bootstrap 4 class .col-sm-4
	.cc-col-input-right			- extends Bootstrap 4 class .col-sm-5
*/
.cc-col-static-left,
.cc-col-static-left-rs1,
.cc-col-static-right,
.cc-col-static-right-rs1,
.cc-col-input-left,
.cc-col-input-right {
	position: relative; /* bootstrap 5.2.3 - Columns no longer have position: relative applied, so you may have to add .position-relative to some elements to restore that behavior */
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

/* Added when upgrade to bootstrap 5.2.3, use for inline radio button */
.cc-col-12 {
	padding-left: 15px;
}

@media (min-width: 576px) {
	.cc-col-static-left {
		/* BS4 .col-sm-4 */
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.cc-col-static-right {
		/* BS4 .col-sm-8 */
		-ms-flex: 0 0 40.666667%;
		flex: 0 0 40.666667%;
		max-width: 40.666667%;
	}

	.cc-col-static-left-rs1 {
		/* BS4 .col-sm-5 */
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	  }

	.cc-col-static-right-rs1 {
		/* BS4 .col-sm-7 */
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.cc-col-input-left {
		/* BS4 .col-sm-4 */
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.cc-col-input-right {
		/* BS4 .col-sm-5 */
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
}

/**********
Styles related to third party software
**********/

/* Overrides of light-bootstrap-dashboard.css */
.sidebar {
	z-index: 2;
}

.sidebar-mini .sidebar .sidebar-wrapper > .nav li > a:focus p {
	margin-left: 10px;
	display: inline-block;
	width: 150px !important;
	opacity: 1 !important;
	border-radius: 2px;
	background-color: #ce2e7a !important;	
	box-shadow: 0 0 0 0.5rem #ce2e7a;
	color: #ffffff !important;
	outline: none !important;	
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
	-ms-transform: translate3d(0px, 0, 0);
	transform: translate3d(0px, 0, 0);
}

.sidebar-mini .sidebar .sidebar-wrapper > .nav li > a p {
	pointer-events: none;
}

.sidebar-mini .sidebar .sidebar-wrapper .logo .logo-normal:focus {
	opacity: 1 !important;
	border-radius: 2px;
	background-color: #ce2e7a !important;
	box-shadow: 0 0 0 0.3rem #ce2e7a;
	color: #ffffff !important;
	outline: none !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
	-ms-transform: translate3d(0px, 0, 0);
	transform: translate3d(0px, 0, 0);
}

.navbar-wrapper {
	margin-left: -40px;
	position: fixed;
	z-index: 1;
}

.sidebar[data-bs-color="red"]:after,
.bootstrap-navbar[data-bs-color="red"]:after {
	background: #ce2e7a; /* #82002e (used elsewhere as foreground) is 30% darker than #ce2e7a */
	background-size: 150% 150%;
}

.sidebar .nav .nav-item .nav-link {
	opacity: 1;
}

.sidebar .nav .nav-item .nav-link:focus,
.sidebar .sidebar-wrapper .nav .nav-item:focus {
	box-shadow: 0 0 0 0.125rem #ffffff;
	outline: none;
}

.sidebar .sidebar-wrapper .nav .nav-item.active a:focus {
	box-shadow: 0 0 0 0.175rem #ce2e7a, 0 0 0 0.35rem #ffffff;
	outline: none;
}

.sidebar .nav .nav-item .nav-link:hover,
.sidebar .nav .nav-item.active .nav-link {
	background: #ffffff !important;
	color: #82002e;
	outline: none;
}

.sidebar .nav .nav-item .nav-link:hover p,
.sidebar .nav .nav-item .nav-link:hover span,
.sidebar .nav .nav-item.active .nav-link p {
	color: #82002e;
}

.sidebar-mini .sidebar:hover .sidebar-wrapper > .nav .nav-item.active a:focus p,
.sidebar-mini .sidebar .sidebar-wrapper > .nav li > a:focus:hover p {
	background: #ffffff !important;	
	box-shadow: 0 0 0 0.5rem #ffffff;
	color: #82002e !important;
}

.logo-normal {
	margin-left: 0px !important;
	padding-left: 7px !important;
	padding-right: 7px !important;
}

.logo-normal:focus {
	border-radius: 3px;;
	box-shadow: 0 0 0 0.125rem #ffffff;
	outline: none;
	display: inline-flex !important;
}

.bootstrap-datetimepicker-widget table td.today > div:before {
	border-bottom-color: #3375cb;
}

.bootstrap-datetimepicker-widget table td.active > div,
.bootstrap-datetimepicker-widget table td.active:hover > div,
.bootstrap-datetimepicker-widget table td.day.active:hover > div,
.bootstrap-datetimepicker-widget table td span.active {
	background-color: #3375cb;
}

.bootstrap-datetimepicker-widget table td.day:hover > div,
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover span,
.bootstrap-datetimepicker-widget table thead tr:first-child th.picker-switch:hover,
.bootstrap-datetimepicker-widget table td span:hover {
	background:#666666;
	color: #ffffff;
}

/* This fixes an alignment issue with the Light Bootstrap Dashboard PRO datepicker */
.bootstrap-datetimepicker-widget.dropdown-menu.open {
	top: auto !important;
}

/**********
Callista styles to be used throughout application (prefix: cc-)
**********/

.cc-file-focus {
	border-color: #3375cb;
	border: 2px dashed #ccc;
	outline: 0;
	outline: thin dotted \9;
	/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);*/
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px #3375cb;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px #3375cb;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px #3375cb;
}

.cc-label-static,
.cc-label {
	font-weight: bold;
}

@media (max-width: 575px) {
	.cc-label-static {
		padding-top: 0;
		margin-bottom: 2px; /* Using .1rem caused slight inconsistencies in vertical spacing between label and data for identical elements - using px units instead */
	}

	.cc-btn-instruction-text {
		padding-bottom: 1rem;
	}
}

@media (min-width: 576px) {
	.cc-label-static {
		text-align: right;
	}

	.cc-label {
		text-align: right;
	}

	.cc-btn-container {
		text-align: right;
	}
}

/* Functional area: 'home-pg' */
.cc-home-pg-link {
	display: inline-block;
	border: solid 3px #ce2e7a;
	width: 9.5rem;
	height: 9.5rem;
	padding: 0.8rem;
	border-radius: .25rem;
	color: #ce2e7a !important;
	margin-bottom: 0.55rem;
	margin-right: 0.55rem;
	text-align: center;
}

.cc-home-pg-link,
.cc-home-pg-link:hover,
.cc-home-pg-link:focus {
	color: inherit;
}

.cc-home-pg-link:hover,
.cc-home-pg-link:focus {
	background-color: #ce2e7a;
	color: #ffffff !important;
	text-decoration: none;
	outline: none;
}

.cc-home-pg-link-click {
	color: inherit;
	background-color: rgba(0, 123, 255, 1);
	color: #ffffff !important;
	text-decoration: none;
}

.cc-home-pg-link-icon {
	font-size: 4rem;
	color: inherit;
}

.cc-home-pg-link-text {
	font-weight: 400;
	font-size: 14px;
	padding-top: 0.9rem;
	margin-bottom: 0;
	font-weight: bold;
}

@media (max-width: 1199px) {
	.cc-home-pg-link {
		height: 7.5rem;
		width: 7.5rem;
		margin-bottom: 0.3rem;
	}

	.cc-home-pg-link-icon {
		font-size: 3rem;
	}

	.cc-home-pg-link {
		padding-top: 0.6rem;
		margin-top: 0.3rem;
		padding-left: 0.2rem;
		padding-right: 0.2rem;
	}

	.cc-home-pg-link-text {
		font-size: 12px;
	}
}

@media (max-width: 577px) {
	.cc-home-pg-link {
		height: 6.3rem;
		width: 6.3rem;
		margin-bottom: 0.15rem;
		margin-right: 0.35rem;
		border: solid 1px #ce2e7a;
	}

	.cc-home-pg-link-icon {
		font-size: 2.4rem;
	}

	.cc-home-pg-link {
		padding-top: 0.4rem;
		margin-top: 0.2rem;
		padding-left: 0.1rem;
		padding-right: 0.1rem;
	}

	.cc-home-pg-link-text {
		font-size: 12px;
		font-weight: normal;
	}

	.cc-home-pg-link-group {
		margin-left: -.3rem;
		margin-right: -.3rem;
	}
}

/* Placeholders */
/*
.cc-form-group {}
.cc-form-group-static {}
.cc-input-container {}
.cc-footer {}
*/

/* fixing space between text input boxes*/
.cc-input-container {
	padding-bottom: 0.5rem;
}

.cc-section-header {
	border-bottom: 1px solid #e7e7e7;
	margin-top: 35px;
	margin-bottom: 15px;
}

.cc-section-header-first {
	margin-top: 0 !important;
}

h2.cc-section-header:before {
	content: "\f0c8";
	font-weight: 700;
	font-family: "Font Awesome 6 Pro";
	display: inline-block;
	color: #4d8fe5;
	margin-right: 0.5rem;
	position: relative;
	bottom: 0.25rem;
	font-size: 0.8rem;
}

h2.cc-section-header.cc-data-required:before {
	content: "\f069";
	font-weight: 700;
	font-family: "Font Awesome 6 Pro";
	display: inline-block;
	margin-right: 0.5rem;
	position: relative;
	bottom: 0.25rem;
	font-size: 0.8rem;
	opacity: 1;
	color: #dc3545;
}

h3.cc-section-header:before {
	content: "\f0c8";
	font-weight: 700;
	font-family: "Font Awesome 6 Pro";
	display: inline-block;
	color: #4d8fe5;
	margin-right: 0.6rem;
	position: relative;
	bottom: 0.25rem;
	font-size: 0.5rem;
}

.cc-section-header.cc-no-border {
	border-bottom: none;
}

.cc-list-group {
	margin-top: 1.25rem;
	margin-left: 0.75% !important;
	list-style: decimal inside !important;
}

.cc-list-group-item {
	display: list-item !important;
}

/*	Standard button spacer to be used with an empty span.
	Note: This was a workaround to achieve the same functionality as hardcoded '  ' text in the html markup
	(which worked well but was obviously not very customisable). Syling actual buttons proved problematic - it was
	causing shifting of button text. An empty span with with this style class offered the best 'drop-in' replacement
	to '  '.
*/
.cc-btn-space {
	margin-right: .48rem;
}

/* Modal footers already have standard Bootstrap button spacing - so remove margin */
.modal-footer .cc-btn-space {
	margin-right: 0;
}

.cc-text-highlight {
	color: #008552; /* Same as .cc-is-valid */
	font-weight: bold;
}

.cc-tbl-row-separator {
	border-bottom: 2px solid #dee2e6;
}

.cc-tbl-row-fill {
	background-color: #e9ecef;
}

.cc-tbl-cell-fill {
	background-color: #e9ecef;
}

/*
This will select links which launch modal windows - most often to 'legend' pages displaying
information about statuses, calendars etc. It will attach an icon to the right of the link.
Icons may include: Font "Awesome 6 Pro" f08e or "Font Awesome 6 Pro" f05a or others.
This selector was removed to reduce visual clutter on pages, but is included in case any customer
wants to include it. Warning: re-enabling this selector will alter many links throughout the application. */
/*
a[data-toggle="modal"]:not(.btn):after {
	content: "\f08e";
	font-weight: 400;
	font-family: "Font Awesome 6 Pro";
	padding-left: 5px;

	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}
*/

/* To make sure 'modal' icon does not appear on next line (works with above selector) */
/*
a[data-toggle="modal"] {
	white-space: nowrap;
}
*/

a.cc-link-edit:after {
	content: "\f044" !important;
	font-weight: 600 !important;
	font-family: "Font Awesome 6 Pro";
	text-decoration: none;
	padding-left: 5px;
	font-size: inherit;
	position: relative;
	bottom: 1px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.nav-mobile-menu .nav-item .cc-conf-link,
.nav-mobile-menu .nav-item .cc-logout-link {
	color: #ffffff !important;
}

.nav-mobile-menu .nav-item .cc-conf-link:hover,
.nav-mobile-menu .nav-item .cc-logout-link:hover {
	color: #82002e !important;
}

a.cc-nav-link {
	font-size: 1rem !important;
	color: #71706d !important;
}

a.cc-nav-link:hover {
	color: #dc3545 !important;
}

a.cc-conf-link:after {
	font-family: "Font Awesome 6 Pro";
	font-weight: 600;
	content: "\f013" !important;
	text-decoration: none;
	padding-left: 5px;
	font-size: inherit;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

a.cc-logout-link:after {
	font-family: "Font Awesome 6 Pro";
	font-weight: 600;
	content: "\f2f5";
	text-decoration: none;
	padding-left: 5px;
	font-size: inherit;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

a.cc-link-delete:after {
	content: "\f2ed";
	font-weight: 600 !important;
	font-family: "Font Awesome 6 Pro";
	text-decoration: none;
	padding-left: 5px;
	font-size: inherit;
	position: relative;
	bottom: 1px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

a.cc-link-remove:after {
	content: "\f056";
	font-weight: 600 !important;
	font-family: "Font Awesome 6 Pro";
	text-decoration: none;
	padding-left: 5px;
	font-size: inherit;
	position: relative;
	bottom: 1px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.cc-textarea-readonly {
	resize: none;
	border: none;
}

.cc-data-required:before {
	content: "*";
	color: #dc3545;
	font-weight: 900;
	line-height: 1;
}

.cc-data-required-key:before {
	content: "*";
	color: #dc3545;
	font-weight: 900;
}
.cc-data-required-key:empty:after {
	content: "Required field";
}

@media (max-width: 575px) {
	.cc-data-required-key {
		margin-top: .5rem!important;
	}
}

.cc-general-key:before {
	content: "*";
	color: #dc3545;
	font-weight: 900;
}

.cc-general-key-double:before {
	content: "**";
	color: #dc3545;
	font-weight: 900;
}

.cc-invalid-feedback {
	font-weight: bold;
	padding-left: 15px;
}

.cc-invalid-feedback-vertical {
	font-weight: bold;
}

.cc-form-group-compact {
	margin-bottom: 0;
}

.cc-form-group {
	margin-bottom: 0.5rem;
}

.cc-popover-invalid {
	color: white !important;
	background-color: #dc3545;
	border-color: #dc3545;
}

.cc-popover-body-invalid {
	color: white !important;
}

.cc-popover-arrow-invalid:after {
	border-left-color: #dc3545 !important;
	border-right-color: #dc3545 !important;
}

.cc-link-skip-to {
	color: white !important;
	background-color: #9B0047 !important;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 3px;
}

.cc-link-skip-to:focus {
	display: block;
	width: 160px;
}

/*
	.cc-modal-lg
	On large screens ensure that modal is not too large by setting fixed width.
	On smaller screens, ensure optimal usage of screen width.
*/
@media (min-width: 1367px) {
	.cc-modal-lg .modal-dialog {
		max-width: 1215px !important;
	}
}
@media (max-width: 1366px) {
	.cc-modal-lg .modal-dialog {
		max-width: 97% !important;
	}
}

.cc-modal-lg .modal-header i {
	color: #3375cb;
	padding-right: 0.5rem;
}

.cc-modal-info .modal-content,
.cc-modal-warning .modal-content,
.cc-modal-danger .modal-content {
	border: none;
}

.cc-modal-info .modal-header .close,
.cc-modal-warning .modal-header .close,
.cc-modal-danger .modal-header .close {
	color: #ffffff;
	opacity: 1;
}

.cc-modal-info .modal-header {
	color: #ffffff;
	background-color: #0473a1;
}

.cc-modal-info .modal-header i {
	padding-right: 0.7rem;
}

.cc-modal-warning .modal-header {
	color: #ffffff;
	background-color: #d43900;
}

.cc-modal-warning .modal-header i {
	padding-right: 0.7rem;
}

.cc-modal-danger .modal-header {
	color: #ffffff;
	background-color: #b40000;
}

.cc-modal-danger .modal-header i {
	padding-right: 0.7rem;
}

.cc-alert-success {
	color: #ffffff;
	background-color: #008552;
	border-color: #008552;
}

.cc-alert-success i {
	font-size: 3rem;
	margin-right: 1.5rem;
}

.cc-alert-info {
	color: #ffffff;
	background-color: #0473a1;
	border-color: #0473a1;
}

.cc-alert-info i {
	font-size: 3rem;
	margin-right: 1.5rem;
}

.cc-alert-warning {
	color: #ffffff;
	background-color: #d43900;
	border-color: #d43900;
}

.cc-alert-warning i {
	font-size: 3rem;
	margin-right: 1.5rem;
}

.cc-alert-danger i {
	font-size: 3rem;
	margin-right: 1.5rem;
}

.cc-alert-danger {
	color: #ffffff;
	background-color: #b40000;
	border-color: #b40000;
}

.cc-modal-header-legend {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.cc-modal-header-legend h2:before {
	content: "\f05a" !important;
	font-weight: 400 !important;
	font-family: "Font Awesome 6 Pro";
	text-decoration: none;
	padding-right: 0.7rem;
	color: #3375cb;
	font-size: 2rem;
	vertical-align: middle;

	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.cc-modal-header-select {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.cc-modal-header-select h2:before {
	content: "\f00e" !important;
	font-weight: 400 !important;
	font-family: "Font Awesome 6 Pro";
	text-decoration: none;
	padding-right: 0.7rem;
	color: #3375cb;
	font-size: 2rem;
	vertical-align: middle;

	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.cc-modal-progress {
	margin: 1rem 1rem;
}

.cc-modal-progress i {
	font-size: 5rem;
	margin: 2rem 2rem 2rem 1rem;
}

.cc-inline-progress {
	margin: 1rem 1rem;
}

.cc-inline-progress i {
	font-size: 5rem;
	margin: 2rem;
}

.cc-tbl-row-icon-edit {
	font-size: 1.25rem;
	color: #3375cb;
}

.cc-btn-icon-left {
	margin-right: .60rem;
}

.cc-btn-icon-right {
	margin-left: .60rem;
}

/* Note: .cc-is-invalid and .cc-is-valid are used by Parsley */
.cc-is-invalid {
	color: #dc3545;
}

.cc-is-valid {
	color: #008552;
}

/**********
Callista styles specific to web style template (prefix: cc-ws-)
**********/

.cc-ws-card-main-content .card-header {
	background-color: white;
}

.cc-ws-text {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.cc-ws-text-secondary {
	color: #71706d !important;
}

.cc-ws-logo:hover {
	text-decoration: none;
}

.cc-ws-btn-sidebar {
	color: #ffffff !important;
	background-color: #ce2e7a !important;
}

.cc-ws-btn-sidebar:hover {
	outline: none;
	z-index: -1;
}

.cc-ws-btn-sidebar:focus {
	outline: none;
	box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #ce2e7a;
	z-index: -1;
	background-color: #ce2e7a;
}

.cc-ws-header-icon {
	color: #ce2e7a;
	margin-right: 1rem;
}

.cc-ws-card-upload,
.cc-ws-card-key {
	margin-top: 15px;
}

/* Override to 'massage' settings BS5 now uses when using our BS4 template */
.cc-navbar {
	padding: 8px 16px;
}

/**********
Callista styles specific to functional areas (prefix : cc-<functional-area>-)
**********/

/* Functional area: 'ap-step' */

.cc-ap-step-card-mob, .cc-ap-step-card-tablet {
	margin-bottom: 10px;
	margin-top: -20px;
}

.cc-ap-step-card-mob .card-body, .cc-ap-step-card-tablet .card-body {
	height: 7.3rem;
}

.cc-ap-step-card-tablet .carousel-control-prev {
	margin-left: -18px;
}

.cc-ap-step-card-tablet .carousel-control-next {
	margin-right: -18px;
}

.cc-ap-step-card-mob .carousel-inner,
.cc-ap-step-card-tablet .carousel-inner {
	overflow: visible;
}

.cc-ap-step-card-mob .carousel-control-prev-icon,
.cc-ap-step-card-tablet .carousel-control-prev-icon {
	/* Copy of BS4 default with different fill colour */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233375cb' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.cc-ap-step-card-mob .carousel-control-next-icon,
.cc-ap-step-card-tablet .carousel-control-next-icon {
	/* Copy of BS4 default with different fill colour */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233375cb' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

.cc-enr-step-card-mob .carousel-inner {
	padding-top: 5px;
}

.cc-enr-step-card-tablet .carousel-inner {
	padding-top: 3px;
}

.cc-ap-step-card-mob .carousel-indicators,
.cc-ap-step-card-tablet .carousel-indicators {
	margin-bottom: 200px;
	top: 70px;
	padding-top: 6px;
}

.cc-ap-step-card-mob ol.carousel-indicators li,
.cc-ap-step-card-tablet ol.carousel-indicators li {
	background: #3375cb;
	opacity: 1;
	border-top: none;
	border-bottom: none;
	width: 40px;
}

.cc-ap-step-card-mob ol.carousel-indicators li.active,
.cc-ap-step-card-tablet ol.carousel-indicators li.active {
	background: #3375cb;
	opacity: 1;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
}

.cc-ap-step-card-mob ol.carousel-indicators li.selected,
.cc-ap-step-card-tablet ol.carousel-indicators li.selected {
	background: #3375cb;
	border-top: 5px solid transparent !important;
	border-bottom: 4px solid transparent !important;
	margin-top: 0px;
}

.cc-ap-step-card-header {
	border-bottom: 1px solid #e7e7e7;
	padding-top: 1px;
	padding-bottom: 7px;
}

.cc-ap-step-container {
	margin-bottom: 0.3rem;
	padding: 0.3rem;
}

.cc-ap-step-container a {
	position: relative;
	bottom: 0.25rem;
}

.cc-ap-step-container a:focus {
	box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.3rem #3375cb;
	outline: 0;
}

.cc-ap-step-container-current a:focus {
	box-shadow: 0 0 0 0.125rem #f4f8fc, 0 0 0 0.3rem #3375cb;
	outline: 0;
}

.cc-ap-step-container-current {
	background-color: #ffffff;
	border-left: #3375cb solid 0.5rem;
	border-radius: 0.25rem;
	box-shadow: 0 0 0 3px #3375cb;
	margin-left: -0.5rem;
}

.cc-ap-step-container-current a {
	font-weight: bold;
	position: relative;
	bottom: 0.25rem;
}

.cc-ap-step-container-mob {
	margin-bottom: 0.3rem;
}

.cc-ap-step-container-current-mob {
	font-weight: bold;
	border-radius: 7px;
	padding-bottom: 5px;
	padding-top: 5px;
	box-shadow: 0 0 0 3px #3375cb;
}

.cc-ap-step-container-tablet {
	margin-bottom: 0.3rem;
	min-width: 140px; /* Note: This may need to change if apStepsFunctionality.mdStepsDisplayNum != 3 */
}

.cc-ap-step-container-current-tablet {
	font-weight: bold;
	border-radius: 7px;
	padding-left: 12px;
	padding-bottom: 2px;
	padding-top: 4px;
	padding-right: 12px;
	box-shadow: 0 0 0 3px #3375cb;
}

.cc-ap-step-node-link {
	position: relative;
	top: 0;
}

.cc-ap-step-node-link:hover {
	text-decoration: none;
}

.cc-ap-step-node {
	color: #3375cb;
	font-size: 1.7rem;
	position: relative;
	top: 0.1rem;
	z-index: 999;
}

.cc-ap-step-node-join {
	width: 3px;
	height: 25px;
	background-color: #3375cb;
	position: relative;
	left: 25px;
	margin-top: -10px;
	margin-bottom: -8px;
	padding-top: 0;
	padding-bottom: 0;
}

.cc-ap-step-node-disabled {
	color: #71706d;
}

.cc-ap-step-link-disabled {
	font-weight: normal !important;
	color: #71706d;
}

.cc-ap-step-node-join-disabled {
	background-color: #71706d;
}

.cc-ap-step-info i {
	color: #3375cb;
}

.cc-ap-step-info i:active {
	color:#1d427a;
}

.cc-ap-step-info {
	font-size: 1.7rem;
}

@media (max-width: 767px) {
	.cc-ap-step-info {
		font-size: 1.2rem;
	}
}

.cc-ap-step-node-file {
	color: #71706d;
	font-size: 1.0rem;
	position: relative;
	top: 0.3rem;
	z-index: 999;
}

.cc-ap-step-node-file-attached {
	color: #3375cb;
	font-size: 1.0rem;
	position: relative;
	top: 0.3rem;
	z-index: 999;
}

.cc-ap-step-key-text {
	position: relative;
	font-size: 0.8rem;
	bottom: 0.2rem;
	left: 0.5rem;
}

.cc-ap-step-key-file {
	font-size: 1.7rem;
	position: relative;
	top: 0.3rem;
	z-index: 999;
}

.cc-ap-step-key-file-attached {
	color: #3375cb;
	font-size: 1.7rem;
	position: relative;
	top: 0.3rem;
	z-index: 999;
}

/* Functional area: 'user-info' */
.cc-user-info-card-header {
	background-color: white;
	border-bottom: 1px solid #e7e7e7;
	padding-top: 1px;
	padding-bottom: 7px;
	height: 72px;
}

.cc-user-info-icon {
	background-color: white;
	font-size: 5.5em;
	color: #e84894;
	width: 70px;
	position: relative;
	top: 30px;
}

.cc-user-info-container {
	margin-top: 9px;
}

/* Functional area: 'ap-list' */
.cc-ap-list-promo-disc {
	color: #fcce50;
}

.cc-ap-list-new-app-icon {
	font-size:2vw;
	color: #ffffff;
}

/* Functional area: 'apapplcrs' (also used by apcrstrnfr) */
a.cc-apapplcrs-action:before {
	font-family: "Font Awesome 6 Pro";
	text-decoration: none;
	padding-left: 2px;
	padding-right: 5px;
	font-size: inherit;
	position: relative;
	bottom: 1px;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

a.cc-apapplcrs-action-delete:before {
	content: "\f2ed" !important;
	font-weight: 400 !important;
}

a.cc-apapplcrs-action-edit:before {
	content: "\f044" !important;
	font-weight: 400 !important;
}

a.cc-apapplcrs-action-down:before {
	content: "\f103" !important;
	font-weight: 400 !important;
}

a.cc-apapplcrs-action-up:before {
	content: "\f102" !important;
	font-weight: 400 !important;
}

a.cc-apapplcrs-action-add-promo:before {
	content: "\f301" !important;
	font-weight: 400 !important;
}

a.cc-apapplcrs-action-delete-promo:before {
	content: "\f2f0" !important;
	font-weight: 400 !important;
}

.cc-apapplcrs-cell-curr {
	background-color: #e6f2ff !important;
	border-left: #3375cb solid 0.4rem !important;
}

/* Functional area: 'apcrstrnfr' */
.cc-apcrstrnfr-from-header {
	color: #3375cb;
	font-size: 2rem;
}

.cc-apcrstrnfr-to-header {
	color: #3375cb;
	font-size: 2rem;
}

.cc-apcrstrnfr-arrow-down {
	font-size: 5rem;
	color: #3375cb;
}

/* Functional area: 'aprespoffr' */
.cc-aprespoffr-intrntl {
	border-color: #3375cb !important;
	background-color: #e6f2ff;
	border-radius: .25rem !important;
	padding: 1rem !important;
}

.cc-ap-step-sticky { 
	position: -webkit-sticky;
	position: sticky;
	top: 0;
} 

/*
- If using new login functionality then include #ccwrapper in stylesheet applicant-default.css and set display: none; (to prevent flickering on page load). Do not include applicant-default-login-legacy.css in template.ws.html.
- If using old login functionality then remove #ccwrapper from stylesheet applicant-default.css and include applicant-default-login-legacy.css in main template.
*/
#ccwrapper {
	display: none;
}