/*
 Put your custom overlay styles in here
 You can use your northpass color palette in this file

{{ color_palette.button_font_color }}
{{ color_palette.button_color }}
{{ color_palette.button_hover_color }}
{{ color_palette.header_font_color }}
{{ color_palette.header_font_hover_color }}
{{ color_palette.header_color }}
*/

/* ------------ Northpass Style Overrides ------------ */

/* ------ Learner/Admin Mode Button ------ */
@media screen and ( max-width: 35.5rem ) {
	body .Container-sc-1cu1r9y-3 {
		position: unset;
	}
}

/* ------ Text ------ */
body {
	font-family: "Lato", Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: #5a616b;
}

main {
	flex-grow: 1;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

p + p {
	margin-top: 0.5rem;
}

a {
	color: #2574e1;
}
a:hover,
a:focus {
	color: #ba37d6;
}
a:active {
	color: #9630ab;
}
.np-text-light {
	color: #6e7580;
}
.np-text-muted {

}
.np-text-title {
	color: #5a616b;
}
.np-resource-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0;
	text-align: left;
}
.np-resource-subtitle,
.np-training-events .np-resource-subtitle {
	text-align: left;
	padding: 0;
	margin-top: 0.5rem;
	margin-bottom: 0;
}

@media screen and ( min-width: 48rem ) {
	.np-resource-title {
		font-size: 2rem;
	}
}

/* ------ Common Layout ------ */

/* --- Page Content --- */
.page__primary-content {
	margin-top: 2rem;
}
@media screen and ( min-width: 48rem ) {
	.page__primary-content {
		margin-top: 2.5rem;
	}
}

/* --- Box Container (for signup/password reset etc) --- */
.np-box-container {
	height: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.np-box {
	border-radius: 1rem;
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
	margin: 0;
	width: 100%;
	max-width: 550px
}
.np-box-header {
	border-top-right-radius: 1rem; 
	border-top-left-radius: 1rem;
	height: auto;
	padding: 1.5rem 2rem 1rem;
}
.np-box-header-logo {
	height: 50px;
}

.np-box-content-container {
	padding: 2rem 2rem 3rem;
}
.np-box-content-container,
.np-alert + .np-box-content-container {
	margin: 0;
}

@media screen and ( min-width: 48rem ) {
	.np-box-container::before,
	.np-box-container::after {
		content: "";
		display: block;
	}
	.np-box-container::before {
		flex-grow: 1;
	}
	.np-box-container::after {
		flex-grow: 2;
	}
	.np-box-container {
		padding: 2rem;
	}
	.np-box-header {
		padding: 2.5rem 2rem 2rem;
	}
	.np-box-header-logo {
		height: 70px;
	}
	.np-box-content-container {
		padding: 3rem 4rem 4rem;
	}
	.np-alert + .np-box-content-container {
		padding-top: 2rem;
	}
}

/* --- Section Horizontal Padding --- */
.np-header,
.np-sub-navigation,
.np-page-container,
.np-subpage-container,
.np-homepage-hero-content,
.homepage-navigation__section,
.page-section {
	width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

@media screen and ( min-width: 48rem ) {
	.np-header,
	.np-sub-navigation,
	.np-page-container,
	.np-subpage-container,
	.np-homepage-hero-content,
	.homepage-navigation__section,
	.page-section {
		padding-left: 5rem;
		padding-right: 5rem;
	}
}

/* --- Page Header Area --- */
.page__header-wrapper,
.np-catalog-header-wrapper {
	margin-bottom: 2rem;
}

@media screen and ( min-width: 48rem ) {
	.page__header-wrapper,
	.np-catalog-header-wrapper {
		margin-bottom: 2.5rem;
	}
}

/* --- Blocks Layout --- */
.blocks-layout {
	display: flex;
	flex-direction: column;
}
.blocks-layout,
.blocks-layout > .blocks-layout {
	width: calc( 100% + 1.5rem);
	margin: -0.75rem;
}
.blocks-layout {
	flex-wrap: wrap;
}
.blocks-layout > *,
.blocks-layout > .np-card {
	padding: 0.75rem;
	width: 100%;
}
@media screen and ( min-width: 35.5rem ) {
	.blocks-layout,
	.blocks-layout > .blocks-layout {
		flex-direction: row;
	}
}
@media screen and ( min-width: 48rem ) {
	.blocks-layout {
		flex-direction: row;
	}
	.blocks-layout,
	.blocks-layout > .blocks-layout {

		width: calc( 100% + 2rem );
		margin: -1rem;
	}
	.blocks-layout > *,
	.blocks-layout > .np-card {
		padding: 1rem;
	}
}

/* --- Columns --- */
/* Adding some column options for between the width of small and xs, in order to avoid overriding the other column sizing these only apply to the narrow range */

@media only screen and ( min-width: 35.5rem ) and ( max-width: calc(48rem - 1px) ) {
	.col-x-sm-6 {
		flex-basis: 50%;
		max-width: 50%
	}
}

/* ------ Main Navigation ------ */
.np-header {
	height: auto;
}
/* --- Logo --- */
.np-header-logo {
	padding: 0.75rem 0;
}
@media screen and ( min-width: 48rem ) {
	.np-header-logo {
		padding: 1.25rem 0;
	}
}
/* --- Navigation --- */
.np-header-desktop-nav-list {
	justify-content: end;
	margin: 1rem;
	padding-left: 0;
}
.np-header-desktop-nav-link {
	padding: 0.1rem 0.75rem 0.15rem;
	border: transparent 2px solid;
	border-radius: 3rem;
}
.np-header-desktop-nav-item {
	padding: 0;
	margin: 2px;
}
.np-header-desktop-nav-link:focus,
.np-header-desktop-nav-link:active {
	color: #ffffff;
}
.np-header-desktop-nav-link:focus {
	border-color: #304780;
	outline: none;
}
.np-header-desktop-nav-link.is-active {
	background-color: #304780;
}
.np-header-desktop-nav-link.is-active:focus {
	border-color: #275cb8;
}
/* --- Search --- */
.np-header-search-input {
	opacity: unset;
	border-radius: 3rem;
	background-color: #304780;
}
.np-header-search-icon {
	right: unset;
	left: 0.75rem;
}
.np-header-search-input:hover + .np-header-search-icon {
	color: #bfe4ff;
}
.np-header-search-input:focus {
	border-color: #275cb8;
	outline: none;
	border-radius: 3rem;
	padding: 0 1.25rem 0 2.5rem;
}
.np-header-search-input:focus + .np-header-search-icon {
	color: #304780;
}

/* ------ Mobile Menu ------ */
.np-header-mobile-menu-content-button.np-danger {
	border-color: #ff5773;
	color: #E52242;
}

/* ------ Page/Subpage Container ------ */
body, 
.np-page-container,
.np-subpage-container {
	background-color: #f5f7fa;
	width: 100%;
}

.np-page-container,
.np-subpage-container {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.np-page-container {
	position: relative;
}

@media screen and ( min-width: 48rem ) {
	.np-page-container {
		padding-top: 5rem;
		padding-bottom: 5rem;
		margin-top: 0;

	}
	.np-subpage-container {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

/* --- Background Image --- */
.page-background-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: calc( 500 / 820 * 100vw );
	background-repeat: no-repeat;
	background-size: 100%;
}
.page-background-image:after {
	content: " ";
	width: 100%;
	height: 100%;
	display: block;
}
/* ------ Footer ------ */
/* --- Logo --- */
.np-footer-logo-image {
	filter: none;
	height: 30px;
	opacity: initial;
}

/* ------ Northpass Powered By Signet ------ */
div.np-powered-by {
	display: none;
}

/* ------ Sub Navigation ------ */
/* --- Container --- */
.np-sub-navigation {
	padding-top: 1.25rem;
	margin-bottom: 0;
}
.np-sub-navigation-content {
	margin-left: -0.75rem;
	margin-right: -0.75rem;
}

/* --- Item --- */
.np-sub-navigation-content-item {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 0 0.75rem;
}
.np-sub-navigation-content-item-link {
	height: auto;
	flex-grow: 1;
	line-height: 1.15;
}
.np-sub-navigation-content-item-inactive .np-sub-navigation-content-item-link {
	margin-bottom: 1rem;
}
.np-sub-navigation-content-item-icon,
.oa-sub-navigation-content-item-label {
	flex-grow: 1;
}
/* Inactive Item */
.np-sub-navigation-content-item-inactive .np-sub-navigation-content-item-icon {
	color: #c5cbd1;
}

/* --- Seperator --- */
.oa-sub-navigation-seperator {
	flex-grow: 1;
}

/* ------------ Animations ------------ */
/* --- Transitions --- */
a,
button,
.np-button,
.np-course-outline-content-activity-link-completed::after,
.outline-card__icon-link,
.filter-list__item {
	transition: all 0.3s ease;
}
/* --- Animation Defaults --- */
.is-animation {
	animation-timing-function: cubic-bezier( 0.36, 0.45, 0.63, 0.53);
	animation-duration: 20s;
	animation-iteration-count: infinite;
}
/* --- Slide --- */
@keyframes slide-2 {
	0% {
		transform: translateX( 0% );
	}
	100% {
		transform: translateX( -200% );
	}
}
@keyframes slide-3 {
	0% {
		transform: translateX( 0% );
	}
	100% {
		transform: translateX( -300% );
	}
}
@keyframes slide-4 {
	0% {
		transform: translateX( 0% );
	}
	100% {
		transform: translateX( -400% );
	}
}
@keyframes slide-5 {
	0% {
		transform: translateX( 0% );
	}
	100% {
		transform: translateX( -500% );
	}
}
/* --- Rotate --- */
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* --- Pinwheel --- */
@keyframes pinwheel {
	0% {
		transform: rotate(45deg) translateX(0px);
	}
	100% {
		transform: rotate(-25deg) translateX(20px);
	}
}
/* --- Text Gradient --- */
@keyframes homepage-gradient {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: 100%;
	}
}

/* ------------ Components ------------ */

/* ------ Card ------ */
.np-card-container {
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
	border-radius: 1rem;
	justify-content: start;
	align-items: stretch;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
}
.np-card {
	min-height: unset;
	min-width: unset;
	margin-bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.np-card .np-card-text-wrapper {
	flex-grow: 1;
	width: auto;
}

@media screen and ( min-width: 48rem ) {
	.np-card-padding-dynamic  {
		padding: 3rem;
	}
}
/* Vertical Cards */
@media screen and ( min-width: 35.5rem ) {
	.np-card:not(.card--horizontal) .np-card-container {
		flex-direction: column;
	}
	.np-card:not(.card--horizontal) .np-card-text-wrapper {
		width: 100%;
	}
}
/* --- Ribbon --- */
.np-card-ribbon {
	position: relative;
	right: unset;
	top: unset;
	margin-left: 0.75rem;
	background-color: #795ae8;
	padding: 0.25rem 1rem;
	border-radius: 1.5rem;
	line-height: 1.1;
	text-transform: none;
	font-size: 0.75rem;
	text-align: center;
	align-self: start;
}

.np-card-ribbon i {
	margin-right: 3px;
}
.card__image .np-card-ribbon {
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
}

/* --- Image --- */
.card__image {
	position: relative;
	background-size: cover;
	background-position: center;
	width: 50%;
	border-color: #e0f3ff;
	border-style: solid;
	border-radius: 1rem 0 0 1rem;
	border-width: 0 1px 0 0;
	flex-shrink: 1;
}
/* Vertical Card */
@media screen and ( min-width: 35.5rem ) {
	.card__image {
		width: calc(100% / 3);
		flex-shrink: 0;
	}
	.np-card:not(.card--horizontal) .card__image {
		width: 100%;
		padding-top: calc(500 / 820 * 100% /2);
		padding-bottom: calc(500 / 820 * 100% /2);
		border-radius: 1rem 1rem 0 0;
		border-width: 0 0 1px 0;
	}
}

/* --- Card Counter --- */
.np-learning-path-outline {
	counter-reset: tutorial;
}
.card__step-counter {
	font-size: 0.875rem;
	font-weight: 900;
	color: #6e7580;
	margin-bottom: 0;
	counter-increment: tutorial;
}
.card__step-counter::after {
	content: "Tutorial " counter(tutorial);
}

/* --- Heading --- */
.np-card-heading {
	font-weight: 900;
	font-size: 1.25rem;
	line-height: 1.3;
	color: #24272e;
	margin-top: 0;
	margin-bottom: 1rem;
}
@media screen and ( min-width: 48rem ) {
	.np-card-heading {
		margin-bottom: 1.25rem;
	}
}
/* --- Text --- */
.np-card-text {
	margin-bottom: 1.5rem;
	font-size: 1rem;
	line-height: 1.5;
}
.np-card-text:last-child {
	margin-bottom: 0;
}
@media screen and ( min-width: 48rem ) {
	.np-card-text {
		font-size: 1.125rem;
		margin-bottom: 2rem;
	}
}
/* --- Content Area --- */
.np-card-content,
.np-learning-paths .np-card-content {
	padding: 1.25rem;
	height: 100%;
}
.np-card-content > * {
	margin: 0;
}
.np-card-content > *:not(:last-child) {
	margin-bottom: 0.5rem;
}
.np-card-content-title {
	line-height: 1.3;
}
.np-card-content .np-card-content-title {
	margin-top: 0;
}
.np-card-content-subtitle {
	font-size: 0.875rem;
	font-weight: 700;
	color: #795ae8;
}
/* Description */
.np-card-content-description {
	flex-grow: 1;
	display: block;
}
.np-card-content-description p {
	margin: 0;
}
@media screen and ( min-width: 48rem ) {
	.np-card-content-description {
		font-size: 1rem;
	}
}
/* Footer */
.np-card-content-footer {
	padding-top: 0.5rem;
	align-items: baseline;
}
.np-card-content-footer > *:first-child {
	margin-left: 0;
}

.np-card-content-progress {
	margin-top: 0;
	margin-left: 0.5rem;
	font-size: 1rem;
	text-transform: none;
	color: #795ae8;
}

/* Content Divider */
.np-card-content-divider {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	border-color: #94dbff;
}
.np-card-content-divider:last-child {
	margin-bottom: 0;
}
@media screen and ( min-width: 48rem ) {
	.np-card-content-divider {
		margin-top: 2rem;
		margin-bottom: 2rem;
		padding-top: 2rem;
	}
}
@media screen and ( min-width: 48rem ) {
	.np-card-content-description {
		font-size: 1rem;
	}
}
/* --- Card Stack --- */
.np-card-stack-level-1, 
.np-card-stack-level-2 {
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
	border-radius: 1rem;
	height: 2rem;
	margin-top: -1.4rem;
}

/* --- Course / Learning Path / Event Details Card --- */
/* Header Area */
.details-card__header {
	padding-bottom: 1rem;
	margin-bottom: 0;
}
.np-top-title {
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.3;
	color: #24272e;
	margin-bottom: 0.75rem;
}
@media screen and ( min-width: 48rem ) {
	.details-card__header {
		padding-bottom: 1.5rem;
	}
	.np-resource-header {
		flex-direction: row;
		align-items: center;
		padding-top: 2rem;
	}
	.np-top-title {
		font-size: 2rem;
		margin-bottom: 0;
	}
}
/* Content Area */
.details-card__card-container {
	justify-content: top;
	flex-direction: column;
}
.details-card__card-content {
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}
@media screen and ( min-width: 48rem ) {
	.details-card__card-content {
		padding-top: 2rem;
		padding-bottom: 3rem;
	}
}
/* Heading Styles for User Generated Content */
.details-card__card-content h4 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	color: #24272e;
	font-weight: 700;
}
@media screen and ( min-width: 48rem ) {
	.details-card__card-content h4 {
		margin-top: 2rem;
	}
}

/* --- Training Session Card --- */

/* Date Bar */
.np-card-training-session-date {
	position: relative;
}
.np-card-training-session-date:not(:first-child) {
	margin-top: 0.5rem;
}
.np-card-training-session-date-bar {
	background-color: #795ae8;
	left: -1.25rem;
	height: 100%;
	width: 0.5rem;
	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;

}
.np-card-training-session-date-day {
	color: #24272e;
	font-weight: 900;
}
.card__month-year-container {
	flex-grow: 1;
}
.np-card-training-session-date-month,
.np-card-training-session-date-year {
	line-height: 1.1;
}
.np-card-training-session-date-month {
	color: #795ae8;
	text-transform: none;
}
.np-card-training-session-date-year {
	color: #6e7580;
}
.session-date__other-info-container,
.session-date__other-info-container.np-training-session-cta-note {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 1rem;
	margin-right: -1.25rem;
	min-height: 60px;
	border-top-left-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
}
.session-date__other-info-container {
	padding: 0.25rem 0.5rem 0.25rem 0.5rem;
	background-color: #795ae8;
	color: white;
}
.np-training-session-cta-note {
	padding: 0.5rem 1.25rem 0.5rem 0.75rem;
	margin-bottom: 0;
	position: unset;
}
.session-date__other-info-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	align-content: center;
}
.session-date__other-info-wrapper > * {
	margin: 0 auto;
	padding: 0.25rem;
}
.session-date__other-info-container::before,
.session-date__other-info-container::after {
	display: block;
	content: "";
}
.session-date__other-info-container::before {
	flex-basis: .5rem;
	flex-shrink: 1;
	padding: 0;
}
.session-date__other-info-container::after {
	flex-basis: .75rem;
	flex-shrink: 3;
	padding: 0;
}
.np-card-training-sessions-icon {
	color: #ffffff;
	text-align: center;
}
.np-training-session-cta-note,
.np-card-training-sessions-label {
	line-height: 1.1;
	font-weight: 700;
	text-align: center;
}
.np-card-training-sessions-label {
	font-size: 0.875rem;
	overflow: unset;
}
.np-card-training-sessions-label,
.session-date__other-info-wrapper > span {
	white-space: unset;
}

/* ------ Divider ------ */

/* --- Padding--- */
.np-divider {
	margin: 0 1.25rem;
	border-color: #94dbff;
}
@media screen and ( min-width: 48rem ) {
	.np-divider {
		margin: 0 3rem;
	}
}

/* ------ Course Banner ------ */
.banner-course {
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
	background-color: #ffffff;
	border-radius: 1rem;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	overflow: hidden;
}
/* Course Content */
.banner-course__content {
	padding: 1rem 0.75rem;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: start;
}
.banner-course__content > * {
	margin: 0.25rem 0.5rem;
}
.banner-course__title {
	color: #1b3e4f;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}
.banner-course__description {
	flex-grow: 1;
}
@media screen and ( min-width: 48rem ) {
	.banner-course__title {
		font-size: 1.25rem;
	}
}
@media screen and ( min-width: 64rem ) {
	.banner-course {
		border-radius: 2.5rem;
	}
	.banner-course__content {
		flex-direction: row;
		align-items: center;
	}
	.banner-course__description  {
		font-size: 1.25rem;
	}
}
/* Course Image */
.banner-course__image {
	position: relative;
	background-size: cover;
	background-position: center;
	width: 25%;
	max-width: 14rem;
	border-color: #e0f3ff;
	border-style: solid;
	border-radius: 1rem 0 0 1rem;
	border-width: 0 1px 0 0;
	flex-shrink: 0;
}

/* ------ Call to Action ------ */
.cta__container {
	margin: 1.5rem 0;
}
.cta__container:first-child {
	margin-top: 0;
}
.cta__container:last-child {
	margin-bottom: 0;
}
.np-top-cta {
	border-radius: 3rem;
	background-color: #e0f3ff;
	padding: 0.5rem 1.5rem;
	margin-bottom: 1.5rem;
	position: relative;
}

.np-top-cta .np-progress-bar-container {
	background-color: #ffffff;
}

@media screen and ( min-width: 48rem ) {
	.cta__container {
		margin: 2rem 0;
	}
	.np-top-cta {
		padding: 1rem;
		margin-bottom: 0;
	}
	.np-top-cta .np-top-cta-progress-content {
		margin-left: 1.25rem;
	}
}

/* ------ Progress Bar ------ */
.np-progress-bar-container {
	background-color: #dce1e5;

}

.np-top-cta-progress-content {
	display: flex;
	align-items: center;
	min-height: 1.5rem;
}
@media screen and ( min-width: 48rem ) {
	.np-top-cta-progress-content {
		min-height: 1.5rem;
		margin-right: 0.5rem;
	}
}
/* Progress Bar Text and Bar */
.np-top-cta-progress-content > * {
	margin: 0;
}
.np-top-cta-progress-content > * + * {
	margin-left: 1rem;
}
/* Progress Bar Text */
.np-top-cta-progress-text,
.np-top-cta-progress-title {
	font-size: 0.875rem;
	text-transform: none;
	line-height: 1.1;
}
.np-top-cta-progress-text {
	flex-shrink: 0;
	font-weight: 700;
	line-height: 1.1;
}

/* Card Progress bar */
.np-card .np-progress-bar-container {
	margin-left: 0.5rem;
	margin-top: 0;
}
.np-card-progress-bar {
	background-color: {{ color_palette.learning_progress_bar_color }};
}

/* ------ Buttons ------ */
.np-button {
	height: unset;
	min-height: unset;
	padding: 0.5rem 1.25rem;
	border-radius: 1.5rem;
	font-size: 1rem;
	line-height: 1.5;
}
.np-button:hover,
.np-button:focus,
.np-button:active  {
	color: #fff;
}

.np-button:focus {
	background-color: {{ color_palette.button_hover_color }};
	outline: 2px solid #e79ff7;
}
.np-button:active {
	background-color: #50185b;
}

/* --- Wide Buttons --- */
.np-button-wide {
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

/* --- Secondary Buttons --- */
.np-button-secondary {
	color: #fff;
	background-color: #6e7580 !important;
}
.np-button-secondary:hover,
.np-button-secondary:focus {
	background-color: {{ color_palette.button_hover_color }} !important;
}
.np-button-secondary:active {
	background-color: #50185b !important;
}

/* ------ Dropdowns ------ */
.dropdown-calendar-menu {
	padding: 0.5rem 0;
	border-radius: 1rem;
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
}
.dropdown-calendar-menu.is-open {
	overflow: hidden;
}
.dropdown-calendar-item-element {
	padding: .5rem 1.25rem;
	color: #5a616b;
}
.dropdown-calendar-item-element:hover,
.dropdown-calendar-item-element:focus,
.dropdown-calendar-item-element:active {
	color: #50185b;
}
.dropdown-calendar-item-element:hover,
.dropdown-calendar-item-element:focus {
	background-color: #fae3ff;
}
.dropdown-calendar-item-element:active {
	background-color: #fdf3ff;
}
/* ------ Form & Inputs ------ */
.np-form-field {
	margin-bottom: 1rem;
}
.np-input-label {
	font-size: 1rem;
	margin-bottom: 0.5rem;
	color: #5a616b;
}
.np-input {
	border-radius: 1.25rem;
	height: 2.5rem;
	padding: 0.5rem 1.25rem;
	line-height: 1.5;
	background-color: #f0feff;
	border-color: #bfe4ff;
	border-width: 2px;
}
.np-input:focus {
	border-color: #4cc3ff;
}
.np-form-action {
	margin-top: 0.5rem;
}
.np-form-link {
	font-size: 0.875rem;
	margin-top: 1.25rem;
}

/* ------ Alerts ------ */
.np-alert-wrapper {
	padding: 1rem 2rem;
	width: 100%
}
.np-alert {
	min-height: unset;
	font-size: 0.875rem;
}
.np-alert-error {
	background-color: #ffe1e8;
	color: #b11932;
}
.np-alert-success {
	background-color: #e8ffe1;
	color: #1d6e2c;
}

@media screen and ( min-width: 48rem ) {
	.np-alert-wrapper {
		padding: 1rem 4rem;
	}
}

/* ------ Filter List ------ */
.filter-list__container {
	background-color: white;
	border-radius: 1rem;
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
}
/* --- Header --- */
.filter-list__header-container {
	padding: 0.75rem 1.5rem 0.5rem;
}
.filter-list__header {
	font-size: 1.125rem;
	font-weight: 300;
}
@media screen and ( min-width: 48rem ) {
	.filter-list__header {
		font-size: 1.25rem;
	}
}
/* --- Sections --- */
.filter-list__section {
	border-top: 1px solid #e0f3ff;
}
/* Header */
.filter-list__section-header-container {
	padding: 0.5rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}
.filter-list__section-header-container:focus {
	outline: 2px solid #e79ff7;
	outline-offset: -2px;
}
.filter-list__section-header {
	font-size: 1rem;
	color: #1b3e4f;
}
@media screen and ( min-width: 48rem ) {
	.filter-list__section-header {
		font-size: 1.125rem;
	}
}
/* Icons */
.filter-list__section-header-icon {
	font-size: 1.5rem;
	color: {{ color_palette.button_color }};
}
.filter-list__section-header-container:hover .filter-list__section-header-icon,
.filter-list__section-header-container:hover .filter-list__section-header-icon {
	color: #ba37d6;
}
/* Body */
.filter-list__section-body {
	padding: 0.75rem 0.75rem 0.75rem 1.5rem;
	border-top: 1px solid #e0f3ff;
}
/* --- Interactivity --- */
/* Icons */
.filter-list__section.is-open .filter-list__open-icon,
.filter-list__section.is-collapsed .filter-list__collapse-icon {
	display: none;
}
/* Body */
.filter-list__section-body-container {
	transition: max-height 0.3s ease, visibility 0.3s ease;
	max-height: 45rem;
	overflow: hidden;
}
.filter-list__section.is-collapsed .filter-list__section-body-container {
	max-height: 0;
	visibility: hidden; /* Prevents tabbing through hidden items */
}
/* --- Subsections --- */
.filter-list__subsection-header {
	margin-bottom: 0.5rem;
}
.filter-list__subsection-header:not(:first-child) {
	margin-top: 0.75rem;
}
/* --- List --- */
.filter-list {
	margin: 0;
	padding: 0;
}
/* --- Item --- */
.filter-list__item {
	list-style-type: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 1.1;
	margin-bottom: 3px;
	margin-left: -0.75rem;
	padding: 0.2rem 0.75rem;
	border-radius: 0.75rem;
	color: {{ color_palette.button_color }};
}

.filter-list__item:hover,
.filter-list__item:focus {
	background-color: #fdf3ff;
	color: #9630ab;
	cursor: pointer;
}
.filter-list__item:focus {
	outline: 2px solid #e79ff7;
}
.filter-list__item.is-active {
	background-color: {{ color_palette.button_color }};
	color: #ffffff;
}

.filter-list__item.is-active:hover,
.filter-list__item.is-active:focus {
	background-color: #ba37d6;
}
.filter-list__item-remove {
	margin-left: 0.4rem;
}
.filter-list__item:not(.is-active) .filter-list__item-remove {
	display: none;
}

/* ------ Clear Filters ------ */
.clear-filters__container {
	display: flex;
	flex-wrap: wrap;
	margin: -0.25rem -0.25rem 0.75rem;
}
.clear-filters__container > * {
	margin: 0.25rem;
}
.clear-filters__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
	line-height: 1.1;
	padding: 0.3rem 0.85rem;
	border-radius: 0.85rem;
	background-color: {{ color_palette.button_color }};
	color: #ffffff;
}
.clear-filters__button-clear-all {
	background-color: #ffffff;
	color: {{ color_palette.button_color }};
}
.clear-filters__button:hover,
.clear-filters__button:focus {
	background-color: #ba37d6;
	color: #ffffff;
	cursor: pointer;
}
.clear-filters__button:focus {
	outline: 2px solid #e79ff7;
}
.clear-filters__button.is-active {
	background-color: {{ color_palette.button_color }};
	color: #ffffff;
}
.clear-filters__icon {
	margin-left: 0.4rem;
}

/* ------ Outdated Popup ------ */
.np-course-version-outdated-popup {
	align-self: center;
	margin-left: auto;
	margin-right: 0.5rem
}

/* --- Trigger --- */
.np-course-version-outdated-popup-trigger {
	color: #f8654c;
	border-radius: 50%;
}
.np-course-version-outdated-popup-trigger:hover,
.np-course-version-outdated-popup-trigger:focus {
	color: #d54224;
}
.np-course-version-outdated-popup-trigger:focus {
	outline: 2px solid #ffa593;
}

.np-course-version-outdated-popup {
	margin-left: 0.5rem;
	margin-right: auto;
}
 
/* --- Popup --- */
.np-popup-tooltip--visible {
	border: 2px solid #ffe5e1;
}
.np-popup-tail {
	border-top: 4px solid #ffc9c0;	
}
.np-popup-header {
	background-color: #ffe5e1; 
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.np-popup-header-icon {
	color: #f8654c;
}
.np-popup-body {
	padding-left: 1.25rem;
}
.np-popup-body-button {
	border-radius: 1.5rem;
	background-color: {{ color_palette.button_color }};
}
.np-popup-body-button:hover,
.np-popup-body-button:focus {
	background-color: {{ color_palette.button_hover_color }};
	color: #fff;
}
.np-popup-body-button:focus {
	outline: 2px solid #e79ff7;;
}


/* ------------ Pages ------------ */

/* ------ Hompeage ------ */
.np-homepage {
	background-color: #bfe4ff;
	margin-bottom: 0;
}

/* --- Hero --- */
.np-homepage-hero {
	padding-bottom: calc(100vw / 2000 * 150);
	background-color: #f5f7fa;
}
.np-homepage-hero-content {
	position: unset;
	padding-top: 3rem;
	padding-bottom: 2.5rem;
}
.np-homepage-headline,
.np-homepage-subheadline {
	line-height: 1.1;
}
.np-homepage-hero .np-homepage-headline {
	font-size: 1.75rem;
	color: #fff;
	-webkit-background-clip: text;
	-moz-background-clip: text;
}
.np-homepage-hero .np-homepage-subheadline {
	font-size: 1.25rem;
	color: #1b2759;
	opacity: 100%;
}
@media screen and ( min-width: 48rem ) {
	.np-homepage-hero-content {
		padding-top: 5rem;
		padding-bottom: 10rem;
	}
	.np-homepage-hero .np-homepage-headline {
		font-size: 2.5rem;
	}
	.np-homepage-hero .np-homepage-subheadline {
		font-size: 2rem;
	}
}
/* --- Featured Section --- */
.np-homepage-featured {
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.np-homepage-featured-text {
	margin-top: 2rem;
}
.np-homepage-featured .np-homepage-headline {
	color: #6b3fd1;
	font-size: 1.5rem;
}
.np-homepage-featured .np-homepage-subheadline {
	color: #361657;
	margin-top: 0.5rem;
}
@media screen and ( min-width: 48rem ) {
	.np-homepage-featured {
		margin-top: 4rem;
	}
	.np-homepage-featured-text {
		padding-bottom: 1.35rem;
	}
	.np-homepage-featured .np-homepage-headline {
		font-size: 2rem;
	}
}

/* --- Navigation --- */
.homepage-navigation__section {
	margin-top: 1rem;
	position: relative;
}
.homepage-navigation__wrapper {
	flex-direction: column;
	justify-content: center;
	flex-wrap: unset;
}
.homepage-navigation__item-container {
	width: 100%;
}
.homepage-navigation__item {
	height: 100%;
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: row-reverse;
	background-color: white;
	border-radius: 1rem;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
}
.homepage-navigation__item:focus { 
	outline: 2px solid #e79ff7;
}
.homepage-navigation__title {
	line-height: 1.1;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	margin: 0.75rem;
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* Animation */
.homepage-navigation__animation {
	display: block;
	width: 50%;
	height: auto;
	border-style: solid;
	border-color: #e0f3ff;
	border-width: 0 1px 0 0 ;
	flex-shrink: 0;
	padding: 45px;
}
.homepage-navigation__item .is-animation,
.homepage-navigation__button.is-animation {
	animation-play-state: paused;
}
.homepage-navigation__item:hover .is-animation,
.homepage-navigation__button.is-animation:hover {
	animation-play-state: running;

}
@media screen and ( min-width: 35.5rem ) {
	.homepage-navigation__animation {
		border-width: 1px 0 0 0;
	}
}
/* Homepage Button */
.homepage-navigation__button-container {
	width: 100%;
}
.homepage-navigation__button {
	width: 100%;
	height: 100%;
	border-radius: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.25rem 1rem;
	background-image: linear-gradient(45deg, #2574e1, #795ae8, #ba37d6, #795ae8, #2574e1, #795ae8);
	background-size: 500%;
	color: #fff;
	white-space: initial;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	animation-name: homepage-gradient;
	animation-duration: 3s;
}
.homepage-navigation__button:hover,
.homepage-navigation__button:focus,
.homepage-navigation__button:active {
	color: #fff;
}
.homepage-navigation__button:focus {
	outline: 2px solid #e79ff7;
}
.homepage-navigation__button br {
	display: none;
}
/* Reactive */
@media screen and ( min-width: 35.5rem ) {
	.homepage-navigation__wrapper {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.homepage-navigation__item-container {
		width: calc( 100% / 3 );
	}
	.homepage-navigation__item {
		flex-direction: column;
	}
	.homepage-navigation__animation {
		width: 100%;
	}
}
@media screen and ( min-width: 48rem ) {
	.homepage-navigation__section {
		margin-top: calc((-100vw / 2000 * 150) - 4rem);
		width: 100%;
	}
	.homepage-navigation__title {
		font-size: 1.15rem;
		margin: 1.25rem 1rem;
	}
}
@media screen and ( min-width: 75rem ) {
	.homepage-navigation__item-container {
		width: calc( 100% / 7 * 2 );
	}
	.homepage-navigation__button-container {
		width: calc( 100% / 7 );
	}
	.homepage-navigation__button {
		border-radius: 1rem;
		background-size: 1000% 100%;
	}
	.homepage-navigation__button br {
		display: initial;
	}
}


/* --- Homepage Animations --- */
/* Setup Animation */
.animation-setup .wave-background {
	fill: #e0f3ff;
}

.animation-setup .wave-1 {
	fill: #4cc3ff;
	animation-name: slide-3;
}

.animation-setup .wave-2 {
	fill: #2574e1;
	animation-name: slide-4;
	animation-direction: reverse;
}

.animation-setup .wave-3 {
	fill: #1b2759;
	animation-name: slide-5;
}

/* Patient Engagement Animation */
.animation-pe .burst-background {
	fill: #361657;
}
.animation-pe .burst-1, 
.animation-pe .burst-2, 
.animation-pe .burst-3,
.animation-pe .burst-4, 
.animation-pe .burst-5 {
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 16px;
	transform-origin: 50% 50%;
	animation-name: rotate;
}
.animation-pe .burst-3, 
.animation-pe .burst-4 {
	animation-direction: reverse;
}
.animation-pe .burst-1 {
	fill: #6b3fd1;
 }
.animation-pe .burst-2 {
	fill: #2598f7;
	animation-duration: 30s;
}

.animation-pe .burst-3 {
	fill: #887dff;
	animation-duration: 40s;
}
.animation-pe .burst-4 {
	fill: #2574e1;
	animation-duration: 60s;
}
.animation-pe .burst-5 {
	fill: #4cc3ff;
}
/* Ocean Provider Network Animation */
.animation-network .wave-1,
.animation-network .wave-2,
.animation-network .wave-3,
.animation-network .wave-4,
.animation-network .wave-5,
.animation-network .wave-6 {
	fill: none;
	stroke-miterlimit: 10;
	stroke-width: 16px;
	animation-name: pinwheel;
	transform-origin: -150px 800px;
	animation-duration: 6s;
	animation-timing-function: cubic-bezier(.25,0,.91,.85);
}
.animation-network .wave-1 {
	stroke: #6aead8;
}
.animation-network .wave-2 {
	animation-delay: -1s;
	stroke: #00a59b;
}
.animation-network .wave-3 {
	animation-delay: -2s;
	stroke: #4cc3ff;
}
.animation-network .wave-4 {
	animation-delay: -3s;
	stroke: #b6f2e7;
}
.animation-network .wave-5 {
	animation-delay: -4s;
	stroke: #1dd7b4;
}
.animation-network .wave-6 {
	animation-delay: -5s;
	stroke: #2598f7;
}

/* ------ Dashboard Page ----- */
/* Title */
.np-dashboard-resources-title {
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: none;
	color: #5a616b;
	margin-top: 0;
}
@media screen and ( min-width: 48rem ) {
	.np-dashboard-resources-title {
		font-size: 1.5rem;
	}
}
/* Subtitle */
.dashboard-layout__subtitle {
	font-size: 1rem;
	font-weight: 900;
	line-height:; 1.3;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}
.np-dashboard-resources-title + .dashboard-layout__subtitle {
	margin-top: -0.5rem;
}
@media screen and ( min-width: 48rem ) {
	.dashboard-layout__subtitle {
		font-size: 1.25rem;
		margin-top: 2rem;
	}
}

/* ------ Catalog Page ------ */
/* --- Header --- */
.np-catalog-header-wrapper {
	display: block;
}
.np-catalog-header {
	align-items: start;
	margin: 0;
}

/* --- Content Layout --- */
.catalog-layout__wrapper {
	flex-direction: column-reverse;
	flex-wrap: nowrap;
}
.catalog-layout__filters {
	width: 100%;
}
.catalog-layout__results {
	align-content: start;
	flex-grow: 1;
}
@media screen and ( min-width: 48rem ) {
	.catalog-layout__results {
		width: 75%;
	}
}
@media screen and ( min-width: 35.5rem ) {
	.catalog-layout__wrapper {
		flex-direction: row;
	}
}

/* ------ Course Overview Page ------ */
.page--course-overview .np-card-container {
	max-width: 800px;
	margin: auto;
	flex-direction: column;
}
/* Course Image */
.np-top-image-spacing {
	margin-top: 2.5rem;
	margin-bottom: 0;
}

/* --- Background Image --- */
.page--course-overview .page-background-image {
	height: calc( 500 / 820 * 100vw * 0.6 );
}
.page--course-overview  .page-background-image::after {
	background: linear-gradient(to top, rgb(245, 247, 250) 0%, rgba(245,247,250,0) 40%);
}
/* --- Course Outline --- */
.np-course-outline {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
@media screen and ( min-width: 48rem ) {
	.np-course-outline {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
}
/* --- Course Instructors --- */
/* Container */
.instructors-list__container {
	display: flex;
	flex-direction: column;
	margin: -0.5rem;
}
.instructors-list__container > * {
	padding: 0.5rem;
	margin: 0;
}
@media screen and ( min-width: 48rem ) {
	.instructors-list__container {
		flex-direction: row;
		align-items: start;
		flex-wrap: wrap;
	}
	.instructors-list__container > * {
		width: 50%;
	}
}
/* Item */
.np-content-instructors-content-item {
	align-items: center;
}
.np-content-instructors-content-image {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid #aeb5bd;
}
.np-content-instructors-content-description {
	margin-left: 0.75rem;
}
.np-content-instructors-content-name {
	color: #6e7580;
	font-weight: 700;
	line-height: 1.3;
}
.np-content-instructors-content-info {
	font-size: 1rem;
	line-height: 1.3;
	color: #24272e;
}
@media screen and ( min-width: 48rem ) {
	.np-content-instructors-content-name {
		font-size: 1.125rem;
	}
	.np-content-instructors-content-info {
		font-size: 0.875rem;
	}
}
/* --- Table of Contents --- */
.np-course-outline-content-section-list {
	margin-bottom: 1rem;
}

/* Section Title */
.np-course-outline-content-section-name {
	color: #353a42;
	font-size: 1rem;
	line-height: 1.3;
	border-bottom-width: 0;
	padding-bottom: 0.3rem;
}
@media screen and ( min-width: 48rem ) {
	.np-course-outline-content-section-name {
		font-size: 1.125rem;
	}
}
/* List Item */
.np-course-outline-content-activity-list {
	display: flex;
	align-items: center;
	border-bottom-width: 0;
	padding: 0.3rem 0;
}
/* Icon */
.np-course-outline-content-activity-icon {
	padding: 0 0.75rem 0 0;
	color: #e9ecf0;
}
/* Connecting Bar */
.np-course-outline-content-activity-list-bar {
	background-color: #e9ecf0;
	height: calc(50% - 9px);
	top: calc(50% + 9px);
	bottom: 0;
	left: 9px;
}
.np-course-outline-content-activity-list-bar:before {
	background-color: #e9ecf0;
	content: "";
	display: block;
	position: absolute;
	height: 100%;
	top: calc(-100% - 18px);
	width: 2px;
	z-index: 1;
}
.np-course-outline-content-activity-list:first-child .np-course-outline-content-activity-list-bar:before {
	display: none;
}
.np-course-outline-content-activity-list-bar.np-progress-background-color:before {
	background-color: {{ color_palette.learning_progress_bar_color }};
}
/* Hide the last end bar without hiding the connecting element */
.np-course-outline-content-activity-list:last-child .np-course-outline-content-activity-list-bar {
	display: block;
	background-color: transparent;
}
/* Chapter Headings */
.np-course-outline-content-activity-icon-locked,
.np-course-outline-content-activity-link-completed {
	color: #6e7580;	
}
.np-course-outline-content-activity-link-completed:hover,
.np-course-outline-content-activity-link-completed:focus {
	color: #131519;
}
/* Link Hover Effect */
.np-course-outline-content-activity-link-completed {
	position: relative;
}
.np-course-outline-content-activity-link-completed::after {
	content: "";
	display: block;
	position: absolute;
	width: 0%;
	background-color: #4cc3ff;
	height: 0;
	border-radius: 1px;
}
.np-course-outline-content-activity-link-completed:hover::after, 
.np-course-outline-content-activity-link-completed:focus::after {
	width: 100%;
	height: 2px;
}
.np-course-outline-content-activity-link-completed:active::after {
	background-color: #ba37d6;
}
/* Locked Icon */
.np-course-outline-content-activity-icon-locked {
	color: #aeb5bd;
	font-weight: 700;
}
/* --- Course Events --- */
.np-course-events-content-item {
	margin-top: 1rem;
}
.np-course-events-content-date {
	flex-shrink: 0;
	border-radius: 50%;
	text-transform: none;
	background-color: #795ae8;

}
.np-course-events-content-month,
.np-course-events-content-day {
	line-height: 1;
}
.np-course-events-content-name,
.np-course-events-content-type,
.np-course-events-content-time {
	line-height: 1.3;
}
.np-course-events-content-name {
	color: #353a42;
	font-size: 1rem;
	font-weight: 700;
}
.np-course-events-content-type,
.np-course-events-content-time {
	font-size: 0.875rem;
}
.np-course-events-content-type {
	margin-bottom: 0;
}
.np-course-events-content-time {
	color: #6b3fd1;
}

/* --- Outline Bar Divider --- */
.np-learning-path-outline-bar {
	position: relative;
}

/* ------ Learning Path Overview ------ */
/* --- Background Image --- */
.page--learning-path-overview div.page-background-image {
	width: 100%;
	background-size: 100%;
	mix-blend-mode: darken;
}
.page--learning-path-overview .page-background-image:after {
	background: linear-gradient(140deg, rgba(255,255,255,0) 40%, rgb(255,255,255) 40%);
}

/* --- Top Vocabulary (Online or In Person Event) --- */
.np-training-session .np-top-vocabulary {
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	margin-bottom: 0;
}
@media screen and ( min-width: 48rem ) {
	.np-training-session .np-top-vocabulary {
		margin-left: 1rem;
	}
}
.np-training-session .np-top-vocabulary .np-training-session-icon {
	margin-left: 0;
	margin-right: .5rem;
	color: #795ae8;
}

/* --- CTA for Outline --- */
.cta--outline {
	position: relative;
	text-align: center;

}
.cta--outline .np-button {
	width: 100%;
}
.cta--outline .np-top-cta {
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
}

/* --- Outline Divider --- */
.np-learning-path-outline-bar {
	position: relative;
}

/* --- Outline Cards --- */
.np-learning-path-outline-item {
	margin: 0;
	border-radius: 1rem;
}
@media screen and ( min-width: 48rem ) {
	.np-learning-path-outline-item .np-card-container {
		min-height: 135px;
	}
}
.np-learning-path-outline-item:focus {
	outline: 2px solid #e79ff7;
}
.np-learning-path-outline-item .np-card-content-title {
	flex-grow: 1;
}
.np-learning-path-outline-content {
	margin-left: 0;
}
.outline-card__icon-container {
	padding: 0.5rem;
	border-radius: 50%;
	height: 2.25rem;
	width: 2.25rem;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 1rem;
	flex-shrink: 0;
}
.np-learning-path-outline-icon {
	margin-left: unset;
	font-size: 1rem;
}
/* Locked */
.outline-card__icon-locked {
	background-color: #e9ecf0;
}
.outline-card__icon-locked .np-learning-path-outline-icon {
	color: #5a616b;
}
/* Complete */
.outline-card__icon-complete {
	background-color: #d7f7f1;
}
.outline-card__icon-complete .np-learning-path-outline-icon {
	color: #008382;
}
/* Use an arrow icon on hvoer */
a:hover .outline-card__icon-complete .np-learning-path-outline-icon::before,
a:focus .outline-card__icon-complete .np-learning-path-outline-icon::before,
a:active .outline-card__icon-complete .np-learning-path-outline-icon::before {
	content: "\f054";
}
/* Link */
.outline-card__icon-link {
	background-color: #e0f3ff;
}
.outline-card__icon-link .np-learning-path-outline-icon {
	color: #2574e1;
}
a:hover .outline-card__icon-container,
a:focus .outline-card__icon-container {
	background-color: #f9e1ff;
}
a:focus .outline-card__icon-container {
	outline: 2px solid #e79ff7;
}
a:hover .np-learning-path-outline-icon,
a:focus .np-learning-path-outline-icon {
	color: #ba37d6;
}
a:active .np-learning-path-outline-icon {
	color: #712b80;
}

/* ------ Events Overview ------ */

/* --- Date Bar --- */
.np-training-session .np-card-training-session-date {
	margin-top: 0;
}
.np-training-session .np-card-training-session-date-bar {
	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
	width: 0.5rem;
}
/* --- Session Details --- */
.training-session__details {
	margin-top: 0.5rem;
	margin-bottom: 1rem !important;
}
.training-session__details .np-training-session-icon {
	color: #795ae8;
	width: 1.5rem;
	text-align: center;
	margin-right: 0.25rem;
}
.np-training-session .np-training-session-time,
.np-training-session-location {
	margin-top: 0;
}
/* --- CTA --- */
.np-training-session-cta {
	padding-right: 0;
	display: block;
	width: 100%;
}
.np-training-session-cta-buttons form {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + .5rem);
	margin: -0.25rem;
}
.np-training-session-cta-buttons form > * {
	margin: 0.25rem !important; 
}
/* --- Additional Training Sessions --- */
.np-training-session-tile {
	background-color: #ffffff;
	border-radius: 1rem;
	box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
	color: #5a616b;
}
.np-training-session-tile:hover {
	background-color: #ffffff;
}
.np-training-session-tile:focus {
	outline: 2px solid #e79ff7;
}
/* Icon */
.np-training-session-tile-icon {
	color: #795ae8;
}
/* Details */
.training-session-tile__details {
	flex-grow: 1;
}
.np-training-session-tile-date {
	color: #24272e;
}
.np-training-session-tile-time {
	color: #5a616b;
	font-size: 0.875rem;
}
/* Arrow  */
.training-session-tile__icon-container {
	padding: 0.5rem;
	border-radius: 50%;
	height: 2.25rem;
	width: 2.25rem;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 1rem;
	flex-shrink: 0;
	background-color: #e0f3ff;
	margin-left: 1rem;
	margin-right: 0;
}
.training-session-tile__icon {
	margin-left: unset;
	font-size: 1rem;
	color: #2574e1;
}
a:hover .training-session-tile__icon-container,
a:focus .training-session-tile__icon-container {
	background-color: #f9e1ff;
}
a:focus .training-session-tile__icon-container {
	outline: 2px solid #e79ff7;
}
a:hover .training-session-tile__icon,
a:focus .training-session-tile__icon {
	color: #ba37d6;
}
a:active .training-session-tile__icon {
	color: #712b80;
}

/* ------ Empty States ------ */

.np-dashboard-resources-container,
.np-learning-paths-resources-container,
.np-training-session-zero-state {
	width: 100%;
	border-radius: 1rem;
	border: 3px solid #dce1e5;
}
.np-training-session-zero-state {
	display: flex;
	padding: 2.5rem 2rem;
	align-items: center;
}
.np-training-session-zero-state img {
	height: 68px;
	margin-right: 1rem;
}
.np-zero-state-text {
	color: #6e7580;
	font-size: 1.125rem;
	font-weight: 700;
}
.np-zero-state-text button {
	margin-top: 1rem;
}
.np-training-session-zero-state-text {
	font-size: 1;
	line-height: 1.3;
}

/* ------ Search Results ------ */

/* --- Header / Summary --- */
.search-summary__emphasis {f
	color: #6b3fd1;
	font-weight: 700;
}

/* --- Search Result --- */
.np-search-result {
	height: unset !important;
}
.np-search-result a {
	text-decoration: none;
}
.np-search-result .np-card-content {
	flex-direction: row;
}
.np-search-result-snippet {
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.5rem;
}

/* ------ Custom Pages ------ */
.custom-page__content {
	margin-top: 0.75rem;
}
@media screen and ( min-width: 48rem ) {
	.custom-page__content {
		margin-top: 1rem;
	}
}

/* ------ Account Page ------ */
.np-account-form .np-card-container {
	flex-direction: column;
}
@media screen and ( max-width: 48rem ) {
	.np-account-avatar .np-card-container {
		flex-direction: row !important;
	}
}

/* ------------ Custom Freeform Content ------------ */
/* This content is shared between the main academy and the LX experience */

/* --- Button --- */
a.tutorial-button {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border-radius: 1.5rem;
	background-color: #2574e1;
	color: #fff !important;
}
.tutorial-button:focus,
.tutorial-button:hover {
	background-color: #712b80;
}
.tutorial-button:focus {
	outline: 2px solid #e79ff7;
}
.tutorial-button:active {
	background-color: #50185b;
}


/* --- Time Estimate --- */
/* Includes a clock icon and light purple background with dark purple text */
.tutorial-time-estimate {
	position: relative;
	border-radius: 1.25rem;
	background-color: #e9e9ff;
	padding: 0.5rem 1rem 0.5rem calc(3rem + 16px);
	display: block;
	overflow: hidden;
	font-size: 1rem;
	color: #6b3fd1;
	margin: 1.5rem 0 !important;
}
.tutorial-time-estimate::before {
	position: absolute;
	display: flex;
	align-items: center;
	left: 0;
	top: 0;
	bottom: 0;
	background-color: #6b3fd1;
	color: #fff;
	padding: 0.5rem 0.9rem 0.5rem 1rem;
	content: "\f017";
	font-family: 'Font Awesome 5 Pro';
	font-size: 18px;
	line-height: 1.5rem;
}

/* ------------ Colors ------------ */
.np-color-danger {
	color: #E52242;
}
.np-color-success {
	color: #368645;
}
.np-progress-color {
	color: #4cc3ff;

}
.np-progress-background-color {
	background-color: #4cc3ff;
}