diff --git a/NP_Custom_Templates/customer_templates/Dubber/_cards_course.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_cards_course.html.liquid
new file mode 100644
index 00000000..f8f699d0
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_cards_course.html.liquid
@@ -0,0 +1,46 @@
+
+
+
+ {% if course.ribbon and course.ribbon.size > 0 %}
+
+ {{ course.ribbon }}
+
+ {% endif %}
+
+
+
+ {{ course.name }}
+
+ {% if course.instructor_names and course.instructor_names.size > 0 %}
+
+ {{ course.instructor_names }}
+
+ {% endif %}
+ {% if course.short_description and course.short_description.size > 0 %}
+
+ {{ course.short_description | split: " --- " | last }}
+
+ {% endif %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ learning_path.name }}
+
+
+ {% if learning_path.has_instructors? %}
+
+ {{ learning_path.instructor_names }}
+
+ {% endif %}
+
+
+
+
+ {% comment %} Currently hiding the description {% endcomment %}
+ {% comment %}
+ {% if learning_path.description and learning_path.description.size > 0 %}
+
+ {{ learning_path.description }}
+
+ {% endif %}
+ {% endcomment %}
+
+
+
+
+
+
+
+
+
+
+ {{ training_event.title }}
+
+
+ {% case training_event.event_type %}
+ {% when "online" %}
+ Online Event
+ {% when "in_person" %}
+ In-Person Event
+ {% endcase %}
+
+ {% if training_event.description and training_event.description.size > 0 %}
+
+
+ {{ training_event.description | strip }}
+
+
+ {% endif %}
+
+
+ {% comment %} Fallback to the first session {% endcomment %}
+ {% assign session_to_display = training_event.sessions | first %}
+ {% comment %} Check for an enrolled session and preferrably display that {% endcomment %}
+ {% assign enrolled_sessions = training_event.sessions | where: "registered?", true %}
+ {% if enrolled_sessions and enrolled_sessions.size > 0 %}
+ {% assign session_to_display = enrolled_sessions | first %}
+ {% endif %}
+
+ {% include "training_session_date", training_session: session_to_display %}
+ {% if training_event.sessions and training_event.sessions.size > 1 %}
+
+
+
+ {{ training_event.sessions.size | minus: 1 }}
+ {% if training_event.sessions.size == 2 %}
+ Other Session
+ {% else %}
+ Other Sessions
+ {% endif %}
+
+
+
+ {% endif %}
+
+
+
+
+
+ {{ activity.title }}
+
+
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_course_activity_unlocked.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_course_activity_unlocked.html.liquid
new file mode 100644
index 00000000..1145ddff
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_course_activity_unlocked.html.liquid
@@ -0,0 +1,9 @@
+
+ {{ activity.title }}
+
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_course_cta_button.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_course_cta_button.html.liquid
new file mode 100644
index 00000000..c15062d4
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_course_cta_button.html.liquid
@@ -0,0 +1,27 @@
+{% if course.learner_can_retake? %}
+
+{% else %}
+
+ {% if course.enrolled? == false %}
+ Enroll in Course
+ {% elsif course.started? == false %}
+ Start Course
+ {% elsif course.completed? %}
+ View Course
+ {% else %}
+ Continue Course
+ {% endif %}
+
+{% endif %}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_course_description.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_course_description.html.liquid
new file mode 100644
index 00000000..7f166e7b
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_course_description.html.liquid
@@ -0,0 +1,6 @@
+
+ About This Tutorial
+
+
+ {{ course.full_description }}
+
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_course_events.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_course_events.html.liquid
new file mode 100644
index 00000000..eabe3960
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_course_events.html.liquid
@@ -0,0 +1,26 @@
+
+ {% t .header %}
+
+{% for event in course.events %}
+
+
+
+ {{ event.sessions.first.abbreviated_month }}
+
+
+ {{ event.sessions.first.day }}
+
+
+
+
+ {{ event.title }}
+
+
+ {% t shared.event_types, key: event.event_type %}
+
+
+ {{ event.sessions.first.time_period | replace: "AM", "am" | replace: "PM", "pm" | replace: "-", "–" }} {{ event.sessions.first.time_zone }}
+
+
+
+ {{ course.name }}
+
+
+ {% include "course_cta_button" %}
+
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_course_instructors.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_course_instructors.html.liquid
new file mode 100644
index 00000000..851e2719
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_course_instructors.html.liquid
@@ -0,0 +1,26 @@
+
+ Instructors
+
+
+ {% for instructor in course.instructors %}
+
+
+
+
+ {{ instructor.name }}
+
+
+ {% if instructor.title and instructor.title.size > 0 %}
+
+ {{ instructor.title }}
+
+ {% endif %}
+
+
+
+ {% endfor %}
+
+
+ Outline
+
+
+
+ {% for section in course.sections %}
+
+
+ {{ section.name }}
+
+
+ {% for activity in section.activities %}
+
+
+
+
+
+ {% comment %} If the activity is locked show a locked icon and then a text title {% endcomment %}
+ {% if activity.locked? %}
+
+
+ {% endfor %}
+
+
+ {% endfor %}
+
+
+
+
+ {% include "course_cta_button" %}
+
+
+
+ Progress
+
+
+
+
+ {{ course.progress }}% Complete
+
+
+
+ {% include "course_cta_button" %}
+
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_course_version_outdated_popup.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_course_version_outdated_popup.html.liquid
new file mode 100644
index 00000000..6da1a9c2
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_course_version_outdated_popup.html.liquid
@@ -0,0 +1,49 @@
+
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_courses_index.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_courses_index.html.liquid
new file mode 100644
index 00000000..65779d05
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_courses_index.html.liquid
@@ -0,0 +1,15 @@
+{% if courses.enrolled and courses.enrolled.any? %}
+
+ {% for course in courses.enrolled %}
+ {% include "cards_course", course: course, card_classes: card_classes %}
+ {% endfor %}
+
+{% else %}
+ {% capture message %}
+ {% t shared.zero_state.courses.index,
+ key: current_school.course_vocabulary
+ %}
+ {% endcapture %}
+ {% assign message = message | replace: "Courses", "tutorials" %}
+ {% include "courses_zero_state", message: message, filters_applied: false %}
+{% endif %}
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_courses_sec1_index.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_courses_sec1_index.html.liquid
new file mode 100644
index 00000000..ad9e3e0a
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_courses_sec1_index.html.liquid
@@ -0,0 +1,20 @@
+{% if courses.enrolled and courses.enrolled.any? %}
+
+ {% for course in courses.enrolled %}
+ {% for category in course.categories %}
+ {% if category.name == 'Section 1' %}
+ {% include "cards_course", course: course, card_classes: card_classes %}
+ {% endif %}
+ {% endfor %}
+
+ {% endfor %}
+
+{% else %}
+ {% capture message %}
+ {% t shared.zero_state.courses.index,
+ key: current_school.course_vocabulary
+ %}
+ {% endcapture %}
+ {% assign message = message | replace: "Courses", "tutorials" %}
+ {% include "courses_zero_state", message: message, filters_applied: false %}
+{% endif %}
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_courses_sec2_index.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_courses_sec2_index.html.liquid
new file mode 100644
index 00000000..8159c820
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_courses_sec2_index.html.liquid
@@ -0,0 +1,20 @@
+{% if courses.enrolled and courses.enrolled.any? %}
+
+ {% for course in courses.enrolled %}
+ {% for category in course.categories %}
+ {% if category.name == 'Section 2' %}
+ {% include "cards_course", course: course, card_classes: card_classes %}
+ {% endif %}
+ {% endfor %}
+
+ {% endfor %}
+
+{% else %}
+ {% capture message %}
+ {% t shared.zero_state.courses.index,
+ key: current_school.course_vocabulary
+ %}
+ {% endcapture %}
+ {% assign message = message | replace: "Courses", "tutorials" %}
+ {% include "courses_zero_state", message: message, filters_applied: false %}
+{% endif %}
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_courses_sec3_index.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_courses_sec3_index.html.liquid
new file mode 100644
index 00000000..0029d8ca
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_courses_sec3_index.html.liquid
@@ -0,0 +1,20 @@
+{% if courses.enrolled and courses.enrolled.any? %}
+
+ {% for course in courses.enrolled %}
+ {% for category in course.categories %}
+ {% if category.name == 'Section 3' %}
+ {% include "cards_course", course: course, card_classes: card_classes %}
+ {% endif %}
+ {% endfor %}
+
+ {% endfor %}
+
+{% else %}
+ {% capture message %}
+ {% t shared.zero_state.courses.index,
+ key: current_school.course_vocabulary
+ %}
+ {% endcapture %}
+ {% assign message = message | replace: "Courses", "tutorials" %}
+ {% include "courses_zero_state", message: message, filters_applied: false %}
+{% endif %}
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_courses_zero_state.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_courses_zero_state.html.liquid
new file mode 100644
index 00000000..327b6de6
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_courses_zero_state.html.liquid
@@ -0,0 +1,9 @@
+
+
+
{{ message }}
+ {% if filters_applied %}
+
Clear All Filters
+ {% endif %}
+
+
+
+
+
+
+{% include "messages" %}
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_header_desktop_menu_item.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_header_desktop_menu_item.html.liquid
new file mode 100644
index 00000000..5d39f3fb
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_header_desktop_menu_item.html.liquid
@@ -0,0 +1,24 @@
+
+
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_header_mobile_menu_item.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_header_mobile_menu_item.html.liquid
new file mode 100644
index 00000000..f5262cfa
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_header_mobile_menu_item.html.liquid
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_learning_path_course.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_course.html.liquid
new file mode 100644
index 00000000..6c7ff4dc
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_course.html.liquid
@@ -0,0 +1,63 @@
+{% comment %} Determine if the item should be a link or not {% endcomment %}
+{% if learning_path.enrolled? and course.unlocked? %}
+ {% assign element_type = "a" %}
+{% else %}
+ {% assign element_type = "div" %}
+{% endif %}
+
+
+ <{{ element_type }}
+ class="np-learning-path-outline-item np-card card--horizontal"
+ {% if element_type == "a" %}
+ href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
+ {% endif %}
+ >
+
+
+ {% if course.optional? %}
+
+ Optional
+
+ {% endif %}
+
+
+
+
+ {{ course.name }}
+
+
+ {% if course.instructors and course.instructors.size > 0 %}
+
+ {{ course.instructors }}
+
+ {% endif %}
+
+
+
+ {% comment %} Use a different icon based on the state of the learning path and course {% endcomment %}
+ {% if course.completed? %}
+
+
+ {% elsif element_type == "div" %}
+
+
+ {% else %}
+
+
+ {% endif %}
+
+
+
+
+
+ {% if learning_path.enrolled? == false %}
+ Enroll in Learning Path
+ {% elsif learning_path.started? == false %}
+ Start Learning Path
+ {% elsif learning_path.completed? %}
+ View Learning Path
+ {% else %}
+ Continue Learning Path
+ {% endif %}
+
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_learning_path_description.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_description.html.liquid
new file mode 100644
index 00000000..fad37af1
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_description.html.liquid
@@ -0,0 +1,6 @@
+
+ About This Guide
+
+
+ {{ learning_path.description }}
+
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_learning_path_instructors.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_instructors.html.liquid
new file mode 100644
index 00000000..3a6303d0
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_instructors.html.liquid
@@ -0,0 +1,27 @@
+
+ Instructors
+
+
+ {% for instructor in learning_path.instructors %}
+
+
+
+
+ {{ instructor.name }}
+
+
+ {% assign instructor_title_size = instructor.title | size %}
+ {% if instructor.title and instructor.title.size > 0 %}
+
+ {{ instructor.title }}
+
+ {% endif %}
+
+
+
+ {% endfor %}
+
+ {% for item in learning_path.items %}
+ {% if item.course? %}
+ {% include "learning_path_course", course: item %}
+ {% elsif item.training_event? %}
+ {% include "learning_path_training_session", training_session: item %}
+ {% endif %}
+ {% endfor %}
+
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_learning_path_progress_and_cta.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_progress_and_cta.html.liquid
new file mode 100644
index 00000000..d48c5204
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_progress_and_cta.html.liquid
@@ -0,0 +1,23 @@
+
+
+ {% include "learning_path_cta_button" %}
+
+
+
+ Progress
+
+
+
+
+ {{ learning_path.progress }}% Complete
+
+
+
+ {% include "learning_path_cta_button" %}
+
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_learning_path_training_session.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_training_session.html.liquid
new file mode 100644
index 00000000..d0270c50
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_learning_path_training_session.html.liquid
@@ -0,0 +1,57 @@
+{% if learning_path.enrolled? and training_session.unlocked? %}
+
+
+{% else %}
+
+
+
+
+
+ {{ training_session.month }}
+
+
+ {{ training_session.day }}
+
+
+
+
{{ training_session.name }}
+
{{ training_session.caption }}
+
+ {% if training_session.optional? %}
+
+ {% t shared.optional %}
+
+ {% endif %}
+
+
+
+ {% for learning_path in items %}
+ {% include "cards_learning_path" with learning_path %}
+ {% endfor %}
+
+{% else %}
+
+
+ {% capture empty_state_text %}
+ {% t .empty %}
+ {% endcapture %}
+ {{ empty_state_text | replace: "Learning Paths", "guides" }}
+
+
+
+
+ {% include "sub_navigation_item", label: "All Courses", icon: "fa fa-book-open", url: '/app/courses' %}
+ {% include "sub_navigation_item", label: "Section 1 Courses", icon: "fa fa-tasks", url: "/app/sec1-courses" %}
+ {% include "sub_navigation_item", label: "Section 2 Courses", icon: "fa fa-hospital-user", url: "/app/sec2-courses" %}
+ {% include "sub_navigation_item", label: "Section 3 Courses", icon: "fa fa-desktop", url: "/app/sec3-courses" %}
+
+
+
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_sub_navigation_item.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_sub_navigation_item.html.liquid
new file mode 100644
index 00000000..942f2624
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_sub_navigation_item.html.liquid
@@ -0,0 +1,15 @@
+
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_training_events_dashboard.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_training_events_dashboard.html.liquid
new file mode 100644
index 00000000..7ce1aead
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_training_events_dashboard.html.liquid
@@ -0,0 +1,5 @@
+
+ {% for training_event in training_events.enrolled %}
+ {% include "cards_training_event", training_event: training_event, card_classes: card_classes %}
+ {% endfor %}
+
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_training_events_index.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_training_events_index.html.liquid
new file mode 100644
index 00000000..91d9502d
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_training_events_index.html.liquid
@@ -0,0 +1,11 @@
+
+ {% if training_events.available and training_events.available.any? %}
+
+ {% for training_event in training_events.available %}
+ {% include "cards_training_event", training_event: training_event, card_classes: "col-x-sm-6 col-sm-6 col-md-4" %}
+ {% endfor %}
+
+ {% else %}
+ {% include "training_events_zero_state" %}
+ {% endif %}
+
+
+ {% t .add_to_calendar %}
+
+
+
+
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_training_session_cta.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_training_session_cta.html.liquid
new file mode 100644
index 00000000..7c3529da
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_training_session_cta.html.liquid
@@ -0,0 +1,31 @@
+
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_training_session_date.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_training_session_date.html.liquid
new file mode 100644
index 00000000..c19c6053
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_training_session_date.html.liquid
@@ -0,0 +1,12 @@
+
+
+ {{ training_session.day }}
+
+
+
+ {{ training_session.month }}
+
+
+ {{ training_session.year }}
+
+
+
+
+
+
+
+
+
+
+
+ {% if training_event.description and training_event.description.size > 0 %}
+ {% include "training_session_description" %}
+ {% endif %}
+
+
+
+
+
+
+
+
+
+
+
+
+ {% include "training_session_details" %}
+ {% include "training_session_cta" %}
+
+
+
+
+
+
+ {% t shared.more_sessions %}
+
+ {% if training_event.sessions and training_event.sessions.size > 1 %}
+ {% include "training_session_more_sessions" %}
+ {% else %}
+
+
+
+ {% t .empty %}
+
+
+ {% endif %}
+
+
+
+
+
+
+{% include "footer" %}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/_training_session_details.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/_training_session_details.html.liquid
new file mode 100644
index 00000000..5d64b632
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/_training_session_details.html.liquid
@@ -0,0 +1,60 @@
+
+ {% include "training_session_date", training_session: training_session %}
+
+ {% if training_session.approved? %}
+
+
+ You're registered!
+
+
+ {% elsif training_session.pending? %}
+
+
+ Pending – waiting approval
+
+
+ {% elsif training_session.denied? %}
+
+
+ Denied – contact your academy admin
+
+
+ {% elsif training_session.too_late? %}
+
+
+ Too late – meeting started
+
+
+ {% elsif training_session.no_seats? %}
+
+
+ No seats available
+
+
+ {% endif %}
+
+
+
+
+ {% if training_session.instructor and training_session.instructor.size > 0 %}
+
+
+ {% endif %}
+
+
+ {% comment %} Get the full size background image by removing the modifier from the URL {% endcomment %}
+ {% assign course_image_full_size = course.image_url | replace: '/resize=width:820,height:500,fit:crop/', '/' %}
+
+
+
+
+
+
+
+
+ {% if course.full_description and course.full_description.size > 0 %}
+ {% include "course_description" %}
+ {% endif %}
+
+
+ {% if course.enrolled? and course.started? %}
+ {% include "course_progress_and_cta" %}
+ {% else %}
+ {% include "course_cta_button" %}
+ {% endif %}
+
+
+ {% if course.instructors and course.instructors.any? %}
+
+ {% include "course_instructors" %}
+
+ {% endif %}
+
+ {% include "course_outline" %}
+
+ {% if course.events and course.events.any? %}
+
+ {% include "course_events" %}
+
+ {% endif %}
+
+ {% include "course_cta_button" %}
+
+
+
+{% include "footer" %}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/courses.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/courses.html.liquid
new file mode 100644
index 00000000..b61376a6
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/courses.html.liquid
@@ -0,0 +1,17 @@
+{% include "header", current_page_orgin: "courses" %}
+{% include "sub_navigation", current_page: "/app/courses" %}
+
+
+ All Courses
+
+
+ {% capture subtitle_text %}
+ {%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
+ These are all courses you are enrolled in
+ {% endcapture %}
+ {{ subtitle_text | replace: "Courses", "tutorials" }}
+
+
+{% include "footer" %}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/dashboard.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/dashboard.html.liquid
new file mode 100644
index 00000000..bbfed6d9
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/dashboard.html.liquid
@@ -0,0 +1,139 @@
+{% comment %} Initialize Variables {% endcomment %}
+{% assign show_learning_paths_section = false %}
+{% assign show_events_section = false %}
+{% assign learning_path_section_classes = "" %}
+{% assign event_section_classes = "" %}
+{% assign learning_path_card_classes = "col-md-6" %}
+{% assign event_card_classes = "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
+
+{% comment %} Determine if learning paths are enabled and the user is enrolled in at least one learning path {% endcomment %}
+{% if features.learning_paths? and learning_paths.enrolled and learning_paths.enrolled.any? %}
+ {% assign show_learning_paths_section = true %}
+{% endif %}
+
+{% comment %} Determine if events are enabled and the user is registsered for at least one event {% endcomment %}
+{% if features.training_events? and training_events.enrolled and training_events.enrolled.any? %}
+ {% assign show_events_section = true %}
+{% endif %}
+
+{% comment %} Determine whether special classes need to be added to non course sections and the cards within {% endcomment %}
+{% if show_learning_paths_section %}
+ {% assign learning_path_section_classes = "col-md-8 col-lg-6" %}
+ {% assign learning_path_card_classes = "" %}
+{% endif %}
+
+{%if show_events_section%}
+ {% assign event_section_classes = "col-md-4 col-lg-6" %}
+ {% assign event_card_classes = "col-x-sm-6 col-sm-6 col-md-12 col-lg-6" %}
+{%endif%}
+
+{% include "header", current_page_orgin: "dashboard" %}
+
+
+
+
+
+
+
+
+ {% comment %} Show the first featured course as a banner {% endcomment %}
+ {% if courses.featured and courses.featured.any? %}
+
+ {% include "banner_course", course: courses.featured.first, button_text: "Get Started" %}
+
+ {% endif %}
+
+ {% comment %} Show this section if either the event section or learning path section has content {% endcomment %}
+ {% if show_learning_paths_section or show_events_section %}
+
+
+
+ {% if show_learning_paths_section %}
+
+
+ Learning Paths
+
+ {% include "learning_paths_index", items: learning_paths.enrolled, card_classes: learning_path_card_classes %}
+
+ {% endif %}
+
+ {% if show_events_section %}
+
+
+ Upcoming Events
+
+ {% include "training_events_dashboard", card_classes: event_card_classes %}
+
+ {% endif %}
+
+
+
+ {% endif %}
+
+
+
+ My Courses
+
+ {% if courses.enrolled and courses.enrolled.any? %}
+
+ {% comment %} Sort enrolled courses by progress {% endcomment %}
+ {% assign enrolled_courses_sorted = courses.enrolled | sort_natural: "short_description" | reverse | sort_natural: "progress" | reverse %}
+
+ {% comment %} Divide courses by progress/completion state {% endcomment %}
+ {% assign courses_completed = enrolled_courses_sorted | where: "completed?", true %}
+ {% assign courses_in_progress = enrolled_courses_sorted | where: "completed?", false | where: "started?", true %}
+ {% assign courses_enrolled = enrolled_courses_sorted | where: "started?", false %}
+
+ {% comment %} In Progress & Enrolled courses {% endcomment %}
+ {% if courses_in_progress.size > 0 or courses_enrolled.size > 0 %}
+
+ Courses In Progress
+
+
+
+ {% comment %} In Progress courses {% endcomment %}
+ {% if courses_in_progress.size > 0 %}
+ {% for course in courses_in_progress %}
+ {% include "cards_course", course: course, card_classes: "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
+ {% endfor %}
+ {% endif %}
+
+ {% comment %} Enrolled courses {% endcomment %}
+ {% if courses_enrolled.size > 0 %}
+ {% for course in courses_enrolled %}
+ {% include "cards_course", course: course, card_classes: "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
+ {% endfor %}
+ {% endif %}
+
+
+ {% endif %}
+
+ {% comment %} Completed courses {% endcomment %}
+ {% if courses_completed.size > 0 %}
+
+ Completed Courses
+
+
+ {% for course in courses_completed %}
+ {% include "cards_course", course: course, card_classes: "col-x-sm-6 col-sm-6 col-md-4 col-lg-3" %}
+ {% endfor %}
+
+ {% endif %}
+
+ {% else %}
+ {% capture message %}
+ {% t shared.zero_state.courses.index,
+ key: current_school.course_vocabulary
+ %}
+ {% endcapture %}
+ {% assign message = message | replace: "Courses", "tutorials" %}
+ {% include "courses_zero_state", message: message, filters_applied: false %}
+ {% endif %}
+
+
+
+{% include "footer" %}
+}}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/homepage.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/homepage.html.liquid
new file mode 100644
index 00000000..1e1ec0bc
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/homepage.html.liquid
@@ -0,0 +1,114 @@
+{% include "header", current_page_orgin: "false" %}
+
+
+
+
+
+ {% if courses.featured and courses.featured.any? %}
+
+
+ {% comment %} Show featured section text if either headline or subheadline are defined {% endcomment %}
+ {% if homepage.featured_courses_headline and homepage.featured_courses_headline.size > 0 %}
+ {% assign has_featured_headline = true %}
+ {% else %}
+ {% assign has_featured_headline = false %}
+ {% endif %}
+ {% if homepage.featured_courses_subheadline and homepage.featured_courses_subheadline.size > 0 %}
+ {% assign has_featured_subheadline = true %}
+ {% else %}
+ {% assign has_featured_subheadline = false %}
+ {% endif %}
+ {% if has_featured_headline or has_featured_subheadline %}
+
+ {% if homepage.featured_courses_headline and homepage.featured_courses_headline.size > 0 %}
+
+ {{ homepage.featured_courses_headline }}
+
+ {% endif %}
+ {% if homepage.featured_courses_subheadline and homepage.featured_courses_subheadline.size > 0 %}
+
+ {{ homepage.featured_courses_subheadline }}
+
+ {% endif %}
+
+ {% endif %}
+
+
+ {% comment %} Add different classes dependant on the number of featured courses. {% endcomment %}
+ {% assign card_classes = "card--horizontal np-stretch-content" %}
+ {% case courses.featured.size %}
+ {% when 3 %}
+ {% assign card_classes = card_classes | append: " col-lg-4" %}
+ {% when 2 %}
+ {% assign card_classes = card_classes | append: " col-md-6" %}
+ {% endcase %}
+
+ {% for course in courses.featured %}
+ {% include "cards_course", course: course, card_classes: card_classes %}
+ {% endfor %}
+
+
+
+
+
+
+{% include "footer" %}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/learning_path.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/learning_path.html.liquid
new file mode 100644
index 00000000..a6f31f1d
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/learning_path.html.liquid
@@ -0,0 +1,58 @@
+{% include "header", current_page_orgin: "learning_paths" %}
+
+
+ {% comment %} Get the full size background image by removing the modifier from the URL {% endcomment %}
+ {% assign learning_path_image_full_size = learning_path.image_url | replace: '/resize=width:820,height:500,fit:crop/', '/' %}
+
+
+
+
+
+
+
+
+
+
+
+ {% if learning_path.description and learning_path.description.size > 0 %}
+ {% include "learning_path_description" %}
+ {% endif %}
+
+
+ {% include "learning_path_cta_button" %}
+
+
+ {% if learning_path.instructors and learning_path.instructors.any? %}
+
+ {% include "learning_path_instructors" %}
+
+
+ {% endif %}
+
+
+
+
+
+
+
+
+
+ {% if learning_path.enrolled? and learning_path.started? %}
+ {% include "learning_path_progress_and_cta" %}
+ {% else %}
+ {% include "learning_path_cta_button" %}
+ {% endif %}
+
+ {% include "learning_path_outline" %}
+
+
+
+{% include "footer" %}
diff --git a/NP_Custom_Templates/customer_templates/Dubber/learning_paths.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/learning_paths.html.liquid
new file mode 100644
index 00000000..81d6e550
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/learning_paths.html.liquid
@@ -0,0 +1,23 @@
+{% include "header", current_page_orgin: "learning_paths" %}
+
+
+ {% include "learning_paths_index", items: learning_paths.available, card_classes: "col-md-6" %}
+
+{% include "footer" %}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/sec1-courses.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/sec1-courses.html.liquid
new file mode 100644
index 00000000..c288ee29
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/sec1-courses.html.liquid
@@ -0,0 +1,17 @@
+{% include "header", current_page_orgin: "courses" %}
+{% include "sub_navigation", current_page: "/app/sec1-courses" %}
+
+
+ Section 1 Courses
+
+
+ {% capture subtitle_text %}
+ {%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
+ These are all courses filed under Section 1
+ {% endcapture %}
+ {{ subtitle_text | replace: "Courses", "tutorials" }}
+
+
+{% include "footer" %}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/sec2-courses.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/sec2-courses.html.liquid
new file mode 100644
index 00000000..41177640
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/sec2-courses.html.liquid
@@ -0,0 +1,17 @@
+{% include "header", current_page_orgin: "courses" %}
+{% include "sub_navigation", current_page: "/app/sec2-courses" %}
+
+
+ Section 2 Courses
+
+
+ {% capture subtitle_text %}
+ {%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
+ These are all courses filed under Section 2
+ {% endcapture %}
+ {{ subtitle_text | replace: "Courses", "tutorials" }}
+
+
+{% include "footer" %}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/sec3-courses.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/sec3-courses.html.liquid
new file mode 100644
index 00000000..1175d616
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/sec3-courses.html.liquid
@@ -0,0 +1,17 @@
+{% include "header", current_page_orgin: "courses" %}
+{% include "sub_navigation", current_page: "/app/sec3-courses" %}
+
+
+ Section 3 Courses
+
+
+ {% capture subtitle_text %}
+ {%comment%}{% t .headline, key: current_school.course_vocabulary %}{%endcomment%}
+ These are all courses filed under Section 1
+ {% endcapture %}
+ {{ subtitle_text | replace: "Courses", "tutorials" }}
+
+
+{% include "footer" %}
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/Dubber/styles.css.liquid b/NP_Custom_Templates/customer_templates/Dubber/styles.css.liquid
new file mode 100644
index 00000000..21e93fa4
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/styles.css.liquid
@@ -0,0 +1,2382 @@
+ /*
+ 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: #2574e1;
+ -webkit-background-clip: text;
+ -moz-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ -moz-text-fill-color: transparent;
+ background-image: linear-gradient(45deg, #2574e1, #795ae8, #ba37d6, #795ae8, #2574e1, #795ae8);
+ background-size: 500%;
+ animation-name: homepage-gradient;
+}
+.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;
+ }
+}
+/* --- Homepage Waves --- */
+.homepage-waves__wave-1-container,
+.homepage-waves__wave-2-container,
+.homepage-waves__wave-3-container {
+ position: relative;
+ width: 100%;
+ display: block;
+}
+.homepage-waves__wave-1-container {
+ margin-top: calc((-100vw / 2000 * 150) + 2px);
+}
+.homepage-waves__wave-3-container {
+ background-color: #94dbff;
+ margin-top: calc(-100vw / 2000 * 150 * 0.15);
+}
+.homepage-waves__wave-1 {
+ fill: #bfe4ff;
+ animation-name: slide-2;
+ animation-duration: 180s;
+}
+.homepage-waves__wave-2,
+.homepage-waves__wave-3 {
+ animation-name: slide-3;
+}
+.homepage-waves__wave-2 {
+ fill: #94dbff;
+ animation-duration: 120s;
+ animation-direction: reverse;
+}
+.homepage-waves__wave-3 {
+ fill: #4cc3ff;
+ animation-duration: 60s;
+}
+
+/* --- 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;
+}
+.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) - 7rem);
+ 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;
+}
diff --git a/NP_Custom_Templates/customer_templates/Dubber/training_events.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/training_events.html.liquid
new file mode 100644
index 00000000..9e4a107e
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/training_events.html.liquid
@@ -0,0 +1,13 @@
+{% include "header", current_page_orgin: "training_events" %}
+
+
+ {% include "training_events_index" %}
+
+{% include "footer" %}
diff --git a/NP_Custom_Templates/customer_templates/Dubber/training_session.html.liquid b/NP_Custom_Templates/customer_templates/Dubber/training_session.html.liquid
new file mode 100644
index 00000000..2d9ef1d6
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/Dubber/training_session.html.liquid
@@ -0,0 +1 @@
+{% include "training_session_desktop_view" %}
\ No newline at end of file