/* VERINFO student-default.css Release: REL20.0.0.3.0.0 (12/06/2018 13:45:00) */

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

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

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

/**********
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;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	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 60.666667%;
		flex: 0 0 60.666667%;
		max-width: 60.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%;
	}
}

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

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

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

.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 5 Pro";
	display: inline-block;
	color: #007bff;
	margin-right: 0.5rem;
	position: relative;
	bottom: 0.25rem;
	font-size: 0.8rem;
	opacity: 0.5;
}

h2.cc-section-header.cc-data-required:before {
	content: "\f069";
	font-weight: 700;
	font-family: "Font Awesome 5 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 5 Pro";
	display: inline-block;
	color: #007bff;
	margin-right: 0.6rem;
	position: relative;
	bottom: 0.25rem;
	font-size: 0.5rem;
	opacity: 0.5;
}

.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: #17a2b8; /* Same as Bootstrap 4 .text-info */
	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 5 Pro" f08e or "Font Awesome 5 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 5 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 5 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-conf-link:after {
	font-family: "Font Awesome 5 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 5 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;
}

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

.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-popover-invalid {
	color: white !important;
	background-color: #ff1d61;
}

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

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

/*
	.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: #007bff;
	padding-right: 0.5rem;
}

.cc-modal-warning .modal-header {
	color: #ffc107;
}

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

.cc-modal-danger .modal-header {
	color: #dc3545;
}

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

.cc-modal-info .modal-header {
	color: #007bff;
}

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

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

.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 5 Pro";
	text-decoration: none;
	padding-right: 0.7rem;
	color: #007bff;
	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 5 Pro";
	text-decoration: none;
	padding-right: 0.7rem;
	color: #007bff;
	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: #007bff
}

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

.cc-is-valid {
	color: #28a745;
}
/* Override background image for .cross-clear.disabled will be opacity=0.4; */
.form-control.is-invalid.cc-is-invalid {
    background-image: none;
}

/**********
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-logo:hover {
	text-decoration: none;
}

.cc-ws-btn-sidebar {
	border-radius: 50% !important;
	color: #FFFFFF !important;
	width: 39px !important;
}

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

.cc-ws-breadcrumb-current-page-2 {
	color: #888888;
	position: relative;
	top: -1px;
}

.cc-ws-breadcrumb-current-page-3 {
	color: #888888;
	position: relative;
	top: 1px;
}

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

/* Functional area: 'receipt' */
.cc-receipt-container {
	border: 2px dashed #afafaf;
	padding: 10px;
	margin-top: 25px;
	background-color: #fdf4e6;
}

.cc-receipt-icon {
	font-size: 2rem;
}

/* Functional area: 'activity' */
.cc-activity-col {
	width: 12.5%;
}

.cc-activity-clash {
	background-color: #ffcccc;
}

.cc-activity-avail {
	background-color: #ffcc99;
}

.cc-activity-selected {
	background-color: #CCCC99;
}

/* Functional area: 'enr-step' */
.cc-enr-step-card-header {
	border-bottom: 1px solid #e7e7e7;
	padding-top: 1px;
	padding-bottom: 7px;
}

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

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

.cc-enr-step-container-current {
	background-color: #e6f2ff;
	border-left: #007bff solid 0.4rem;
	margin-left: -0.4rem;
}

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

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

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

.cc-enr-step-node {
	color: #007bff;
	font-size: 1.7rem;
	position: relative;
	top: 0.1rem;
	z-index: 999;
}

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

.cc-enr-step-node-disabled {
	color: #e7e7e7;
}

.cc-enr-step-link-disabled {
	font-weight: normal !important;
	color: rgba(0, 0, 0, .3) !important;
}

.cc-enr-step-node-join-disabled {
	background-color: #e7e7e7 !important;
}

.cc-enr-step-info i {
	color: #007bff;
}

.cc-enr-step-key-text {
	position: relative;
	bottom: 0.2rem;
}

.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: #70a2db;
	width: 70px;
	position: relative;
	top: 30px;
}

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

/* make mobile buttons 100% width on mobile */
@media (max-width: 768px) {
    .btn, .btn-group {
        /*width: 100%;*/
    }
}

.cc-data-required:before {
    padding-right: 5px;
}
/* UWA Help  */
.uwa-help mark{
	background-color: rgba(0, 0, 0, 0); /* offset the background color*/
	text-decoration: underline;
}
/* End of UWA Help */