/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */

/*** Legacy Sidebar ***/
/* For Main CSS file */
@import url(https://designtools.ciditools.com/css/themes.css);
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/* Institution color customizations */
@import url(https://designtools.ciditools.com/css/inst_theme_overrides.css);

/*** New Sidebar ***/
/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
    --dt-color-primary: #1548E0;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #2C2C36;
    --dt-color-secondary: #F2B81E;
    --dt-color-secondary-contrast: #000000;
    --dt-color-secondary-dark-text: #000000;
    --dt-color-accent: #7B1CE9;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #7B1CE9;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #464646;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
}

/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/

/*********************************************************************/
/***** START IMPORT FONTS                             ****************/
/*********************************************************************/
/* ===================================================================
   BRAND FONT: Inter (Google) - 2026 rebrand. Mont has been fully removed.
   "Inter" is the variable-weight family (use this name for new content).
   Three single-weight aliases - "Inter Regular" (400), "Inter Semi Bold"
   (600) and "Inter Bold" (700) - map to the weights this stylesheet uses,
   so the existing rules simply reference those names.
   Served via the Fontsource CDN; can be self-hosted in Canvas Files for
   zero external dependencies.
   =================================================================== */
@font-face { font-family: "Inter"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* Single-weight aliases referenced by the rules in this stylesheet */
@font-face { font-family: "Inter Regular";   src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Semi Bold"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Bold";      src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Legacy "Mont …" name aliases → Inter files. Loree and older page content has
   inline font-family:"Mont Regular"/"Mont Bold" etc. baked in. Mont was deleted
   in the 2026 rebrand, so that content fell back to an ugly serif. These map every
   Mont weight NAME to the matching Inter weight — no Mont typeface returns; legacy
   content simply renders in Inter. */
@font-face { font-family: "Mont Hairline";    src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-100-normal.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Thin";        src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-200-normal.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Extra Light";  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-200-normal.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Light";       src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Regular";     src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Book";        src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Semi Bold";   src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Bold";        src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Heavy";       src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Black";       src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-900-normal.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont Regular Italic";   src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Mont Semi Bold Italic"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Mont Bold Italic";      src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Mont Light Italic";     src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Mont Book Italic";      src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/*********************************************************************/
/***** END IMPORT FONTS                               ****************/
/*********************************************************************/

/*********************************************************************/
/***** START FONT OVERRIDES                           ****************/
/*********************************************************************/
body {
	/* Platform-wide brand font: Inter (2026 rebrand; previously "Mont").
	   Applied to ALL Canvas chrome AND course content for one consistent,
	   on-brand look. Inter is a UI-optimised font, so it reads cleanly in the
	   global nav, menus and buttons. */
	font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: .85em;
	color: #2c2c36;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #fefefe;
	background-color: #fefefe;
}

/* Course content headings use the bold Inter alias */
.user_content h1, .user_content h2, .user_content h3, .user_content h4,
#kl_wrapper_3 h1, #kl_wrapper_3 h2, #kl_wrapper_3 h3, #kl_wrapper_3 h4,
#dp-wrapper h1, #dp-wrapper h2, #dp-wrapper h3, #dp-wrapper h4 {
	/* !important: DesignPlus content.css styles content-block headings and
	   would otherwise override these to its default (Lato). */
	font-family: "Inter Bold", Helvetica, sans-serif !important;
}
/*********************************************************************/
/***** END FONT OVERRIDES                             ****************/
/*********************************************************************/

/*********************************************************************/
/***** START UPSKILLED CUSTOMISATIONS                 ****************/
/*********************************************************************/

.btn, .Button, .ui-button {
	font-size: .85em;
	font-weight: 700;
	font-style: bold;
}

.header-bar a.btn {
	color: #2c2c36 !important;
}

label, input, button, select, textarea {
	font-weight: 700;
	font-style: bold;
}

.btn i[class*=icon-], .btn i[class^=icon-] {
	font-size: 1.4em;
}

a:hover {
	text-decoration: none !important;
	color: var(--ic-link-color);
}

.ui-tabs .ui-tabs-nav, .ic-Table td, .ic-Table th {
	border-bottom-color: var(--dt-color-primary);
}

.ui-tabs .ui-tabs-panel, .ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-hover, .ui-tabs .ui-tabs-nav li.ui-tabs-active:hover {
	border-color: var(--dt-color-primary);
}

/* Login Page */
.ic-Login__container {
	margin-top: 10%;
	margin-left: 40%;
}

body.ic-Login-Body {
	background-image: var(--ic-brand-Login-body-bgd-image);
	background-position: center;
}

/*  Upskilled Gradient */

#gradient-horizontal {
	--color-stop-1: var(--ic-brand-button--primary-bgd);
	--color-stop-2: #1548E0;
}

.icon-hgradient {
	fill: url(#gradient-horizontal) var(--ic-brand-button--primary-bgd);
	/* We could use it as a stroke fill too:
		stroke: url(#gradient-horizontal) #1548e0; */
}

/*  Site Menu Styling */

/* Global nav links */
#header #menu .menu-item__text {
	/* font-family removed — let the global nav use Canvas's standard font */
	font-weight: 400;
}

nav a {
	color: var(--ic-brand-button--primary-bgd);
}

nav a:hover {
	color: var(--dt-color-primary);
	transition: all .2s ease-in;
}

/* Colour for selected course nav link */
.list-view a.active {
	color: #2c2c36;
	border-left: 2px solid #2c2c36;
}

/* Modules / Contents */
#context_modules.ig-list .ig-title {
	font-weight: normal;
}

/*  Breadcrumb Styling */

#breadcrumbs > ul > li {
	font-size: 1.2em;
}

/*  Filter Button Styling */

.context_module_item .ig-type-icon i, #select_context_content_dialog i, #module_filters i {
	background-color: var(--ic-brand-button--primary-bgd);
	padding: 5px;
	border-radius: 100px;
	color: #fff !important;
}

.context_module_item .ig-type-icon i.icon-document, #select_context_content_dialog i.icon-document, #module_filters i.icon-document {
	background-color: #F46036;
}

.context_module_item .ig-type-icon i.icon-paperclip, #select_context_content_dialog i.icon-paperclip, #module_filters i.icon-paperclip {
	background-color: #2E294E;
}

.context_module_item .ig-type-icon i.icon-discussion, #select_context_content_dialog i.icon-discussion, #module_filters i.icon-discussion {
	background-color: #1B998B;
}

.context_module_item .ig-type-icon i.icon-assignment, #select_context_content_dialog i.icon-assignment, #module_filters i.icon-assignment {
	background-color: #228ACC;
}

.context_module_item .ig-type-icon i.icon-quiz, #select_context_content_dialog i.icon-quiz, #module_filters i.icon-quiz {
	background-color: #E07BC4;
}

.context_module_item .ig-type-icon i.icon-link, #select_context_content_dialog i.icon-link, #module_filters i.icon-link {
	background-color: #6E6FBD;
}

#module_filters i.disabled {
	background-color: darkgrey !important;
}

/*  Content Styling */
.pages.show .course-title {
	color: var(--ic-link-color);
}

#course_status h3, #right-side h2, #right-side .h2, .pages.show .course-title {
	text-transform: uppercase;
	color: var(--ic-link-color);
}

.header-bar {
	border-bottom: 0px none;
}

#content h1 {
	font-family: "Inter Bold";
	color: #1548e0 !important;
	text-transform: uppercase;
	font-size: 21px;
}



#content .text-transform-none {
	text-transform: none;
}

#content .text-transform-upper {
	text-transform: uppercase;
}

#content .text-transform-lower {
	text-transform: lowercase;
}

#content .text-transform-caps {
	text-transform: capitalize;
}

#content a:not([class*='btn']):hover {
	color: var(--dt-color-link-hover);
	transition: all 0.2s 0s linear;
}

/* Course page nav links */
div.show-content.user_content a.nav {
	vertical-align: top;
}

div.show-content.user_content a.nav img {
	margin-top: 2.6%;
	width: 5%;
	opacity: 1;
	box-shadow: none;
	transition: all 0.2s ease-in-out;
}

div.show-content.user_content a.nav img:hover {
	opacity: 0.7;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	transition: all 0.2s ease-in-out;
}

/* Course page banner */
div.show-content.user_content img.banner {
	width: 94%;
}

/* Course page tiles */
div.show-content.user_content img.tile {
	padding: 0.5em;
	opacity: 1;
	box-shadow: none;
	transition: all 0.2s ease-in-out;
}

div.show-content.user_content img.tile:hover {
	opacity: 0.7;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	transition: all 0.2s ease-in-out;
}

/* LTI new tab styling */
.ic-framed-lti-tool .load_tab {
	margin: 2em;
}

.ic-framed-lti-tool .load_tab button {
	background: var(--ic-brand-button--primary-bgd);
	color: var(--ic-brand-button--primary-text);
	border: none;
}

/* Nav Styling */
.list-view > ul > li > a, .list-view > nav > ul > li > a {
	font-weight: 700;
}

/* Calendar Styling */
.calendar_navigator .navigation_title_text {
	color: var(--ic-link-color);
	text-decoration: none;
	text-transform: uppercase;
}

#minical .fc-toolbar h2, #minical .fc-toolbar .h2 {
	color: var(--ic-link-color);
}

#right-side .element_toggler {
	color: var(--ic-link-color);
	font-family: "Inter Bold";
}

/* Inbox Styling */
.message-list .subject, .message-header h2.subject {
	color: var(--ic-link-color);
}

.message-list .message-count {
	background-color: var(--ic-brand-global-nav-menu-item__badge-bgd);
}

ul.message-attachments a {
	color: var(--ic-brand-button--primary-bgd);
}

.message-list .star-btn.active {
	color: var(--dt-color-secondary);
	text-shadow: 0 0 1px var(--dt-color-secondary);
}

/* Module Styling */
#context_modules .ig-header {
	background-image: linear-gradient(to left, rgb(22, 150, 236), rgb(21, 72, 224));
	background-size: cover;
}

#context_modules .ig-header .name {
	color: #fff;
	text-shadow: none;
}

#context_modules .ig-header .ig-header-admin, .ig-header .sortable-handle.reorder_module_link i, .context_module_item .type_icon i {
	color: #fff !important;
}

#context_modules .item-group-condensed .ig-header, #context_modules .ig-header .Button--icon-action, .Button--icon-action-rev, #context_modules .ig-header .publish-icon, #context_modules .item-group-condensed .ig-header .ig-list .icon-drag-handle {
	color: #fff !important;
}

.ig-header .ig-header-title {
	font-size: 1em;
}

.progress-bar__bar-container {
	border: 1px solid var(--dt-color-primary);
}

.progress-bar__bar {
	background: rgb(22, 150, 236);
	background-image: linear-gradient(to left, rgb(22, 150, 236), rgb(21, 72, 224));
}

i.icon-hamburger {
	color: var(--dt-color-primary);
}

/* Footer Details */
footer#footer {
	display: none;
}

#upskilled-footer {
	font-size: 12px;
	line-height: 20px;
	margin-top: 95px;
	padding-left: 24px;
	position: relative;
	display: block;
	box-sizing: inherit;
}

#upskilled-footer .ic-app-footer__links a {
	color: #aaaab4;
	font-size: 12px;
	margin: 0px;
	display: inline;
}

/*********************************************************************/
/***** END UPSKILLED CUSTOMISATIONS                   ****************/
/*********************************************************************/

/*********************************************************************/
/***** START LOREE CUSTOM CSS                         ****************/
/*********************************************************************/

@import url('https://loree-files.crystaldelta.net/loree-themes/loreeThemesV2.min.css');

dfn {
	font-style: italic;
}

strong {
	font-weight: bolder;
}

img {
	vertical-align: middle;
	border-style: none;
}

table {
	border-collapse: collapse;
}

caption {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	color: #6c757d;
	text-align: left;
	caption-side: bottom;
}

th {
	text-align: inherit;
}

button {
	border-radius: 0;
}

button:focus {
	outline: 1px dotted;
	outline: 5px auto -webkit-focus-ring-color;
}

button, input {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

button, input {
	overflow: visible;
}

button {
	text-transform: none;
}

[type=reset], [type=submit], button, html [type=button] {
	-webkit-appearance: button;
	appearance: button;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

input[type=checkbox], input[type=radio] {
	box-sizing: border-box;
	padding: 0;
}

input[type=date], input[type=datetime-local], input[type=month], input[type=time] {
	-webkit-appearance: listbox;
	appearance: listbox;
}

legend {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	line-height: inherit;
	color: inherit;
	white-space: normal;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
	height: auto;
}

[type=search] {
	outline-offset: -2px;
	-webkit-appearance: none;
	appearance: none;
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

::-webkit-file-upload-button {
	font: inherit;
	-webkit-appearance: button;
	appearance: button;
}

[hidden] {
	display: none !important;
}

.img-fluid {
	max-width: 100% !important;
	height: auto !important;
}

.row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.col-12,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
	position: relative;
	width: 100%;
	/*min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;*/
	/* this allows the users to change the padding for section blocks*/
}

.col-12 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

@media (max-width: 575px) {
	.col-xs-1 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-xs-2 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-xs-3 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-xs-4 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-xs-5 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-xs-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-xs-7 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-xs-8 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-xs-9 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-xs-10 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-xs-11 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-xs-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 576px) {
	.col-sm-1 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-sm-2 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-sm-3 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-sm-4 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-sm-5 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-sm-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-sm-7 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-sm-8 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-sm-9 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-sm-10 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-sm-11 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-sm-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 768px) {
	.col-md-1 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-md-2 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-md-3 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-md-4 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-md-5 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-md-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-md-7 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-md-8 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-md-9 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-md-10 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-md-11 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-md-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 992px) {
	.col-lg-1 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-lg-2 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-lg-3 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-lg-4 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-lg-5 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-lg-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-lg-7 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-lg-8 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-lg-9 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-lg-10 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-lg-11 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-lg-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 1200px) {
	.col-xl-1 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-xl-2 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-xl-3 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-xl-4 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-xl-5 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-xl-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-xl-7 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-xl-8 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-xl-9 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-xl-10 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-xl-11 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-xl-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 1400px) {
	.col-xxl-1 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-xxl-2 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-xxl-3 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-xxl-4 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-xxl-5 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-xxl-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-xxl-7 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-xxl-8 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-xxl-9 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-xxl-10 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333333%;
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-xxl-11 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.666667%;
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-xxl-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 1rem;
	background-color: #fff;
}

.table td, .table th {
	padding: 0.75rem;
	vertical-align: top;
	border-top: 1px solid #dee2e6;
	word-break: break-word;
}

.table .table {
	background-color: #fff;
}

.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

@-o-keyframes progress-bar-stripes {
	from {
		background-position: 1rem 0;
	}

	to {
		background-position: 0 0;
	}
}

@-moz-keyframes progress-bar-stripes {
	from {
		background-position: 1rem 0;
	}

	to {
		background-position: 0 0;
	}
}

@-webkit-keyframes progress-bar-stripes {
	from {
		background-position: 1rem 0;
	}

	to {
		background-position: 0 0;
	}
}

@keyframes progress-bar-stripes {
	from {
		background-position: 1rem 0;
	}

	to {
		background-position: 0 0;
	}
}

.border {
	border: 1px solid #dee2e6 !important;
}

@media print {

	*, ::after, ::before {
		text-shadow: none !important;
		box-shadow: none !important;
	}

	.img, .tr {
		page-break-inside: avoid;
	}

	.p {
		orphans: 3;
		widows: 3;
	}

	@page {
		size: a3;
	}

	.body {
		min-width: 992px !important;
		word-break: break-all !important;
	}

	.table {
		border-collapse: collapse !important;
	}

	.table td, .table th {
		background-color: #fff !important;
	}
}

.backgroundImageCustomclass {
	position: absolute;
	pointer-events: none;
	z-index: -1;
	margin: 0px;
	padding: 0px;
	object-fit: cover;
	overflow: hidden;
}

.bg-img {
	background-image: url ('https://loree.io/wp-content/uploads/2019/06/Loree_Logo_Final.png');
}

.ui-icon-extlink {
	display: none !important;
}

* {
	box-sizing: border-box;
}

input {
	box-sizing: content-box;
}

.bStyle {
	font-weight: bold !important;
}

.normalStyle {
	font-weight: normal !important;
}

/* Loree Nav bar */
.font-weight-bold {
	font-weight: 700 !important;
}

.font-weight-normal {
	font-weight: 400 !important;
}

.font-weight-thin {
	font-weight: 300 !important;
}

.bStyle {
	font-weight: bold !important;
}

.normalStyle {
	font-weight: normal !important;
}

.d-flex {
	display: flex;
}

.justify-content-start {
	justify-content: flex-start !important;
}

.align-items-start {
	align-items: flex-start !important;
}

/* Navigation bar */

.navbar {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 0.5rem 1rem;
}

.navbar-nav {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.navigation1 .loree-iframe-content-menu nav {
	width: 100%;
}

.navigation2 .loree-navigation-image-section {
	text-align: left;
}

.navigation3 .loree-navigation-image-section {
	text-align: right;
}

ul.loree-iframe-content-menu {
	flex-wrap: wrap;
}

.navigation1 ul.loree-iframe-content-menu,
.navigation3 ul.loree-iframe-content-menu {
	justify-content: flex-start;
	width: auto;
	text-align: center;
}

.navigation2 ul.loree-iframe-content-menu {
	justify-content: flex-end;
	width: auto;
	text-align: center;
}

.navigation9 ul.loree-iframe-content-menu {
	/*Not sure why we use navigation9 class since we have only 4 elements as predefined*/
	justify-content: center;
	width: auto;
	text-align: center;
}

/* Min width*/
@media screen and (min-width: 568px) {
	.navbar-expand-sm {
		-ms-flex-flow: row nowrap;
		flex-flow: row nowrap;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}

	.navbar-expand-sm .navbar-nav {
		-ms-flex-direction: row;
		flex-direction: row;
	}
}

@media screen and (min-width: 992px) {
	.navbar-expand-lg {
		-ms-flex-flow: row nowrap;
		flex-flow: row nowrap;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}

	.navbar-expand-lg .navbar-nav {
		-ms-flex-direction: row;
		flex-direction: row;
	}
}

/* Accessibility */
.loree-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

/*Loree Utility classes*/

.loree-util--all--unset {
	all: unset;
}

.loree-util--bottom--0 {
	bottom: 0;
}

.loree-util--bottom--100perc {
	bottom: 100%;
}

.loree-util--bottom--50perc {
	bottom: 50%;
}

.loree-util--bottom--100vh {
	bottom: 100vh;
}

.loree-util--bottom--100vw {
	bottom: 100vw;
}

.loree-util--bottom--1em {
	bottom: 1em;
}

.loree-util--isolation--isolate {
	isolation: isolate;
}

.loree-util--caption-side--top {
	caption-side: top;
}

.loree-util--caption-side--bottom {
	caption-side: bottom;
}

.loree-util--font-weight--100 {
	font-weight: 100;
}

.loree-util--font-weight--200 {
	font-weight: 200;
}

.loree-util--font-weight--300 {
	font-weight: 300;
}

.loree-util--font-weight--400 {
	font-weight: 400;
}

.loree-util--font-weight--500 {
	font-weight: 500;
}

.loree-util--font-weight--600 {
	font-weight: 600;
}

.loree-util--font-weight--700 {
	font-weight: 700;
}

.loree-util--font-weight--800 {
	font-weight: 800;
}

.loree-util--font-weight--900 {
	font-weight: 900;
}

.loree-util--font-weight--normal {
	font-weight: normal;
}

.loree-util--font-weight--bold {
	font-weight: bold;
}

.loree-util--font-weight--lighter {
	font-weight: lighter;
}

.loree-util--font-weight--bolder {
	font-weight: bolder;
}

.loree-util--background-size--contain {
	background-size: contain;
}

.loree-util--background-size--cover {
	background-size: cover;
}

.loree-util--object-fit--contain {
	object-fit: contain;
}

.loree-util--object-fit--cover {
	object-fit: cover;
}

.loree-util--object-fit--fill {
	object-fit: fill;
}

.loree-util--object-fit--none {
	object-fit: none;
}

.loree-util--object-fit--scale-down {
	object-fit: scale-down;
}

.loree-util--object-position--left-top {
	object-position: left top;
}

.loree-util--object-position--left {
	object-position: left;
}

.loree-util--object-position--left-bottom {
	object-position: left bottom;
}

.loree-util--object-position--top {
	object-position: top;
}

.loree-util--object-position--center {
	object-position: center;
}

.loree-util--object-position--bottom {
	object-position: bottom;
}

.loree-util--object-position--right-top {
	object-position: right top;
}

.loree-util--object-position--right {
	object-position: right;
}

.loree-util--object-position--right-bottom {
	object-position: right bottom;
}

.loree-util--align-content--baseline {
	align-content: baseline;
}

.loree-util--align-content--center {
	align-content: center;
}

.loree-util--align-content--end {
	align-content: end;
}

.loree-util--align-content--first-baseline {
	align-content: first baseline;
}

.loree-util--align-content--flex-end {
	align-content: flex-end;
}

.loree-util--align-content--flex-start {
	align-content: flex-start;
}

.loree-util--align-content--last-baseline {
	align-content: last baseline;
}

.loree-util--align-content--normal {
	align-content: normal;
}

.loree-util--align-content--space-around {
	align-content: space-around;
}

.loree-util--align-content--space-between {
	align-content: space-between;
}

.loree-util--align-content--space-evenly {
	align-content: space-evenly;
}

.loree-util--align-content--start {
	align-content: start;
}

.loree-util--align-content--stretch {
	align-content: stretch;
}

.loree-util--align-items--baseline {
	align-items: baseline;
}

.loree-util--align-items--center {
	align-items: center;
}

.loree-util--align-items--end {
	align-items: end;
}

.loree-util--align-items--first-baseline {
	align-items: first baseline;
}

.loree-util--align-items--flex-end {
	align-items: flex-end;
}

.loree-util--align-items--flex-start {
	align-items: flex-start;
}

.loree-util--align-items--last-baseline {
	align-items: last baseline;
}

.loree-util--align-items--normal {
	align-items: normal;
}

.loree-util--align-items--self-start {
	align-items: self-start;
}

.loree-util--align-items--self-end {
	align-items: self-end;
}

.loree-util--align-items--start {
	align-items: start;
}

.loree-util--align-items--stretch {
	align-items: stretch;
}

.loree-util--align-self--baseline {
	align-self: baseline;
}

.loree-util--align-self--center {
	align-self: center;
}

.loree-util--align-self--end {
	align-self: end;
}

.loree-util--align-self--first-baseline {
	align-self: first baseline;
}

.loree-util--align-self--flex-end {
	align-self: flex-end;
}

.loree-util--align-self--flex-start {
	align-self: flex-start;
}

.loree-util--align-self--last-baseline {
	align-self: last baseline;
}

.loree-util--align-self--normal {
	align-self: normal;
}

.loree-util--align-self--self-start {
	align-self: self-start;
}

.loree-util--align-self--self-end {
	align-self: self-end;
}

.loree-util--align-self--start {
	align-self: start;
}

.loree-util--align-self--stretch {
	align-self: stretch;
}

.loree-util--justify-items--baseline {
	justify-items: baseline;
}

.loree-util--justify-items--center {
	justify-items: center;
}

.loree-util--justify-items--end {
	justify-items: end;
}

.loree-util--justify-items--first-baseline {
	justify-items: first baseline;
}

.loree-util--justify-items--flex-end {
	justify-items: flex-end;
}

.loree-util--justify-items--flex-start {
	justify-items: flex-start;
}

.loree-util--justify-items--last-baseline {
	justify-items: last baseline;
}

.loree-util--justify-items--normal {
	justify-items: normal;
}

.loree-util--justify-items--self-start {
	justify-items: self-start;
}

.loree-util--justify-items--self-end {
	justify-items: self-end;
}

.loree-util--justify-items--start {
	justify-items: start;
}

.loree-util--justify-items--stretch {
	justify-items: stretch;
}

.loree-util--justify-self--baseline {
	justify-self: baseline;
}

.loree-util--justify-self--center {
	justify-self: center;
}

.loree-util--justify-self--end {
	justify-self: end;
}

.loree-util--justify-self--first-baseline {
	justify-self: first baseline;
}

.loree-util--justify-self--flex-end {
	justify-self: flex-end;
}

.loree-util--justify-self--flex-start {
	justify-self: flex-start;
}

.loree-util--justify-self--last-baseline {
	justify-self: last baseline;
}

.loree-util--justify-self--normal {
	justify-self: normal;
}

.loree-util--justify-self--self-start {
	justify-self: self-start;
}

.loree-util--justify-self--self-end {
	justify-self: self-end;
}

.loree-util--justify-self--start {
	justify-self: start;
}

.loree-util--justify-self--stretch {
	justify-self: stretch;
}

.loree-util--justify-content--center {
	justify-content: center;
}

.loree-util--justify-content--end {
	justify-content: end;
}

.loree-util--justify-content--flex-end {
	justify-content: flex-end;
}

.loree-util--justify-content--flex-start {
	justify-content: flex-start;
}

.loree-util--justify-content--normal {
	justify-content: normal;
}

.loree-util--justify-content--space-around {
	justify-content: space-around;
}

.loree-util--justify-content--space-between {
	justify-content: space-between;
}

.loree-util--justify-content--space-evenly {
	justify-content: space-evenly;
}

.loree-util--justify-content--start {
	justify-content: start;
}

.loree-util--justify-content--stretch {
	justify-content: stretch;
}

.loree-util--flex-direction--row {
	flex-direction: row;
}

.loree-util--flex-direction--row-reverse {
	flex-direction: row-reverse;
}

.loree-util--flex-direction--column {
	flex-direction: column;
}

.loree-util--flex-direction--column-reverse {
	flex-direction: column-reverse;
}

.loree-util--flex-wrap--nowrap {
	flex-wrap: nowrap;
}

.loree-util--flex-wrap--wrap {
	flex-wrap: wrap;
}

.loree-util--flex-wrap--wrap-reverse {
	flex-wrap: wrap-reverse;
}

.loree-util--grid-area--a {
	grid-area: a;
}

.loree-util--grid-area--b {
	grid-area: b;
}

.loree-util--grid-area--c {
	grid-area: c;
}

.loree-util--grid-area--d {
	grid-area: d;
}

.loree-util--grid-area--e {
	grid-area: e;
}

.loree-util--grid-area--f {
	grid-area: f;
}

.loree-util--grid-area--g {
	grid-area: g;
}

.loree-util--grid-area--h {
	grid-area: h;
}

a.nav-btns {
	padding: 30px 20px;
	text-decoration: none !important;
	color: #000;
	border-top: 2px solid #f56600;
	box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);
	cursor: pointer;
	font-weight: bold;
	text-align: center;
}

a.nav-btns:hover {
	border-top: 2px solid #123c78 !important;
	background-color: #e2e2e2;
}

/* Setting center alignment for Nav bar logo on mobile devices*/
@media screen and (max-width: 568px) {
	.loree-navigation-image-section {
		width: 100%;
		max-width: 100% !important;
		/* For the full width of the image section in tablet and mobile view */
		text-align: center !important;
		/* Make the image centered in the image section in tablet and mobile view */
	}

	ul.loree-iframe-content-menu,
	.loree-iframe-content-menu nav {
		width: 100% !important;
		/* FOr the full width of navigation element in nav bar only for mobile responsive */
	}
}
/*********************************************************************/
/***** END LOREE CUSTOM CSS                           ****************/
/*********************************************************************/

/******************************************************************/
/*********** Global Customisations ********************************/
/******************************************************************/

/* DesignPLUS sidebar fixes */
#kl_tools_accordion .ui-accordion-icons.ui-accordion-header i.kl_tool_icon {
	width: 24px;
	padding: 2px 4px;
}

#listCourseContent .kl_panel_content {
	overflow-y: auto !important;
}

/* body.primary-nav-expanded:not(.full-width):not(.outcomes):not(.body--login-confirmation) .ic-Layout-wrapper {
	max-width: calc( 100% - 84px );
}

body.primary-nav-transitions:not(.full-width):not(.outcomes):not(.body--login-confirmation) .ic-Layout-wrapper {
	max-width: calc( 100% - 54px );
}

@media (max-width: 768px) {
	body.primary-nav-transitions:not(.full-width):not(.outcomes):not(.body--login-confirmation) .ic-Layout-wrapper, body.primary-nav-expanded:not(.full-width):not(.outcomes):not(.body--login-confirmation) .ic-Layout-wrapper {
		max-width: 100%;
	}
} */

.pages .header-bar-outer-container {
	min-height: unset;
}

.header-bar {
	min-height: unset;
}

#kl_wrapper, #kl_wrapper_3, .kl_wrapper, .kl_wrapper_parent {
	max-width: 100%;
}

.kl_wrapper .bs-container {
	padding: 0;
}

.kl_wrapper ol {
	margin: 0 0 6px 25px;
	padding: 0;
}

/* .kl_wrapper .bs-col-md:first-child, .kl_wrapper .bs-col:first-child, .kl_wrapper .bs-col-1:first-child, .kl_wrapper .bs-col-2:first-child, .kl_wrapper .bs-col-3:first-child, .kl_wrapper .bs-col-4:first-child, .kl_wrapper .bs-col-5:first-child, .kl_wrapper .bs-col-6:first-child, .kl_wrapper .bs-col-7:first-child, .kl_wrapper .bs-col-8:first-child, .kl_wrapper .bs-col-9:first-child, .kl_wrapper .bs-col-10:first-child, .kl_wrapper .bs-col-11:first-child, .kl_wrapper .bs-col-12:first-child, .kl_wrapper .bs-col-auto:first-child, .kl_wrapper .bs-col-lg:first-child, .kl_wrapper .bs-col-lg-1:first-child, .kl_wrapper .bs-col-lg-2:first-child, .kl_wrapper .bs-col-lg-3:first-child, .kl_wrapper .bs-col-lg-4:first-child, .kl_wrapper .bs-col-lg-5:first-child, .kl_wrapper .bs-col-lg-6:first-child, .kl_wrapper .bs-col-lg-7:first-child, .kl_wrapper .bs-col-lg-8:first-child, .kl_wrapper .bs-col-lg-9:first-child, .kl_wrapper .bs-col-lg-10:first-child, .kl_wrapper .bs-col-lg-11:first-child, .kl_wrapper .bs-col-lg-12:first-child, .kl_wrapper .bs-col-lg-auto:first-child, .kl_wrapper .bs-col-md:first-child, .kl_wrapper .bs-col-md-1:first-child, .kl_wrapper .bs-col-md-2:first-child, .kl_wrapper .bs-col-md-3:first-child, .kl_wrapper .bs-col-md-4:first-child, .kl_wrapper .bs-col-md-5:first-child, .kl_wrapper .bs-col-md-6:first-child, .kl_wrapper .bs-col-md-7:first-child, .kl_wrapper .bs-col-md-8:first-child, .kl_wrapper .bs-col-md-9:first-child, .kl_wrapper .bs-col-md-10:first-child, .kl_wrapper .bs-col-md-11:first-child, .kl_wrapper .bs-col-md-12:first-child, .kl_wrapper .bs-col-md-auto:first-child, .kl_wrapper .bs-col-sm:first-child, .kl_wrapper .bs-col-sm-1:first-child, .kl_wrapper .bs-col-sm-2:first-child, .kl_wrapper .bs-col-sm-3:first-child, .kl_wrapper .bs-col-sm-4:first-child, .kl_wrapper .bs-col-sm-5:first-child, .kl_wrapper .bs-col-sm-6:first-child, .kl_wrapper .bs-col-sm-7:first-child, .kl_wrapper .bs-col-sm-8:first-child, .kl_wrapper .bs-col-sm-9:first-child, .kl_wrapper .bs-col-sm-10:first-child, .kl_wrapper .bs-col-sm-11:first-child, .kl_wrapper .bs-col-sm-12:first-child, .kl_wrapper .bs-col-sm-auto:first-child, .kl_wrapper .bs-col-xl:first-child, .kl_wrapper .bs-col-xl-1:first-child, .kl_wrapper .bs-col-xl-2:first-child, .kl_wrapper .bs-col-xl-3:first-child, .kl_wrapper .bs-col-xl-4:first-child, .kl_wrapper .bs-col-xl-5:first-child, .kl_wrapper .bs-col-xl-6:first-child, .kl_wrapper .bs-col-xl-7:first-child, .kl_wrapper .bs-col-xl-8:first-child, .kl_wrapper .bs-col-xl-9:first-child, .kl_wrapper .bs-col-xl-10:first-child, .kl_wrapper .bs-col-xl-11:first-child, .kl_wrapper .bs-col-xl-12:first-child, .kl_wrapper .bs-col-xl-auto:first-child {
	padding-left: 0;
}

.kl_wrapper .bs-col-md:last-child, .kl_wrapper .bs-col:last-child, .kl_wrapper .bs-col-1:last-child, .kl_wrapper .bs-col-2:last-child, .kl_wrapper .bs-col-3:last-child, .kl_wrapper .bs-col-4:last-child, .kl_wrapper .bs-col-5:last-child, .kl_wrapper .bs-col-6:last-child, .kl_wrapper .bs-col-7:last-child, .kl_wrapper .bs-col-8:last-child, .kl_wrapper .bs-col-9:last-child, .kl_wrapper .bs-col-10:last-child, .kl_wrapper .bs-col-11:last-child, .kl_wrapper .bs-col-12:last-child, .kl_wrapper .bs-col-auto:last-child, .kl_wrapper .bs-col-lg:last-child, .kl_wrapper .bs-col-lg-1:last-child, .kl_wrapper .bs-col-lg-2:last-child, .kl_wrapper .bs-col-lg-3:last-child, .kl_wrapper .bs-col-lg-4:last-child, .kl_wrapper .bs-col-lg-5:last-child, .kl_wrapper .bs-col-lg-6:last-child, .kl_wrapper .bs-col-lg-7:last-child, .kl_wrapper .bs-col-lg-8:last-child, .kl_wrapper .bs-col-lg-9:last-child, .kl_wrapper .bs-col-lg-10:last-child, .kl_wrapper .bs-col-lg-11:last-child, .kl_wrapper .bs-col-lg-12:last-child, .kl_wrapper .bs-col-lg-auto:last-child, .kl_wrapper .bs-col-md:last-child, .kl_wrapper .bs-col-md-1:last-child, .kl_wrapper .bs-col-md-2:last-child, .kl_wrapper .bs-col-md-3:last-child, .kl_wrapper .bs-col-md-4:last-child, .kl_wrapper .bs-col-md-5:last-child, .kl_wrapper .bs-col-md-6:last-child, .kl_wrapper .bs-col-md-7:last-child, .kl_wrapper .bs-col-md-8:last-child, .kl_wrapper .bs-col-md-9:last-child, .kl_wrapper .bs-col-md-10:last-child, .kl_wrapper .bs-col-md-11:last-child, .kl_wrapper .bs-col-md-12:last-child, .kl_wrapper .bs-col-md-auto:last-child, .kl_wrapper .bs-col-sm:last-child, .kl_wrapper .bs-col-sm-1:last-child, .kl_wrapper .bs-col-sm-2:last-child, .kl_wrapper .bs-col-sm-3:last-child, .kl_wrapper .bs-col-sm-4:last-child, .kl_wrapper .bs-col-sm-5:last-child, .kl_wrapper .bs-col-sm-6:last-child, .kl_wrapper .bs-col-sm-7:last-child, .kl_wrapper .bs-col-sm-8:last-child, .kl_wrapper .bs-col-sm-9:last-child, .kl_wrapper .bs-col-sm-10:last-child, .kl_wrapper .bs-col-sm-11:last-child, .kl_wrapper .bs-col-sm-12:last-child, .kl_wrapper .bs-col-sm-auto:last-child, .kl_wrapper .bs-col-xl:last-child, .kl_wrapper .bs-col-xl-1:last-child, .kl_wrapper .bs-col-xl-2:last-child, .kl_wrapper .bs-col-xl-3:last-child, .kl_wrapper .bs-col-xl-4:last-child, .kl_wrapper .bs-col-xl-5:last-child, .kl_wrapper .bs-col-xl-6:last-child, .kl_wrapper .bs-col-xl-7:last-child, .kl_wrapper .bs-col-xl-8:last-child, .kl_wrapper .bs-col-xl-9:last-child, .kl_wrapper .bs-col-xl-10:last-child, .kl_wrapper .bs-col-xl-11:last-child, .kl_wrapper .bs-col-xl-12:last-child, .kl_wrapper .bs-col-xl-auto:last-child {
	padding-right: 0;
} */

/******************************************************************/
/*********** Cidilabs Styles and Themes ***************************/
/******************************************************************/

/* Custom HTML Snippets */
#kl_wrapper_3 .btn-group {
	font-size: inherit;
}

#kl_wrapper_3 .btn-group .btn-header {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: var(--dt-btn-padding);
	background-color: var(--dt-color-primary);
	font-size: 1.3em;
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3 .btn-group a.btn, #kl_wrapper_3 .btn-group a.btn-full {
	margin: 10px 0;
	padding: var(--dt-btn-padding);
	color: var(--dt-color-primary-dark-text);
	font-size: 1em;
	font-family: 'Inter Semi Bold', Helvetica, sans-serif;
}

#kl_wrapper_3 a.btn {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 10px 20px;
	font-family: 'Inter Bold', Helvetica, sans-serif;
	font-size: 1.2em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
}

#kl_wrapper_3 a.btn-full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 10px 20px;
	font-family: 'Inter Bold', Helvetica, sans-serif;
	font-size: 1.2em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
}

#kl_wrapper_3 a.btn i:first-child, #kl_wrapper_3 a.btn-full i:first-child {
	margin-right: 10px;
}

#kl_wrapper_3 a.btn i:last-child, #kl_wrapper_3 a.btn-full i:last-child {
	margin-left: 10px;
}

#kl_wrapper_3 a.btn-ups-primary {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-primary-contrast);
	transition: background-color 0.2s 0s ease, color 0.2s 0s ease, border-color 0.2s 0s ease;
}

#kl_wrapper_3 a.btn-ups-primary:hover {
	background-color: var(--dt-color-primary-contrast);
	border-color: var(--dt-color-primary);
	color: var(--dt-color-primary);
}

#kl_wrapper_3 a.btn-ups-secondary {
	background-color: var(--dt-color-secondary);
	color: var(--dt-color-secondary-contrast);
	transition: background-color 0.2s 0s ease, color 0.2s 0s ease, border-color 0.2s 0s ease;
}

#kl_wrapper_3 a.btn-ups-secondary:hover {
	background-color: var(--dt-color-secondary-contrast);
	border-color: var(--dt-color-secondary);
	color: var(--dt-color-secondary);
}

#kl_wrapper_3 a.btn-green {
	background-color: var(--dt-color-accent);
	color: var(--dt-color-accent-contrast);
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3 a.btn-green:hover {
	background-color: var(--dt-color-accent-hover);
	color: var(--dt-color-accent-contrast);
}

#kl_wrapper_3 a.btn-outline {
	background-color: transparent;
	border: 1px solid var(--dt-color-primary);
	color: var(--dt-color-primary-dark-text);
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3 a.btn-outline:hover {
	background-color: #00000011;
}

#kl_wrapper_3 a.btn-outline-fill-white {
	background-color: var(--dt-color-primary-contrast);
	border: 1px solid var(--dt-color-primary);
	color: var(--dt-color-primary);
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3 a.btn-outline-fill-white:hover {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3 a.btn .btn-arrow {
	height: 1em;
	width: auto;
	margin: 0 0 0 10px;
	padding: 0;
}

#kl_wrapper_3 a.btn-full .btn-arrow {
	height: 1em;
	width: auto;
	margin: 0;
	padding: 0;
}

/******************************************************************/
/*********** Flat Sections Main 1 - Element Customisations ********/
/******************************************************************/

#kl_wrapper_3.kl_flat_sections_main {
	--dt-color-secondary: #f2b81e;
}

#kl_wrapper_3.kl_flat_sections_main h1, #kl_wrapper_3.kl_flat_sections_main h2 {
	color: unset;
}

#kl_wrapper_3.kl_flat_sections_main h3:not(.ui-state-default) {
	text-align: left;
}

#kl_wrapper_3.kl_flat_sections_main > div > h3:not(.ui-state-default):first-child {
	text-align: center;
}

#kl_wrapper_3.kl_flat_sections_main > div > h3:not(.ui-state-default):first-child i {
	border: none;
}

/* Banner */
#kl_wrapper_3.kl_flat_sections_main #kl_banner {
	margin: 0;
	padding: 0;
}

#kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left {
	height: 6.5em;
	width: 6.5em;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 100%;
	box-shadow: 0px 0px 10px #000000;
}

#kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left .kl_mod_text, #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left .kl_mod_num {
	width: 100%;
	padding: 0;
}

#kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left :first-child {
	padding-top: 2em;
}

#kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left :last-child {
	padding-bottom: 2em;
}

#kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_right, #kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_description {
	padding-left: 200px;
}

#kl_wrapper_3.kl_flat_sections_main #kl_banner .kl_subtitle {
	padding-left: 117px;
	text-align: left;
}

@media (max-width: 600px) {
	#kl_wrapper_3.kl_flat_sections_main #kl_banner .kl_subtitle {
		padding-left: 170px;
	}
}

#kl_wrapper_3.kl_flat_sections_main #kl_banner_image {
	margin: 0;
	padding: 0;
}

#kl_wrapper_3.kl_flat_sections_main #kl_banner_image img {
	margin: 0;
	padding: 0;
}

/* Navigation */
#kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a {
	border: none;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 0.2s 0s ease, border-color 0.2s 0s ease, color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a:hover {
	color: var(--dt-color-secondary-dark-text);
}

#kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a i, #kl_wrapper_3.kl_flat_sections_main #kl_navigation > ul > li > a:hover i {
	border: none;
}

/* Code Block */
#kl_wrapper_3.kl_flat_sections_main pre, #kl_wrapper_3.kl_flat_sections_main code {
	font-size: 0.9em;
}

#kl_wrapper_3.kl_flat_sections_main pre {
	margin: 10px 0;
	border: 1px solid var(--dt-color-gray-mid);
	border-left: 10px solid #2c2c36;
	border-radius: 0;
}

/* Progress Bar */
#kl_wrapper_3.kl_flat_sections_main .kl_progress_icons > ul {
	margin: 10px 0;
}

#kl_wrapper_3.kl_flat_sections_main .kl_progress_icons li.kl_current .kl_colored_bar {
	background: linear-gradient( 90deg, var(--dt-color-primary), var(--dt-color-primary-contrast) );
}

#kl_wrapper_3.kl_flat_sections_main .kl_progress_icons li.kl_pending .kl_colored_bar {
	background-color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections_main .kl_progress_icons li.kl_current a, #kl_wrapper_3.kl_flat_sections_main .kl_progress_icons li.kl_pending a {
	background-color: var(--dt-color-primary-contrast);
	transition: color 0.2s 0s ease, background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections_main .kl_progress_icons li.kl_current a {
	border: 2px solid var(--dt-color-secondary);
}

#kl_wrapper_3.kl_flat_sections_main .kl_progress_icons li.kl_pending a {
	border-color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_flat_sections_main .kl_progress_icons li.kl_current a:hover, #kl_wrapper_3.kl_flat_sections_main .kl_progress_icons li.kl_pending a:hover {
	color: var(--dt-color-primary);
	background-color: var(--dt-color-graybg);
}

/* Accordions */
#kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion, #kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion {
	margin: 0;
	padding: 0;
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header {
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--dt-color-primary);
	border-radius: 0;
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header:hover, #kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header-active {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header a {
	padding: 15px 15px 15px 35px;
	color: var(--dt-color-primary-dark-text);
	transition: color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header:hover a, #kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header-active a {
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header .ui-accordion-header-icon {
	left: 10px;
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header.ui-accordion-header-collapsed:hover span.ui-accordion-header-icon {
	filter: brightness(0) invert(1);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_accordion.ui-accordion .kl_panel_content.ui-accordion-content {
	margin: 10px 0 0 0;
	padding: 20px 35px;
	border: 1px solid var(--dt-color-primary);
}

/* Tabs */
#kl_wrapper_3.kl_flat_sections_main .kl_panels_wrapper.ui-tabs .ui-tabs-nav {
	margin: 10px 0;
	border-bottom: 1px solid var(--dt-color-primary);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_wrapper.ui-tabs .ui-tabs-nav li {
	border: none;
	border-radius: 0;
	background-color: transparent;
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_wrapper.ui-tabs .ui-tabs-nav li:hover, #kl_wrapper_3.kl_flat_sections_main .kl_panels_wrapper.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background-color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_wrapper.ui-tabs .ui-tabs-nav li a {
	padding: 10px 20px;
	color: var(--dt-color-primary-dark-text);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_wrapper.ui-tabs .ui-tabs-nav li:hover a, #kl_wrapper_3.kl_flat_sections_main .kl_panels_wrapper.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_wrapper.ui-tabs .kl_panel_content.ui-tabs-panel {
	margin: 10px 0 0 0;
	padding: 10px 20px;
	border: 1px solid var(--dt-color-primary);
}

/* Expanders */
#kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .btn-group {
	width: 100%;
	margin: 0;
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_heading {
	padding: 0;
	border: 1px solid var(--dt-color-primary);
	border-radius: 0;
	background-color: transparent;
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_heading.ui-state-hover:hover, #kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_heading.ui-state-active {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_heading a {
	padding: 15px 15px 15px 35px;
	color: var(--dt-color-primary-dark-text);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_heading.ui-state-hover:hover a, #kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_heading.ui-state-active a {
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_heading .ui-accordion-header-icon {
	left: 10px;
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_heading.ui-state-active a span.ui-accordion-header-icon, #kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_heading.ui-state-default:hover a span.ui-accordion-header-icon {
	filter: brightness(0) invert(1);
}

#kl_wrapper_3.kl_flat_sections_main .kl_panels_expander .kl_panel_content {
	margin: 1em 0;
	padding: 10px 35px;
	border: 1px solid var(--dt-color-primary);
	border-radius: 0;
}

/******************************************************************/
/*********** Flat Sections 1 - Element Customisations ***********/
/******************************************************************/

#kl_wrapper_3.kl_flat_sections {
	--dt-color-secondary: #f2b81e;
}

#kl_wrapper_3.kl_flat_sections h1, #kl_wrapper_3.kl_flat_sections h2 {
	color: unset;
}

#kl_wrapper_3.kl_flat_sections h3:not(.ui-state-default) {
	text-align: left;
}

#kl_wrapper_3.kl_flat_sections > div > h3:not(.ui-state-default):first-child {
	text-align: center;
}

/* Banner */
#kl_wrapper_3.kl_flat_sections #kl_banner #kl_banner_left, #kl_wrapper_3.kl_flat_sections #kl_banner .kl_description {
	padding: 5px 10px;
	color: var(--dt-color-secondary-dark-text);
}

#kl_wrapper_3.kl_flat_sections #kl_banner .kl_subtitle {
	border: none;
}

/* Code Block */
#kl_wrapper_3.kl_flat_sections pre, #kl_wrapper_3.kl_flat_sections code {
	font-size: 0.9em;
}

#kl_wrapper_3.kl_flat_sections pre {
	margin: 10px 0;
	border: 1px solid var(--dt-color-gray-mid);
	border-left: 10px solid #2c2c36;
	border-radius: 0;
}

/* Progress Bar */
#kl_wrapper_3.kl_flat_sections .kl_progress_icons > ul {
	margin: 10px 0;
}

#kl_wrapper_3.kl_flat_sections .kl_progress_icons li.kl_current .kl_colored_bar {
	background: linear-gradient( 90deg, var(--dt-color-primary), var(--dt-color-primary-contrast) );
}

#kl_wrapper_3.kl_flat_sections .kl_progress_icons li.kl_pending .kl_colored_bar {
	background-color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections .kl_progress_icons li.kl_current a, #kl_wrapper_3.kl_flat_sections .kl_progress_icons li.kl_pending a {
	background-color: var(--dt-color-primary-contrast);
	transition: color 0.2s 0s ease, background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections .kl_progress_icons li.kl_current a {
	border: 2px solid var(--dt-color-secondary);
}

#kl_wrapper_3.kl_flat_sections .kl_progress_icons li.kl_pending a {
	border-color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_flat_sections .kl_progress_icons li.kl_current a:hover, #kl_wrapper_3.kl_flat_sections .kl_progress_icons li.kl_pending a:hover {
	color: var(--dt-color-primary);
	background-color: var(--dt-color-graybg);
}

/* Accordions */
#kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion, #kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion {
	margin: 0;
	padding: 0;
}

#kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header {
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--dt-color-primary);
	border-radius: 0;
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header:hover, #kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header-active {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header a {
	padding: 15px 15px 15px 35px;
	color: var(--dt-color-primary-dark-text);
	transition: color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header:hover a, #kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header-active a {
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header .ui-accordion-header-icon {
	left: 10px;
}

#kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header.ui-accordion-header-collapsed:hover span.ui-accordion-header-icon {
	filter: brightness(0) invert(1);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_accordion.ui-accordion .kl_panel_content.ui-accordion-content {
	margin: 10px 0 0 0;
	padding: 20px 35px;
	border: 1px solid var(--dt-color-primary);
}

/* Tabs */
#kl_wrapper_3.kl_flat_sections .kl_panels_wrapper.ui-tabs .ui-tabs-nav {
	margin: 10px 0;
	border-bottom: 1px solid var(--dt-color-primary);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_wrapper.ui-tabs .ui-tabs-nav li {
	border: none;
	border-radius: 0;
	background-color: transparent;
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections .kl_panels_wrapper.ui-tabs .ui-tabs-nav li:hover, #kl_wrapper_3.kl_flat_sections .kl_panels_wrapper.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background-color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_wrapper.ui-tabs .ui-tabs-nav li a {
	padding: 10px 20px;
	color: var(--dt-color-primary-dark-text);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_wrapper.ui-tabs .ui-tabs-nav li:hover a, #kl_wrapper_3.kl_flat_sections .kl_panels_wrapper.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_wrapper.ui-tabs .kl_panel_content.ui-tabs-panel {
	margin: 10px 0 0 0;
	padding: 10px 20px;
	border: 1px solid var(--dt-color-primary);
}

/* Expanders */
#kl_wrapper_3.kl_flat_sections .kl_panels_expander .btn-group {
	width: 100%;
	margin: 0;
}

#kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_heading {
	padding: 0;
	border: 1px solid var(--dt-color-primary);
	border-radius: 0;
	background-color: transparent;
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_heading.ui-state-hover:hover, #kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_heading.ui-state-active {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_heading a {
	padding: 15px 15px 15px 35px;
	color: var(--dt-color-primary-dark-text);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_heading.ui-state-hover:hover a, #kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_heading.ui-state-active a {
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_heading .ui-accordion-header-icon {
	left: 10px;
}

#kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_heading.ui-state-active a span.ui-accordion-header-icon, #kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_heading.ui-state-default:hover a span.ui-accordion-header-icon {
	filter: brightness(0) invert(1);
}

#kl_wrapper_3.kl_flat_sections .kl_panels_expander .kl_panel_content {
	margin: 1em 0;
	padding: 10px 35px;
	border: 1px solid var(--dt-color-primary);
	border-radius: 0;
}

/* Topic End */
#kl_topic_end div[class^='bs-col'] p.lead:first-child {
	min-height: 4em;
}

/******************************************************************/
/*********** Ups Current Theme - Element Customisations ***********/
/******************************************************************/

#kl_wrapper_3.kl_ups_current .row {
	margin: 0 auto 0 -20px;
	padding: 0;
}

#kl_wrapper_3.kl_ups_current .col-12,
#kl_wrapper_3.kl_ups_current .col-xs-1,
#kl_wrapper_3.kl_ups_current .col-xs-2,
#kl_wrapper_3.kl_ups_current .col-xs-3,
#kl_wrapper_3.kl_ups_current .col-xs-4,
#kl_wrapper_3.kl_ups_current .col-xs-5,
#kl_wrapper_3.kl_ups_current .col-xs-6,
#kl_wrapper_3.kl_ups_current .col-xs-7,
#kl_wrapper_3.kl_ups_current .col-xs-8,
#kl_wrapper_3.kl_ups_current .col-xs-9,
#kl_wrapper_3.kl_ups_current .col-xs-10,
#kl_wrapper_3.kl_ups_current .col-xs-11,
#kl_wrapper_3.kl_ups_current .col-xs-12,
#kl_wrapper_3.kl_ups_current .col-sm-1,
#kl_wrapper_3.kl_ups_current .col-sm-2,
#kl_wrapper_3.kl_ups_current .col-sm-3,
#kl_wrapper_3.kl_ups_current .col-sm-4,
#kl_wrapper_3.kl_ups_current .col-sm-5,
#kl_wrapper_3.kl_ups_current .col-sm-6,
#kl_wrapper_3.kl_ups_current .col-sm-7,
#kl_wrapper_3.kl_ups_current .col-sm-8,
#kl_wrapper_3.kl_ups_current .col-sm-9,
#kl_wrapper_3.kl_ups_current .col-sm-10,
#kl_wrapper_3.kl_ups_current .col-sm-11,
#kl_wrapper_3.kl_ups_current .col-sm-12,
#kl_wrapper_3.kl_ups_current .col-md-1,
#kl_wrapper_3.kl_ups_current .col-md-2,
#kl_wrapper_3.kl_ups_current .col-md-3,
#kl_wrapper_3.kl_ups_current .col-md-4,
#kl_wrapper_3.kl_ups_current .col-md-5,
#kl_wrapper_3.kl_ups_current .col-md-6,
#kl_wrapper_3.kl_ups_current .col-md-7,
#kl_wrapper_3.kl_ups_current .col-md-8,
#kl_wrapper_3.kl_ups_current .col-md-9,
#kl_wrapper_3.kl_ups_current .col-md-10,
#kl_wrapper_3.kl_ups_current .col-md-11,
#kl_wrapper_3.kl_ups_current .col-md-12,
#kl_wrapper_3.kl_ups_current .col-lg-1,
#kl_wrapper_3.kl_ups_current .col-lg-2,
#kl_wrapper_3.kl_ups_current .col-lg-3,
#kl_wrapper_3.kl_ups_current .col-lg-4,
#kl_wrapper_3.kl_ups_current .col-lg-5,
#kl_wrapper_3.kl_ups_current .col-lg-6,
#kl_wrapper_3.kl_ups_current .col-lg-7,
#kl_wrapper_3.kl_ups_current .col-lg-8,
#kl_wrapper_3.kl_ups_current .col-lg-9,
#kl_wrapper_3.kl_ups_current .col-lg-10,
#kl_wrapper_3.kl_ups_current .col-lg-11,
#kl_wrapper_3.kl_ups_current .col-lg-12,
#kl_wrapper_3.kl_ups_current .col-xl-1,
#kl_wrapper_3.kl_ups_current .col-xl-2,
#kl_wrapper_3.kl_ups_current .col-xl-3,
#kl_wrapper_3.kl_ups_current .col-xl-4,
#kl_wrapper_3.kl_ups_current .col-xl-5,
#kl_wrapper_3.kl_ups_current .col-xl-6,
#kl_wrapper_3.kl_ups_current .col-xl-7,
#kl_wrapper_3.kl_ups_current .col-xl-8,
#kl_wrapper_3.kl_ups_current .col-xl-9,
#kl_wrapper_3.kl_ups_current .col-xl-10,
#kl_wrapper_3.kl_ups_current .col-xl-11,
#kl_wrapper_3.kl_ups_current .col-xl-12 {
	margin: 0;
	padding: 10px;
}

#kl_wrapper_3.kl_ups_current {
	--dt-btn-padding: 15px 30px;
	background-color: #f6f6fa;
}

#kl_wrapper_3.kl_ups_current ::selection {
	background-color: #1696ec99;
}

#kl_wrapper_3.kl_ups_current a:not([class*='btn']):hover {
	color: var(--dt-color-link-hover);
	transition: all 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .bs-btn-light {
	background: #f6f6fa;
	border-color: #f6f6fa;
}

#kl_wrapper_3.kl_ups_current .bs-btn-light:hover {
	background: #dbdbe1;
	border-color: #dbdbe1;
}

#kl_wrapper_3.kl_ups_current .bs-btn-mid {
	background: #dbdbe1;
	border-color: var(--dt-color-gray-mid);
}

#kl_wrapper_3.kl_ups_current .bs-btn-mid:hover {
	background: #cacad3;
	border-color: var(--dt-color-gray-mid);
}

#kl_wrapper_3.kl_ups_current h1, #kl_wrapper_3.kl_ups_current h2, #kl_wrapper_3.kl_ups_current h3, #kl_wrapper_3.kl_ups_current h4, #kl_wrapper_3.kl_ups_current h5, #kl_wrapper_3.kl_ups_current h6 {
	font-family: 'Inter Bold';
}

#kl_wrapper_3.kl_ups_current h1, #kl_wrapper_3.kl_ups_current h2 {
	color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current h3, #kl_wrapper_3.kl_ups_current h4, #kl_wrapper_3.kl_ups_current h5, #kl_wrapper_3.kl_ups_current h6 {
	color: var(--dt-color-primary-dark-text);
}

#kl_wrapper_3.kl_ups_current h1 > i:first-child, #kl_wrapper_3.kl_ups_current h2 > i:first-child, #kl_wrapper_3.kl_ups_current h3 > i:first-child, #kl_wrapper_3.kl_ups_current h4 > i:first-child, #kl_wrapper_3.kl_ups_current h5 > i:first-child, #kl_wrapper_3.kl_ups_current h6 > i:first-child {
	min-width: 2em;
	min-height: 2em;
	margin: 0 0.5em 0 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dt-color-secondary);
	border-radius: 100%;
	background: var(--dt-color-secondary);
	color: var(--dt-color-secondary-contrast);
	font-size: 1.2em;
}

#kl_wrapper_3.kl_ups_current h2 {
	margin-bottom: 20px;
}

#kl_wrapper_3.kl_ups_current h3 {
	margin-bottom: 0.5em;
}

/* #kl_wrapper_3.kl_ups_current h3:first-child {
	border-radius: 0 0 0 1.5em;
	border-bottom: 1px solid var(--dt-color-secondary);
	border-bottom: 1px solid;
	border-image-slice: 1;
	border-image-source: linear-gradient( 90deg, transparent 1em, var(--dt-color-secondary) 1.5em );
} */

/* #kl_wrapper_3.kl_ups_current h3 {
	position: relative;
	margin: 0 0 0.5em 1.5em;
	padding: 0 0 0.3em 1.5em;
	border-bottom: 1px solid var(--dt-color-secondary);
}

#kl_wrapper_3.kl_ups_current h3 > i {
	position: absolute;
	left: -1.2em;
	bottom: -1px;
	margin: 0;
	padding: 0;
} */

#kl_wrapper_3.kl_ups_current ul {
	margin: 10px 0 10px 30px;
}

#kl_wrapper_3.kl_ups_current ol {
	margin: 10px 0;
	padding-left: 30px;
}

#kl_wrapper_3.kl_ups_current ul.pill {
	margin-left: 0;
}

#kl_wrapper_3.kl_ups_current pre, #kl_wrapper_3.kl_ups_current code {
	font-size: 0.9em;
}

#kl_wrapper_3.kl_ups_current pre {
	margin: 10px 0;
	border: 1px solid var(--dt-color-gray-mid);
	border-left: 10px solid #2c2c36;
	border-radius: 0;
}

#kl_wrapper_3.kl_ups_current dl:not(.dl-horizontal) dd {
	margin-left: 30px;
}

.ic-Table th, .ic-Table td {
	border-bottom: 1px solid var(--dt-color-gray-mid);
}

#kl_wrapper_3.kl_ups_current .ic-Table.ic-Table--striped tbody tr:nth-child(odd), #kl_wrapper_3.kl_ups_current .ic-Table.ic-Table--striped tbody tr:nth-child(even) {
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .ic-Table.ic-Table--striped tbody tr:nth-child(odd) {
	background-color: var(--dt-color-graybg);
}

#kl_wrapper_3.kl_ups_current .ic-Table.ic-Table--striped tbody tr:nth-child(odd):hover, #kl_wrapper_3.kl_ups_current .ic-Table.ic-Table--striped tbody tr:nth-child(even):hover {
	background-color: #1696ec22;
}

#kl_wrapper_3.kl_ups_current table.ic-Table {
	width: 100%;
	max-width: 100%;
}

#kl_wrapper_3.kl_ups_current table.ic-Table thead tr th {
	border-bottom: 1px solid var(--dt-color-primary-dark-text);
	font-family: 'Inter Bold';
}

#kl_wrapper_3.kl_ups_current table.ic-Table thead tr th, #kl_wrapper_3.kl_ups_current table.ic-Table:not([cellpadding]) tbody tr td {
	padding: 10px 20px;
}

#kl_wrapper_3.kl_ups_current table.ic-Table.tablesorter thead tr th.header {
	padding: 10px 30px 10px 20px;
}

#kl_wrapper_3.kl_ups_current table.ic-Table.tablesorter thead tr th.header {
	background-position-x: calc( 100% - 15px );
}

/* Padding, margins and widths for main blocks */
#kl_wrapper_3.kl_ups_current > div, #kl_wrapper_3.kl_ups_current #kl_modules {
	width: 84%;
	margin: 0 auto 0 8%;
	padding: 20px;
}

@media (max-width: 576px) {
	/* Adjust margins and padding on small screens */

}

#kl_wrapper_3.kl_ups_current #kl_modules {
	margin-top: 20px;
}

#kl_wrapper_3.kl_ups_current > div:last-child, #kl_wrapper_3.kl_ups_current > div#kl_modules:last-child {
	padding-bottom: 60px;
}

/* Banner */
#kl_wrapper_3.kl_ups_current > #kl_banner {
	width: 100%;
	margin: 0;
	padding: 20px calc( 8% + 20px );
	background: linear-gradient(160deg, transparent 75%, var(--dt-color-secondary) 0%), linear-gradient(70deg, #1548e0, #7b1ce9), #1548e0;
	/* background: radial-gradient( circle at 84% 60%, var(--dt-color-secondary) 8%, transparent 0%), linear-gradient(70deg, #1548e0, #7b1ce9), #1548e0; */
}

#kl_wrapper_3.kl_ups_current #kl_banner {
	text-shadow: 0px 0px 10px #000000a0;
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_ups_current #kl_banner h2 {
	margin: 40px 0;
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_ups_current #kl_banner h2 #kl_banner_left {
	display: block;
	font-family: 'Inter Regular';
}

#kl_wrapper_3.kl_ups_current #kl_banner h2 #kl_banner_right {
	display: block;
}

#kl_wrapper_3.kl_ups_current > #kl_banner_image {
	width: 100%;
	margin: 0;
	padding: 0;
}

#kl_wrapper_3.kl_ups_current .kl_banner_wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(70deg, #1548e0, #7b1ce9) #1548e0;
}

#kl_wrapper_3.kl_ups_current .kl_banner_wrapper ::selection {
	background-color: #7b1ce9;
}

#kl_wrapper_3.kl_ups_current .kl_banner_wrapper #kl_banner {
	display: inline-block;
	margin: 0 auto 0 8%;
	padding: 40px 20px;
	text-shadow: 0px 0px 10px #000000a0;
}

#kl_wrapper_3.kl_ups_current .kl_banner_wrapper #kl_banner h2 {
	margin: 0;
}

#kl_wrapper_3.kl_ups_current .kl_banner_wrapper #kl_banner .kl_mod_text {
	display: block;
	font-size: 0.7em;
}

#kl_wrapper_3.kl_ups_current .kl_banner_wrapper #kl_banner_image {
	align-self: flex-end;
	padding: 0px;
	height: 100%;
	max-width: 100%;
}

#kl_wrapper_3.kl_ups_current .kl_banner_wrapper #kl_banner_image img {
	min-height: 100%;
	max-width: 100%;
}

/* Navigation */
#kl_wrapper_3.kl_ups_current #kl_navigation {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 0 calc( 8% + 20px );
	background-color: #ffffff;
}

#kl_wrapper_3.kl_ups_current #kl_navigation ul[class*="kl_nav_list"] {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	word-break: break-word;
}

#kl_wrapper_3.kl_ups_current #kl_navigation ul[class*="kl_nav_list"] li {
	display: flex;
	list-style: none;
}

#kl_wrapper_3.kl_ups_current #kl_navigation ul[class*="kl_nav_list"] li a {
	display: block;
	margin: 0;
	padding: 10px 20px;
	color: var(--dt-color-primary-dark-text);
	font-family: 'Inter Bold';
	font-size: 0.8em;
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current #kl_navigation ul[class*="kl_nav_list"] li a i {
	margin: 0 5px 0 0;
	line-height: 1.3;
}

#kl_wrapper_3.kl_ups_current #kl_navigation ul[class*="kl_nav_list"] li a:hover {
	text-decoration: none;
	background-color: #f6f6fa;
}

/* Progress Bar */
#kl_wrapper_3.kl_ups_current .kl_progress_icons > ul {
	margin: 10px 0;
}

#kl_wrapper_3.kl_ups_current .kl_progress_icons > ul li {
	min-width: 3em;
}

#kl_wrapper_3.kl_ups_current .kl_progress_icons li.kl_current .kl_colored_bar {
	background: linear-gradient( 90deg, var(--dt-color-primary), var(--dt-color-primary-contrast) );
}

#kl_wrapper_3.kl_ups_current .kl_progress_icons li.kl_pending .kl_colored_bar {
	background-color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_ups_current .kl_progress_icons li:first-child .kl_colored_bar, #kl_wrapper_3.kl_ups_current .kl_progress_icons li:last-child .kl_colored_bar {
	border-left: none;
	border-right: none;
	border-radius: 0;
}

#kl_wrapper_3.kl_ups_current .kl_progress_icons li.kl_current a, #kl_wrapper_3.kl_ups_current .kl_progress_icons li.kl_pending a {
	background-color: var(--dt-color-primary-contrast);
	transition: color 0.2s 0s ease, background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .kl_progress_icons li.kl_current a {
	border: 2px solid var(--dt-color-secondary);
}

#kl_wrapper_3.kl_ups_current .kl_progress_icons li.kl_pending a {
	border-color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .kl_progress_icons li.kl_current a:hover, #kl_wrapper_3.kl_ups_current .kl_progress_icons li.kl_pending a:hover {
	color: var(--dt-color-primary);
	background-color: var(--dt-color-graybg);
}

/* Accordions */
#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion {
	margin: 0;
	padding: 0;
	font-size: 1em;
}

#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header {
	/* Header - default collapsed state. */
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--dt-color-primary);
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header:not(:first-child) {
	margin-top: 10px;
}

#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header:hover, #kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header-active {
	/* Header - hover and active state. */
	border-color: var(--dt-color-primary);
	background-color: var(--dt-color-primary-contrast);
	color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header a {
	/* Link - default collapsed state. */
	padding: 15px 15px 15px 35px;
	color: var(--dt-color-primary-contrast);
	transition: color 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header:hover a, #kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header-active a {
	/* Link - hover and active state. */
	color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header a::before {
	/* Icon replacement - default collapsed and hover state */
	position: absolute;
	left: 12px;
	top: calc( 50% - 0.5em );
	content: '>';
	color: inherit;
	line-height: 1;
	transition: transform 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header.ui-accordion-header-active a::before {
	/* Icon replacement - active state */
	transform: rotate(90deg);
}

#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header span.ui-accordion-header-icon, #kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header.ui-accordion-header:hover span.ui-accordion-header-icon, #kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_heading.ui-accordion-header.ui-accordion-header-active span.ui-accordion-header-icon {
	/* Icon - default collapsed state, hover and active state */
	display: none;
}

#kl_wrapper_3.kl_ups_current .kl_panels_accordion.ui-accordion .kl_panel_content.ui-accordion-content {
	margin: 0;
	padding: 0 35px 20px 35px;
	border: 1px solid var(--dt-color-primary);
	border-top: none;
}

/* Tabs */
#kl_wrapper_3.kl_ups_current .kl_panels_wrapper.ui-tabs .ui-tabs-nav {
	margin: 10px 0;
	border-bottom: 1px solid var(--dt-color-primary);
	font-family: 'Inter Bold';
	font-size: 1.1em;
}

#kl_wrapper_3.kl_ups_current .kl_panels_wrapper.ui-tabs .ui-tabs-nav li {
	border: none;
	border-radius: 0;
	background-color: transparent;
	transition: background-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .kl_panels_wrapper.ui-tabs .ui-tabs-nav li:hover, #kl_wrapper_3.kl_ups_current .kl_panels_wrapper.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background-color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .kl_panels_wrapper.ui-tabs .ui-tabs-nav li a {
	padding: 15px 20px;
	color: var(--dt-color-primary-dark-text);
	line-height: 1;
}

#kl_wrapper_3.kl_ups_current .kl_panels_wrapper.ui-tabs .ui-tabs-nav li:hover a, #kl_wrapper_3.kl_ups_current .kl_panels_wrapper.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
	color: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_ups_current .kl_panels_wrapper.ui-tabs .kl_panel_content.ui-tabs-panel {
	margin: 10px 0 0 0;
	padding: 10px 20px;
	border: 1px solid var(--dt-color-primary);
}

/* Expanders */
#kl_wrapper_3.kl_ups_current .kl_panels_expander .btn-group {
	width: 100%;
	margin: 0;
}

#kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header {
	/* Header - default collapsed state. */
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--dt-color-primary);
	transition: background-color 0.2s 0s ease;
}


#kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header:not(:first-child) {
	margin-top: 10px;
}

#kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header:hover, #kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.kl_panels_expander_open {
	/* Header - hover and active state. */
	border-color: var(--dt-color-primary);
	background-color: var(--dt-color-primary-contrast);
	color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header a {
	/* Link - default collapsed state. */
	padding: 15px 15px 15px 35px;
	color: var(--dt-color-primary-contrast);
	transition: color 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header:hover a, #kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header.kl_panels_expander_open a {
	/* Link - hover and active state. */
	color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header a::before {
	/* Icon replacement - default collapsed and hover state */
	position: absolute;
	left: 12px;
	top: calc( 50% - 0.5em );
	content: '>';
	color: inherit;
	line-height: 1;
	transition: transform 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header.kl_panels_expander_open a::before {
	/* Icon replacement - active state */
	transform: rotate(90deg);
}

#kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header span.ui-accordion-header-icon, #kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header:hover a span.ui-accordion-header-icon, #kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_heading.ui-accordion-header.kl_panels_expander_open a span.ui-accordion-header-icon {
	/* Icon - default collapsed state, hover and active state */
	display: none;
}

#kl_wrapper_3.kl_ups_current .kl_panels_expander.ui-accordion .kl_panel_content {
	margin: 0;
	padding: 0 35px 20px 35px;
	border: 1px solid var(--dt-color-primary);
	border-top: none;
}

/* Quick Check */
#kl_wrapper_3.kl_ups_current .kl_quick_check {
	border: 1px solid var(--dt-color-primary);
	background: var(--dt-color-primary-contrast);
}

#kl_wrapper_3.kl_ups_current .kl_quick_check h3:first-child {
	color: var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .kl_quick_check p {
	font-size: 1em;
}

#kl_wrapper_3.kl_ups_current .kl_quick_check :first-child {
	margin-top: 0;
}

#kl_wrapper_3.kl_ups_current .kl_quick_check :last-child {
	margin-bottom: 0;
}

#kl_wrapper_3.kl_ups_current .kl_quick_check .kl_quick_check_answers label {
	font-size: 1em;
}

#kl_wrapper_3.kl_ups_current .kl_quick_check .kl_quick_check_answers label .kl_quick_check_answer {
	margin: 10px 0;
	padding: 0;
	display: flex;
	align-items: center;
}

#kl_wrapper_3.kl_ups_current .kl_quick_check .kl_quick_check_answers label .kl_quick_check_answer p {
	margin: 0;
}

#kl_wrapper_3.kl_ups_current .kl_quick_check .kl_quick_check_answers label .kl_quick_check_answer input.kl_quick_check_field {
	margin: 0 30px;
}

#kl_wrapper_3.kl_ups_current .kl_quick_check .kl_quick_check_answers .kl_quick_check_response p {
	margin: 0;
}
#kl_wrapper_3.kl_ups_current .kl_quick_check .kl_quick_check_answers .kl_quick_check_response .kl_quick_check_answer_type {
	padding: 10px;
}

#kl_wrapper_3.kl_ups_current .kl_quick_check .kl_quick_check_submit {
	margin: 0;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: var(--dt-color-primary);
	color: var(--dt-color-primary-contrast);
	font-family: 'Inter Bold';
	font-size: 1.2em;
	transition: background-color 0.2s 0s ease, color 0.2s 0s ease, border-color 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .kl_quick_check .kl_quick_check_submit:hover {
	border-color: var(--dt-color-primary);
	background-color: var(--dt-color-primary-contrast);
	color: var(--dt-color-primary);
}

/* Topic Summary */
#kl_wrapper_3.kl_ups_current .topic {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	border-bottom: 1px solid var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .topic:hover {
	background-color: #00000011;
}

#kl_wrapper_3.kl_ups_current .topic-number {
	display: inline-block;
	width: 14%;
	margin: 0;
	padding: 0;
	color: var(--dt-color-primary-dark-text);
	font-family: 'Inter Bold';
	font-size: 1.3em;
}

#kl_wrapper_3.kl_ups_current .topic-details {
	display: inline-block;
	width: 85%;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .topic-details .topic-header {
	margin: 0;
	padding: 5px;
	background-color: var(--dt-color-primary);
	border-bottom: 1px solid var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .topic-details .topic-header h3 {
	margin: 0;
	padding: 10px 30px;
	color: var(--dt-color-primary-contrast);
	font-size: 1.3em;
	line-height: 1;
}

#kl_wrapper_3.kl_ups_current .topic-details .row {
	width: 100%;
	margin: 0;
}

#kl_wrapper_3.kl_ups_current .topic-details .row div[class*="col-"] {
	border-right: 1px solid var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .topic-details .row div[class*="col-"] a {
	color: #000000;
}

#kl_wrapper_3.kl_ups_current .topic-details .row div[class*="col-"] a:hover {
	color: var(--dt-color-primary-dark-text);
	text-decoration: none;
}

/* Quick links */
#kl_wrapper_3.kl_ups_current .quick_links > h2 {
	margin-bottom: 0;
	border-bottom: 1px solid var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .quick_links .quick_links_wrapper {
	display: flex;
	align-items: center;
}

#kl_wrapper_3.kl_ups_current .quick_links .quick_links_wrapper .quick_links_list {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-start;
	word-break: break-word;
}

#kl_wrapper_3.kl_ups_current .quick_links .quick_links_wrapper .quick_links_list li {
	display: flex;
	list-style: none;
}

#kl_wrapper_3.kl_ups_current .quick_links .quick_links_wrapper .quick_links_list li::after {
	content: "";
}

#kl_wrapper_3.kl_ups_current .quick_links .quick_links_wrapper .quick_links_list li a {
	display: block;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid transparent;
	color: var(--dt-color-primary-dark-text);
	font-family: 'Inter Bold';
	font-size: 0.8em;
	transition: background-color 0.2s 0s ease, border-color 0.2s 0s ease, color 0.2s 0s ease;
}

#kl_wrapper_3.kl_ups_current .quick_links .quick_links_wrapper .quick_links_list li a i {
	margin: 0 5px 0 0;
	line-height: 1.3;
}

#kl_wrapper_3.kl_ups_current .quick_links .quick_links_wrapper .quick_links_list li a:not(:last-child) {
	border-right: 1px solid var(--dt-color-primary);
}

#kl_wrapper_3.kl_ups_current .quick_links .quick_links_wrapper .quick_links_list li a:hover {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-primary-contrast);
	text-decoration: none;
}

/* Thread & icons */
#kl_wrapper_3.kl_ups_current.with_thread {
	/* 1/2 8% left margin + 1/2 block padding */
	--dt-thread-width: calc( 4% + 10px );
	--dt-thread-font-size: calc( 10px + 1vw );
	--dt-thread-size: 2.5em;
	--dt-thread-top: 340px;
	--dt-thread-border-width: 2px;
	--dt-thread-color: var(--dt-color-secondary);
	--dt-thread-color-contrast: var(--dt-color-secondary-contrast);
	--dt-thread-line: var(--dt-thread-border-width) solid var(--dt-thread-color);
}

#kl_wrapper_3.kl_ups_current.with_thread #thread {
	width: var(--dt-thread-width);
	/* Full height - top banner and nav elements - bottom block padding */
	height: calc( 100% - var(--dt-thread-top) - 60px );
	padding: 0;
	margin: 0;
	position: absolute;
	top: var(--dt-thread-top);
	left: 0;
	border-right: var(--dt-thread-line);
}

#kl_wrapper_3.kl_ups_current.with_thread > div > h2 i, #kl_wrapper_3.kl_ups_current.with_thread > div > h3 i {
	min-width: var(--dt-thread-size);
	min-height: var(--dt-thread-size);
	margin: -0.8em 0 0 0;
	padding: 0;
	position: absolute;
	/* thread width - half the icon size */
	left: calc( var(--dt-thread-width) - var(--dt-thread-size)  / 2 );
	background: var(--dt-thread-color);
	border: var(--dt-thread-line);
	border-radius: 100%;
	font-size: var(--dt-thread-font-size);
	color: var(--dt-thread-color-contrast);
}

.zzWtw li button.active {
    color: #000 !important;
}

/*********************************************************************/
/***** START UPSKILLED V2 (DESIGNPLUS NEW SIDEBAR) CUSTOMISATIONS ****/
/*********************************************************************/
/*
   DRAFT v2 — 2026-05-29. Append this block to the END of dp_oct2024.css.

   Built from the live "New" pages in course 5525 (help course) and Ben's
   before/after screenshots. Each section maps to an item on Ben's punch-list.

   PURELY ADDITIVE: Loree, the v1 kl_* block, fonts and Canvas-chrome styling
   are untouched. Everything here is scoped to #dp-wrapper so it can never
   affect legacy (#kl_wrapper_3) pages.

   KEY FACTS confirmed from the live upgrade of course 5525:
   - The upgrade KEEPS Andy's class hooks: .btn-group, .btn-header, .btn-full,
     .btn-outline-fill-white, .kl_banner_wrapper, .kl_topic_learning_assessment,
     plus the theme class maps kl_ups_current -> dp-ups-current,
     kl_flat_sections(-main) -> dp-flat-sections(-main).
   - So most of Andy's look is reproduced by re-pointing his rules at #dp-wrapper.

   NOTE ON VALUES: pixel/weight values below are a first pass matched to the
   screenshots. Expect ONE round of live tuning on the test instance.

   Brand variables (--dt-color-*) and the Inter brand font are defined higher up
   in this same file and reused here.
*/

/* === 12. Body content — match v1 paragraph size. VERIFIED LIVE. == */
/* ROOT CAUSE of "text keeps getting smaller": the legacy DesignPlus theme set
   #kl_wrapper_3 { font-size: 16px }, so v1 CONTENT renders at 16px even though
   the global Canvas body is 13.6px (.85em). DesignPlus v2 does NOT restore
   this, so #dp-wrapper inherits 13.6px -> paragraphs ~15% smaller than v1.
   Fix = mirror legacy by resetting the v2 wrapper base to 16px. This also makes
   all em-based content (headings, etc.) scale in the SAME proportions as v1.
   IMPORTANT: use the absolute 16px — NEVER `.85em` here (that double-shrinks,
   giving ~11.6px). Measured: legacy p = 16px, v2 p (before) = 13.6px,
   v2 p (after this rule) = 16px. */
#dp-wrapper {
    font-size: 16px;
}

/* === 2,4,9. Headings — Ben: H3/titles "too thick" -> lighten ===== */
/* Keep brand colours but use Semi Bold for sub-headings to reduce weight. */
/* h1/h2 brand font comes from the content-heading rule in dp_oct2024.css.
   NO colour is set here on purpose: forcing color:primary turned the BANNER
   title blue-on-blue (invisible) and wrongly blued content headings. They now
   inherit the dark theme colour, matching the v1 Flat Sections look. */
#dp-wrapper h3, #dp-wrapper h4, #dp-wrapper h5, #dp-wrapper h6 {
    font-family: 'Inter Semi Bold', Helvetica, sans-serif !important;
}
/* (2) Banner title was rendering too thick — Semi Bold lightens it. */
#dp-wrapper .dp-header .dp-header-title {
    font-family: 'Inter Regular', Helvetica, sans-serif !important;   /* Ben: lighter weight */
    /* colour intentionally NOT set — banner title inherits white from .dp-header */
}
/* (9) Overview subtitle / page name was too small. VERIFIED. */
#dp-wrapper .dp-header .dp-header-subtitle {
    font-size: 1.25em;
    font-family: 'Inter Regular', Helvetica, sans-serif !important;   /* Ben: lighter weight */
}

/* === 1,8. Banner module-code circle / pill — VERIFIED ============ */
/* flat-sections-main: the module code sits in a yellow disc that DP renders
   at ~100px, so "ICTPRG302" wraps to 2-3 lines. Enlarge the disc and shrink
   the text so it fits on one line (matches Andy's v1 ~6.5em circle). */
/* Module-code circle: resize to fit the code on ONE line. Codes vary in length
   (ICTPRG302 vs NAT11426001 — the latter used to wrap to 3 lines). The disc grows
   with its content and stays circular; the banner title's left clearance is
   widened so a bigger circle never overlaps it. Scoped via :has() so the Course
   Home banner (which has no circle) isn't shifted. Ben. */
/* SCOPE: ONLY the unit-home banner (flat-sections-MAIN) — that's the one with the
   module-code CIRCLE. The class lives on the .dp-header on some courses and on the
   #dp-wrapper on others, so match both. Do NOT broaden to all .dp-header-pre: the
   same element is the rounded PILL on content/quiz pages ("Topic # - Title",
   "Before you begin") and aspect-ratio:1 + border-radius:50% turns those pills
   into giant circles. Ben (regression fix). */
#dp-wrapper .dp-header.dp-flat-sections-main .dp-header-pre,
#dp-wrapper.dp-flat-sections-main .dp-header .dp-header-pre {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 84px;
    aspect-ratio: 1 / 1;            /* keep it circular while width tracks content */
    padding: 6px 14px !important;   /* Ben: less padding so the code fills more of the disc */
    box-sizing: border-box !important;
    align-items: center !important; /* vertical-centre the code (single Prefix 1) */
    justify-content: center !important;
    border-radius: 50% !important;
}
#dp-wrapper .dp-header.dp-flat-sections-main .dp-header-pre-1,
#dp-wrapper.dp-flat-sections-main .dp-header .dp-header-pre-1 {
    font-family: 'Inter Bold', Helvetica, sans-serif !important;   /* Ben: bold (like v1) */
    font-weight: 700 !important;
    font-size: 18px !important;                                    /* Ben: bigger code text */
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;                                         /* kill DP base padding-top:21px so the code sits DEAD-centre */
    white-space: nowrap !important;                                /* one line; the disc grows to fit */
}
/* Upskilled only ever use Prefix 1. If Prefix 2 renders empty, hide it so the
   single code stays vertically centred in the disc. Ben. */
#dp-wrapper .dp-header.dp-flat-sections-main .dp-header-pre-2:empty,
#dp-wrapper.dp-flat-sections-main .dp-header .dp-header-pre-2:empty { display: none !important; }
#dp-wrapper .dp-header.dp-flat-sections-main:has(.dp-header-pre) .dp-header-title,
#dp-wrapper.dp-flat-sections-main .dp-header:has(.dp-header-pre) .dp-header-title {
    padding-left: 170px !important;                                /* clear the widest code circle */
}
/* (8) flat-sections content/overview "Topic …" pill — smaller but BOLD, like legacy (Ben). */
#dp-wrapper.dp-flat-sections .dp-header .dp-header-pre-1 {
    padding: 4px 14px !important;
    font-size: 0.8em !important;                             /* Ben: not as big */
    font-family: 'Inter Bold', Helvetica, sans-serif !important;     /* Ben: bold again */
    font-weight: 700 !important;
}

/* === 3. Nav bar (dp-link-grid) — font too small ================== */
#dp-wrapper nav.dp-link-grid ul li a {
    font-family: 'Inter Regular', Helvetica, sans-serif;   /* Ben: lighter (was too thick) */
    font-size: 1.15em;         /* match the v1 nav size */
}
#dp-wrapper nav.dp-link-grid ul li a:hover {
    text-decoration: none;
    background-color: var(--dt-color-secondary) !important;   /* Ben: secondary (yellow) on hover */
    color: var(--dt-color-secondary-contrast) !important;     /* black text for contrast on yellow */
}
#dp-wrapper nav.dp-link-grid ul li a:hover i {
    color: var(--dt-color-secondary-contrast) !important;
}
/* Course Home nav (Contents/Calendar/Zoom): black, smaller, centred, closer (Ben).
   Scoped to dp-ups-current so the flat-sections blue nav bar is unaffected. */
#dp-wrapper.dp-ups-current nav.dp-link-grid ul {
    justify-content: center !important;
}
#dp-wrapper.dp-ups-current nav.dp-link-grid ul li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    /* Safety net: some course homes (e.g. 428) were authored with several links
       crammed into ONE <li> instead of one <li> per link, which stacks them
       vertically. Lay the links inside a list item out side-by-side. Harmless for
       correctly-built navs (one link per <li> = a single child, so no change). */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px 36px !important;
}
#dp-wrapper.dp-ups-current nav.dp-link-grid ul li a {
    color: #000000 !important;
    font-family: 'Inter Regular', Helvetica, sans-serif !important;
    font-size: 13px !important;
    padding: 4px 12px !important;
}
/* Even spacing above and below the Course Home nav (was 6px above / 16px below). Ben. */
#dp-wrapper.dp-ups-current nav.dp-link-grid {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}
/* Course Home nav hover = subtle grey pill (Ben chose this over the brand-yellow
   hover). Scoped to dp-ups-current so the content-page blue nav bar keeps its
   yellow hover. Overrides the general yellow :hover via the extra .dp-ups-current. */
#dp-wrapper.dp-ups-current nav.dp-link-grid ul li a:hover {
    background-color: #e8eaed !important;
    color: var(--dt-color-primary-dark-text, #2c2c36) !important;
    border-radius: 4px !important;
}
#dp-wrapper.dp-ups-current nav.dp-link-grid ul li a:hover i {
    color: var(--dt-color-primary-dark-text, #2c2c36) !important;
}

/* === 5,6. Accordions & Expanders — VERIFIED on test instance ===== */
/* Ben: "clear with blue border, and blue hover". v2 default is solid grey.
   Built DOM is: .dp-accordion-default/.dp-expander-default > h3.dp-panel-heading
   > a.dp-panel-toggler[aria-expanded]  (NO .dp-panel-group wrapper).
   !important is required to beat DesignPlus's own component styles. */
#dp-wrapper .dp-accordion-default .dp-panel-heading,
#dp-wrapper .dp-expander-default .dp-panel-heading {
    background: #ffffff !important;        /* Ben: white background */
    border: 1px solid var(--dt-color-primary) !important;
    border-radius: 0 !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#dp-wrapper .dp-accordion-default .dp-panel-heading .dp-panel-toggler,
#dp-wrapper .dp-expander-default .dp-panel-heading .dp-panel-toggler {
    color: var(--dt-color-primary-dark-text) !important;
    font-family: 'Inter Bold', Helvetica, sans-serif;
    background: transparent !important;   /* let the white heading bg show */
    padding-top: 12px !important;          /* Ben: a bit taller */
    padding-bottom: 12px !important;
}
/* Hover + open state -> solid blue on BOTH heading and its toggler (the toggler
   fills the heading and otherwise shows DesignPlus's grey hover over the blue). */
#dp-wrapper .dp-accordion-default .dp-panel-heading:hover,
#dp-wrapper .dp-expander-default .dp-panel-heading:hover,
#dp-wrapper .dp-accordion-default .dp-panel-heading:hover .dp-panel-toggler,
#dp-wrapper .dp-expander-default .dp-panel-heading:hover .dp-panel-toggler,
#dp-wrapper .dp-accordion-default .dp-panel-heading:has(.dp-panel-toggler[aria-expanded="true"]),
#dp-wrapper .dp-expander-default .dp-panel-heading:has(.dp-panel-toggler[aria-expanded="true"]),
#dp-wrapper .dp-accordion-default .dp-panel-heading:has(.dp-panel-toggler[aria-expanded="true"]) .dp-panel-toggler,
#dp-wrapper .dp-expander-default .dp-panel-heading:has(.dp-panel-toggler[aria-expanded="true"]) .dp-panel-toggler {
    background: var(--dt-color-primary) !important;
}
#dp-wrapper .dp-accordion-default .dp-panel-heading:hover .dp-panel-toggler,
#dp-wrapper .dp-expander-default .dp-panel-heading:hover .dp-panel-toggler,
#dp-wrapper .dp-accordion-default .dp-panel-heading:has(.dp-panel-toggler[aria-expanded="true"]) .dp-panel-toggler,
#dp-wrapper .dp-expander-default .dp-panel-heading:has(.dp-panel-toggler[aria-expanded="true"]) .dp-panel-toggler {
    color: var(--dt-color-primary-contrast) !important;
}
#dp-wrapper .dp-accordion-default .dp-panel-content,
#dp-wrapper .dp-expander-default .dp-panel-content {
    border: 1px solid var(--dt-color-primary);
    border-top: none;
}

/* === 7. Tabs — active tab solid blue + white. VERIFIED live. ===== */
/* IMPORTANT: tabs differ from accordions. The tab heading IS the <a>
   (a.nav-link.dp-panel-heading) and carries .active / aria-selected="true"
   DIRECTLY — there is NO inner .dp-panel-toggler. */
#dp-wrapper .dp-tabs a.dp-panel-heading {
    background: transparent !important;
    border: 1px solid var(--dt-color-primary) !important;
    border-radius: 0 !important;
    color: var(--dt-color-primary-dark-text) !important;
    font-family: 'Inter Bold', Helvetica, sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#dp-wrapper .dp-tabs a.dp-panel-heading:hover,
#dp-wrapper .dp-tabs a.dp-panel-heading.active,
#dp-wrapper .dp-tabs a.dp-panel-heading[aria-selected="true"] {
    background: var(--dt-color-primary) !important;
    color: var(--dt-color-primary-contrast) !important;
}

/* === 10. Objectives callouts — text/icon too small. VERIFIED. ==== */
#dp-wrapper .dp-callout.card .card-body .card-text {
    font-size: 15px;
}
#dp-wrapper .dp-callout.card .card-body .card-text i {
    font-size: 18px;
}
/* Objectives-style callouts (the "default" type with a coloured left border)
   render TRANSPARENT in v2, so on a grey content block they look see-through.
   They should be white cards with ONLY the coloured left accent (no grey
   surround — matches v1). Ben (lots of v2-upgraded pages). */
#dp-wrapper .dp-callout.dp-callout-type-default {
    background-color: #ffffff !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;   /* drop the card's grey border; keep the left accent */
    margin: 0 0 12px 0 !important;     /* Ben: more space between callouts (was 5px) */
}
#dp-wrapper .dp-callout.dp-callout-type-default .card-body {
    padding: 10px 16px !important;     /* Ben: less inner padding so the callout is thinner (was 16px) */
}

/* === 11. Progress bar — gradient bar + yellow current ring. VERIFIED. */
/* Built DOM (by dp_app.js at runtime): .kl_progress_bar > ... > li.dp-complete
   / li.dp-current > .dp-colored-bar + a. Yellow ring on the current icon and a
   gradient on the current segment, matching Andy's v1 look. */
#dp-wrapper .kl_progress_bar li.dp-current .dp-colored-bar {
    background: linear-gradient(90deg, var(--dt-color-primary), var(--dt-color-primary-contrast)) !important;
}
#dp-wrapper .kl_progress_bar li.dp-current a {
    border: 2px solid var(--dt-color-secondary) !important;
}

/* === 13. Buttons — match v1 (rounded, lighter, aligned icons) ==== */
#dp-wrapper a.btn,
#dp-wrapper a.btn-lg {
    padding: 10px 20px;
    font-family: 'Inter Regular', Helvetica, sans-serif;   /* Ben: lighter button text */
    font-size: 1em;
    border-radius: 5px;                                     /* Ben: rounded like v1 */
    vertical-align: middle;
}
/* Outline buttons: clean brand-blue text + matching icon (v2 default was muddy navy) */
#dp-wrapper a.btn-outline-primary,
#dp-wrapper a.btn-outline-primary i {
    color: var(--dt-color-primary) !important;
}
/* Start learning / Start assessment: equal width + icon vertically aligned with text */
/* Topic learning/assessment block. v1 used .kl_topic_learning_assessment; the
   v2-rebuilt "New" page drops that class — the "Topic N" bars are inline-styled
   <h4> (background-color set inline, no class) inside .dp-content-block, and the
   Start learning / Start assessment buttons sit in .col-md. Target BOTH so the
   block looks right on legacy v1 pages and on rebuilt v2 pages. */
#dp-wrapper .kl_topic_learning_assessment .col-md a.btn,
#dp-wrapper .dp-content-block .col-md a.btn {
    min-width: 200px;           /* Ben: both buttons the same size */
    display: inline-flex;
    align-items: center;        /* Ben: icon + label vertically aligned */
    justify-content: center;
    margin-top: 12px;           /* Ben: gap so buttons don't stick to the blue bar */
    font-size: 1.15em;          /* Ben: bigger button text, closer to v1 (~20px) */
}
#dp-wrapper .kl_topic_learning_assessment .col-md a.btn i,
#dp-wrapper .dp-content-block .col-md a.btn i {
    margin-right: 8px;
}
/* Topic header bars ("Topic 1 - …"): smaller + lighter to match v1 (v2 default ~24px Semi Bold).
   The v2 bars are inline-styled <h4> with a background-color, so match on that. */
#dp-wrapper .kl_topic_learning_assessment h4,
#dp-wrapper .dp-content-block h4[style*="background-color"] {
    font-size: 18px !important;
    font-family: 'Inter Bold', Helvetica, sans-serif !important;     /* Ben: bold (matches v1) */
    font-weight: 700 !important;
}
/* Gap between a .kl_topic_learning_assessment heading bar and its content row
   (e.g. Course Home "Your Trainer/Program Coordinator" bar -> trainer images,
   which otherwise sit flush against the bar). Ben. */
#dp-wrapper .kl_topic_learning_assessment .container-fluid {
    margin-top: 16px;
}

/* === 14. Code blocks — base styling (partial) =================== */
/* Restores the left-border code style. NOTE: the multicolour syntax
   highlighting in the legacy pages came from the source markup (coloured
   <span>s), which the upgrade stripped to bare <span>s — that cannot be
   restored with CSS alone. Flagged separately. */
#dp-wrapper pre {
    margin: 10px 0;
    border: 1px solid var(--dt-color-gray-mid, #ccc);
    border-left: 10px solid #2c2c36;
    border-radius: 0;
    background: #f6f6fa;
}
#dp-wrapper pre, #dp-wrapper code { font-size: 0.9em; }

/* === 15. COURSE HOME — recreate Andy's "Ups Current" front page === */
/* The upgrade applies #dp-wrapper.dp-ups-current and keeps Andy's hooks
   (.kl_banner_wrapper, .btn-group, .btn-header, .btn-full,
   .btn-outline-fill-white). We restyle them so the new Course Home matches
   the old one — letting you retire the legacy Ups Current theme. */

/* Gradient banner wrapper (blue -> purple) with title + image side by side.
   VERIFIED live on 5525/course-home-new. !important beats DP/content.css. */
#dp-wrapper.dp-ups-current .kl_banner_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    background: linear-gradient(70deg, #1548e0, #7b1ce9) #1548e0 !important;
    color: var(--dt-color-primary-contrast);
}
#dp-wrapper.dp-ups-current .kl_banner_wrapper .dp-header {
    margin: 0 auto 0 8%;
    padding: 40px 20px;
    text-shadow: 0 0 10px #000000a0;
}
#dp-wrapper.dp-ups-current .kl_banner_wrapper .dp-header .dp-header-title {
    color: var(--dt-color-primary-contrast) !important;
    font-family: 'Inter Bold', Helvetica, sans-serif;
}
#dp-wrapper.dp-ups-current .kl_banner_wrapper .dp-banner-image {
    align-self: flex-end;
    max-width: 100%;
}
#dp-wrapper.dp-ups-current .kl_banner_wrapper .dp-banner-image img {
    max-width: 100%;
    min-height: 100%;
}

/* Bordered "card" link grid (.btn-group with header + full-width links) */
/* Flex column with a single gap → header->first-button and button->button are
   identical and tighter (Ben: "bit closer vertically, equal distance even between heading"). */
/* NOTE: scope these to .col-md.btn-group (Andy's cards carry BOTH classes).
   A bare .btn-group also matches DesignPlus's expander/accordion "Expand All /
   Collapse All" controls (.btn-group.dp-expander-controls) — styling those as a
   flex column broke them into empty full-width bars. .col-md keeps us on cards. */
#dp-wrapper .col-md.btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* The buttons are wrapped in <p> elements that are the actual flex children;
   zero their margins so the 8px gap alone governs spacing (even everywhere). */
#dp-wrapper .col-md.btn-group > p {
    margin: 0;
}
/* Course Home: the two "rows" of cards are separate .dp-content-block stacks
   (kl_row_3_col_buttons + the next block) sitting only 8px apart. Add breathing
   room below every card block → bigger gap between the two rows AND before the
   next element (the "Your Trainer/Program Coordinator" bar). Ben. */
#dp-wrapper.dp-ups-current .dp-content-block:has(.col-md.btn-group) {
    margin-bottom: 28px;
}
/* Grey panels (kl_grey_block): the inter-block margins show as ugly white bands
   between adjacent grey sections. Merge ANY consecutive grey blocks into one
   continuous grey region (no white seam) — card grids, the trainer block, the
   "Need help?" block, etc. — and leave only a small gap after the last grey
   block before the following non-grey section. !important so it beats the 28px
   card-grid rule above. Ben (courses 1043, 428). */
#dp-wrapper.dp-ups-current .kl_grey_block:has(+ .kl_grey_block) {
    margin-bottom: 0 !important;
}
#dp-wrapper.dp-ups-current .kl_grey_block:not(:has(+ .kl_grey_block)) {
    margin-bottom: 16px !important;
}
#dp-wrapper .col-md.btn-group .btn-header {
    width: 100%;
    max-width: 100%;
    margin: 0;                     /* spacing handled by .btn-group gap */
    padding: var(--dt-btn-padding, 15px 30px);
    background-color: var(--dt-color-primary) !important;
    color: var(--dt-color-primary-contrast) !important;
    font-family: 'Inter Bold', Helvetica, sans-serif;
    font-size: 1.3em;
    text-align: left;
}
#dp-wrapper a.btn-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;                     /* spacing handled by .btn-group gap (equal + tighter) */
    padding: 10px 20px;
    font-family: 'Inter Regular', Helvetica, sans-serif;   /* Ben: lighter weight */
    font-size: 1em;
    text-decoration: none;
    border: 1px solid var(--dt-color-primary) !important;
    border-radius: 0;
}
#dp-wrapper a.btn-outline-fill-white {
    background-color: #ffffff !important;
    color: #000000 !important;                 /* Ben: black text by default */
    transition: background-color 0.2s ease, color 0.2s ease;
}
#dp-wrapper a.btn-outline-fill-white i {
    color: inherit !important;                 /* arrow icon follows the text colour (black) */
}
#dp-wrapper a.btn-outline-fill-white:hover {
    background-color: var(--dt-color-primary) !important;
    color: #ffffff !important;                 /* hover: blue fill, white text */
    text-decoration: none;
}
#dp-wrapper a.btn-outline-fill-white:hover i {
    color: #ffffff !important;
}
#dp-wrapper a.btn-full i:last-child { margin-left: 10px; }

/* === Reusable helper: subtle grey panel ========================== */
/* Add the class  kl_grey_block  to any DesignPlus content block (in the
   block's "CSS classes" field, or class="dp-content-block kl_grey_block"
   in the HTML editor) to give that block a light-grey panel background.
   Works on both v2 (#dp-wrapper) and legacy v1 (#kl_wrapper_3) pages. */
#dp-wrapper .kl_grey_block,
#dp-wrapper.kl_grey_block,
#kl_wrapper_3 .kl_grey_block {
    background-color: #f3f4f6;   /* subtle light grey */
    padding: 24px;               /* breathing room so text isn't cramped */
    border-radius: 4px;
}

/*********************************************************************/
/***** END UPSKILLED V2 (DESIGNPLUS NEW SIDEBAR) CUSTOMISATIONS ******/
/*********************************************************************/