@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

      :root {
        --font: Lato;
        --alt-font: Lato;
        --accent-color: #0d55ba;
        --secondary-color: #5e5d5d;
        --link-color: #a9a9a9;
        --accent-highlight-color: #0b4aa2;
        --accent-highlight-background-color: #e2eefd;
        --accent-tinted-color-70: #b6ccea;
        --accent-tinted-color-80: #cfddf1;
        --accent-tinted-color-90: #e7eef8;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #106bea;
        --secondary-hover-color: #787676;
        --secondary-contrast-color: #fff;
        --link-hover-color: #767676;
      }
      

.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/666c8120-b013-4890-9961-904225467817/22hybb5rdjn0-dentlogics-logo.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/* Added by Paras */
/* reset.css */
.myrow {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .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-lg-auto, .col-md, .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-md-auto, .col-sm, .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-sm-auto, .col-xl, .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, .col-xl-auto {
	position: relative;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}
.col {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}
.col-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}
.col-1 {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}
.col-2 {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}
.col-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}
.col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.col-5 {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}
.col-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}
.col-7 {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}
.col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.col-9 {
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
}
.col-10 {
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}
.col-11 {
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}
.col-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
 @media (min-width:576px) {
.col-sm {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}
.col-sm-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}
.col-sm-1 {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}
.col-sm-2 {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}
.col-sm-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}
.col-sm-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.col-sm-5 {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}
.col-sm-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}
.col-sm-7 {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}
.col-sm-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.col-sm-9 {
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
}
.col-sm-10 {
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}
.col-sm-11 {
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}
.col-sm-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
}
@media (min-width:768px) {
.col-md {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}
.col-md-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}
.col-md-1 {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}
.col-md-2 {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}
.col-md-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}
.col-md-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.col-md-5 {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}
.col-md-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}
.col-md-7 {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}
.col-md-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.col-md-9 {
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
}
.col-md-10 {
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}
.col-md-11 {
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}
.col-md-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
}
@media (min-width:992px) {
.col-lg {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}
.col-lg-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}
.col-lg-1 {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%
}
.col-lg-2 {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}
.col-lg-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}
.col-lg-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.col-lg-5 {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}
.col-lg-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}
.col-lg-7 {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}
.col-lg-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.col-lg-9 {
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
}
.col-lg-10 {
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}
.col-lg-11 {
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}
.col-lg-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
}
@media (min-width:1200px) {
.col-xl {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}
.col-xl-auto {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}
.col-xl-1 {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}
.col-xl-2 {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}
.col-xl-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}
.col-xl-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.col-xl-5 {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}
.col-xl-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}
.col-xl-7 {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%
}
.col-xl-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.col-xl-9 {
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
}
.col-xl-10 {
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}
.col-xl-11 {
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}
.col-xl-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
}

/* style.css */
/*------------------------------------------------- */
/* =  General */
/*------------------------------------------------- */
a.button-one {
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
	padding: 15px 50px;
	font-weight: 700;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	margin: 0;
	text-decoration:none;
	background: #1c558c;
}
a.button-one:hover {
	background: #1c558c;
	color: #fff;
	box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
}
section.page-banner-section {
	background-color: #1C558C;
	padding: 2rem 0;
}
section.page-banner-section h1 {
	font-size: 2em;
	font-weight: 700;
	color: #fff;
	line-height: 1;
	margin: 0;
	text-align: center;
}
/*------------------------------------------------- */
/* =  Sidebar */
/*------------------------------------------------- */
.sidebar .widget {
	background-color: #f4f4f4;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 1.75rem;
	margin-bottom: 1.75rem;
}
.sidebar .widget.course-widget {
	background-color: #dfeffd;
}
.sidebar div.course-widget p.title {
	margin-bottom: 24px;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
}

.sidebar div.course-widget h3 {
	font-weight: 500;
	margin-bottom: 4px;
}
.sidebar .profile-widget .top-part {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.sidebar .profile-widget .top-part img {
	max-width: 100%;
	width: 80px;
	height: auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.sidebar .profile-widget .top-part .name {
	line-height: normal;
	flex-grow: 1;
	padding-left: 20px;
}
.sidebar .profile-widget .top-part .name h3 {
	margin: 0 0 5px;
}
.sidebar .profile-widget .top-part .name span {
	color: #0A5192;
}
.sidebar .profile-widget p {
	line-height: 28px;
}
.sidebar .profile-widget h2 {
	font-weight: 700;
	margin-bottom: 10px;
}
/*------------------------------------------------- */
/* =  single course section */
/*------------------------------------------------- */
section.content-section {
	padding: 2rem 0;
	background-color: #f8f9fa;
}
section.content-section .course-detail {
	background-color: #f4f4f4;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 30px;
}
section.content-section .course-heading {
	border-bottom:2px solid #0A5192;
	margin-bottom: 30px;
}
section.content-section .single-course-content {
	padding: 1rem;
}
section.content-section .single-course-content h2 {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 20px;
}
section.content-section .single-course-content p {
	line-height: 28px;
	margin-bottom: 30px;
}
section.content-section .single-course-content ul.list {
	padding-left: 20px;
	margin-bottom: 30px;
}
section.content-section .single-course-content ul.list li {
	line-height: 28px;
	font-size: 15px;
}
section.content-section .single-course-content .course-note {
    font-size: 14px;
}
section.content-section .single-course-content .course-button {
    margin: 30px 0;
}
section.content-section .course-section {
	background-color: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 1.75rem;
	margin-bottom: 1.75rem;
}
section.content-section .course-section h2 {
	font-weight: 700;
	margin-bottom: 10px;
}
section.content-section .course-section h3 {
	font-weight: 500;
	font-size: 18px;
	margin-bottom: 10px;
}
.single-course-content .course-info {
	display: block;
	background-color:#f4f4f4;
}
.single-course-content .course-info .course-author {
	display: flex;
	align-items: center;
	font-size: 15px;
}
.single-course-content .course-info .course-author:last-child {
	padding-right: 0;
	border-right: 0;
}
.single-course-content .course-info .course-author .icon {
	margin-right: 15px;
	color: #0A5192;
}
.single-course-content .course-info .course-author .icon  img {
	max-width: 100%;
	width: 80px;
	height: auto;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.single-course-content .course-info .course-author .info span.alabel {
	color: #0A5192;
	font-size:24px;
	font-weight:700;
}
.single-course-content .course-info .course-author .info div.value a {
	color: #2f2f32;
}
.single-course-content .course-info .course-author .info div.value a:hover {
	color: #4783f3;
}
.single-course-content .course-info .course-category {
    margin: 0 auto;
}

section.content-section .course-section .course-panel-heading {
	border-top: 1px solid #e9ecef;
	display: flex;
	align-items: center;
	padding: 15px 0;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
section.content-section .course-section .course-panel-heading .panel-heading-left {
	display: flex;
	align-items: center;
	flex-grow: 1;
}
section.content-section .course-section .course-panel-heading .panel-heading-left .course-lesson-icon {
	line-height: 1;
	margin-right: 15px;
}
section.content-section .course-section .course-panel-heading .panel-heading-left .course-lesson-icon i {
	color: #d4d9dd;
	font-size: 20px;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
section.content-section .course-section .course-panel-heading .panel-heading-left .course-lesson-icon span {
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
section.content-section .course-section .course-panel-heading .panel-heading-left .title h4 {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 8px;
}
section.content-section .course-section .course-panel-heading .panel-heading-left .title p {
	font-size: 14px;
	color: #adb5bd;
	margin: 0;
	line-height: 1;
}
section.content-section .course-section .course-panel-heading:hover .panel-heading-left .course-lesson-icon i {
	color: #f9a134;
}
section.content-section .course-section .course-panel-heading:hover .panel-heading-left .course-lesson-icon span {
	color: #0A5192;
}
section.content-section .course-section .course-panel-heading:hover, section.content-section .course-section .course-panel-heading.active {
	background-color: #f8f9fa;
}
section.content-section .course-section .panel-content {
	max-height: 0;
	overflow: hidden;
	background-color: #f8f9fa;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
section.content-section .course-section .panel-content .panel-content-inner {
	padding: 0 15px 20px 15px;
	font-size: 15px;
	color: #7d7e7f;
	line-height: 26px;
}
section.content-section .course-section .course-panel-heading.active + .panel-content {
	max-height: 106px;
}
/* Rules for sizing the icon. */
.material-icons.md-18 {
	font-size: 18px;
}
.material-icons.md-24 {
	font-size: 24px;
}
.material-icons.md-36 {
	font-size: 36px;
}
.material-icons.md-48 {
	font-size: 48px;
}
.material-icons.md-75 {
	font-size: 75px;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
	color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
	color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
	color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
	color: rgba(255, 255, 255, 0.3);
}
.video-container {
	height: 0;
	padding-bottom: 56.25%;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media (max-width:576px) {
	.icon {display:none;}
}


/* New CSS Added 2022/01/11 */

.banner-title {background: linear-gradient(to right, #2d3038, #51d9ff);}
.banner-title .widget__title {color:#fff; margin-bottom:0;}



@media only screen and (min-width: 60.063em){
  .container {max-width: 100%;}
}

.manager-title-search .selectize-dropdown {
 display: none !important;
}

.panorama-dashboard .analytics-labels {
display: none;
}

.panorama-client .large-8 .btn--alt {
	visibility: hidden; 
	position: relative;	
	content: 'This text replaces the original.'
}
	
.panorama-client .large-8 .btn--alt:after {
	visibility: visible; 
	content: 'Preview Courses - Not For Credit';
	position: absolute; top: 0;
	border: solid 0.8px #d0d0d0;
	background-color: #f8fafc;
	padding: 8px;
   	right: 0;
}

.panorama-client .manager-dashboard__support .btn--alt {
	border: solid 0.8px #d0d0d0;
	background-color: #f8fafc !important;
}

.panorama-client .large-8 .icon-help {
	display:none;
}
.panorama-client .header__actions .btn--alt {display:none;}

/* hide last active from Course screen*/

/*.sort-header--active-sort {visibility:hidden;}*/
.user .flex-table__col:nth-of-type(3), .users .flex-table__col:nth-of-type(3)
{visibility:hidden;}

/* ============================================================
   Dentlogics — Course Detail Page Redesign
   Paste into: Site > Site Builder > Custom Code (CSS)
   Scope: all rules prefixed with body.course-group so they
   apply ONLY to course detail pages (all panoramas).
   ============================================================ */

/* ---- 0. Page width: center content, cap full-bleed layout ---- */
body.course-group .course__detail__container {
  max-width: 1200px;
  margin: 0 auto;
  float: none;
}

/* ---- 1. Typography: replace broken GT Flexa serif fallback ---- */
body.course-group .course__detail__container,
body.course-group .course__detail__container p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

/* ---- 2. Header: eyebrow badge + stronger hierarchy ---- */
body.course-group .course__detail__header::before {
  content: "Course Overview";
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
body.course-group .course__detail__header h1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif !important;
  font-size: 30px !important;
  font-weight: 700;
  color: #1a1d24 !important;
  line-height: 1.25;
  margin-bottom: 10px;
}
body.course-group .course__detail__header p {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #4b5563 !important;
  max-width: 72ch;
}

/* ---- 3. Preview video: framed card + explicit preview labels ---- */
body.course-group .course__detail__video {
  max-width: 760px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  margin: 10px 0 4px;
}
body.course-group .course__detail__video::before {
  content: "\25B6\FE0E   Course Preview \2014 Sample Lesson";
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: #1e40af;
  padding: 10px 16px;
}
body.course-group .course__detail__video::after {
  content: "You're watching a short sample of this course. Enroll to access the full course.";
  display: block;
  font-size: 13px;
  color: #6b7280;
  background: #f9fafb;
  border-top: 1px solid #eef0f3;
  padding: 9px 16px;
}

/* ---- 4. Tabs: flat underline style ---- */
body.course-group ul.tabs {
  border-bottom: 2px solid #e5e7eb;
  background: transparent;
  margin-top: 16px;
}
body.course-group ul.tabs li.tab-title a {
  background: transparent !important;
  color: #6b7280 !important;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 4px !important;
  margin-right: 28px;
  border: none !important;
  border-bottom: 3px solid transparent !important;
}
body.course-group ul.tabs li.tab-title a span {
  font-size: 14px;
  font-weight: 600;
}
body.course-group ul.tabs li.tab-title.active a {
  background: transparent !important;
  color: #1a1d24 !important;
  border-bottom: 3px solid #1a1d24 !important;
}
body.course-group ul.tabs li.tab-title {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Suppress focus ring on mouse-clicked tabs; keep for keyboard users */
body.course-group ul.tabs li.tab-title a:focus:not(:focus-visible) {
  box-shadow: none !important;
  outline: none !important;
}
body.course-group .tabs-content {
  border: none !important;
  padding-top: 20px;
}

/* ---- 6. Fix legacy CE info blocks overflowing at narrow widths ----
   Older dl-ceinfo blocks use a fixed 380px right column; make both
   columns flexible so they always fit the card. Applies to every
   course's existing CE block without touching the embedded HTML. */
body.course-group .dl-ceinfo .grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
}
body.course-group .dl-ceinfo img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  body.course-group .dl-ceinfo .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 5. Sidebar: decision card with prominent CTA ---- */
body.course-group .course__detail__sidebar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 24px;
}
body.course-group .course__detail__sidebar::before {
  content: "Ready to go to the course?";
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #1a1d24;
  margin-bottom: 12px;
}
body.course-group .course__detail__sidebar .btn--primary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #ff7a1a, #f65a0e) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(246, 106, 20, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Animated arrow pointing at the button label ("Start Course" /
   "Resume Course"): a thick SVG arrow slides toward the text on a loop.
   TI's trailing upright icon is hidden so there's one clear arrow. */
body.course-group .course__detail__sidebar .btn--primary i {
  display: none;
}
body.course-group .course__detail__sidebar .btn--primary::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m13 6 6 6-6 6'/></svg>")
    center / contain no-repeat;
  animation: dl-cta-arrow-point 1.6s ease-in-out infinite;
}
@keyframes dl-cta-arrow-point {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}
/* Periodic shine sweep across the button */
body.course-group .course__detail__sidebar .btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46px;
  left: -70px;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transform: skewX(-20deg);
  animation: dl-cta-sheen 3.2s ease-in-out infinite;
}
@keyframes dl-cta-sheen {
  0% {
    left: -70px;
  }
  45%,
  100% {
    left: calc(100% + 70px);
  }
}
body.course-group .course__detail__sidebar .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(246, 106, 20, 0.55);
}
body.course-group .course__detail__sidebar .btn--primary:hover::before {
  animation: none;
  transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
  body.course-group .course__detail__sidebar .btn--primary::before {
    animation: none;
  }
  body.course-group .course__detail__sidebar .btn--primary::after {
    animation: none;
    display: none;
  }
}


/* ====================================================================
   COURSE ACTIVITIES PANEL - v2 design
   Styles the Learner Access widget that carries the class  dd-activities.
   The script in this same block only tags rows with data-dd-* attributes;
   everything visual is drawn here.

   Why every selector starts with  .dd-activities:not(#dd)
   Older copies of this panel's CSS may still be on the page (the old
   style block) and in the site-level custom CSS. The :not(#dd) part
   raises priority so this version always wins over them, in any order.

   TO RE-THEME: change the colors in the first rule below.
   ==================================================================== */

.dd-activities:not(#dd){
  --dd-brand:#2563eb;          /* buttons, active tab badge */
  --dd-brand-ink:#1e40af;      /* active tab text, button hover */
  --dd-brand-soft:#eef4ff;     /* active tab fill, header icon tile */
  --dd-brand-line:#c7d7fe;     /* row hover outline */
  --dd-ink:#0f172a;            /* titles */
  --dd-text:#334155;           /* body text */
  --dd-muted:#64748b;          /* secondary text */
  --dd-line:#e2e8f0;           /* hairlines */
  --dd-well:#f5f7fa;           /* list background */
  --dd-card:#ffffff;           /* panel and row surface */

  --dd-path-bg:#eef2ff;   --dd-path-ink:#3730a3;   --dd-path-ico:#4f46e5;    /* Learning Path tag */
  --dd-course-bg:#eef2ff; --dd-course-ink:#3730a3; --dd-course-ico:#4f46e5;  /* Course tag */
  --dd-other-bg:#f1f5f9;  --dd-other-ink:#334155;  --dd-other-ico:#64748b;   /* Video, Article, Event */

  --dd-due-bg:#fff4e6;    --dd-due-line:#fed7aa;   --dd-due-ink:#9a3412;  --dd-due-ico:#ea580c;   /* deadline, not urgent */
  --dd-soon-bg:#ffe4c4;   --dd-soon-line:#fb923c;  --dd-soon-ink:#7c2d12; --dd-soon-ico:#c2410c;  /* due within 14 days */
  --dd-over-bg:#fef2f2;   --dd-over-line:#fecaca;  --dd-over-ink:#b91c1c; --dd-over-ico:#dc2626;  /* overdue */

  /* Icons, drawn as shapes so nothing has to be hosted or loaded. */
  --dd-i-path:path(evenodd,"M0.75 12.25Q0.75 9.75 3.25 9.75Q5.34 9.75 5.68 11.5H10.25Q11.62 11.5 11.62 10.12Q11.62 8.75 10.25 8.75H5.75Q2.88 8.75 2.88 5.88Q2.88 3 5.75 3H10.32Q10.66 1.25 12.75 1.25Q15.25 1.25 15.25 3.75Q15.25 6.25 12.75 6.25Q10.66 6.25 10.32 4.5H5.75Q4.38 4.5 4.38 5.88Q4.38 7.25 5.75 7.25H10.25Q13.12 7.25 13.12 10.12Q13.12 13 10.25 13H5.68Q5.34 14.75 3.25 14.75Q0.75 14.75 0.75 12.25ZM2.25 12.25Q2.25 13.25 3.25 13.25Q4.25 13.25 4.25 12.25Q4.25 11.25 3.25 11.25Q2.25 11.25 2.25 12.25ZM11.75 3.75Q11.75 4.75 12.75 4.75Q13.75 4.75 13.75 3.75Q13.75 2.75 12.75 2.75Q11.75 2.75 11.75 3.75Z");
  --dd-i-course:path(evenodd,"M8 2.71Q8.85 1.72 10.52 1.75L13.5 1.75Q15 1.75 15 3.25V11.25Q15 12.75 13.5 12.75H10Q8.75 12.75 8.75 14Q8.75 14.31 8.53 14.53Q8.31 14.75 8 14.75Q7.69 14.75 7.47 14.53Q7.25 14.31 7.25 14Q7.25 12.75 6 12.75H2.5Q1 12.75 1 11.25V3.25Q1 1.75 2.5 1.75L5.48 1.75Q7.15 1.72 8 2.71ZM8.75 11.44Q9.28 11.25 10 11.25H13.5V3.25L10.48 3.25Q9.06 3.22 8.75 4.58ZM7.25 4.58Q6.94 3.22 5.52 3.25L2.5 3.25V11.25H6Q6.72 11.25 7.25 11.44Z");
  --dd-i-video:path(evenodd,"M3.75 2.25H12.25Q15 2.25 15 5V11Q15 13.75 12.25 13.75H3.75Q1 13.75 1 11V5Q1 2.25 3.75 2.25ZM3.75 3.75Q2.5 3.75 2.5 5V11Q2.5 12.25 3.75 12.25H12.25Q13.5 12.25 13.5 11V5Q13.5 3.75 12.25 3.75ZM6.6 5.95C6.6 5.81 6.67 5.67 6.8 5.6C6.92 5.53 7.08 5.53 7.2 5.6L10.5 7.65C10.63 7.72 10.71 7.85 10.71 8C10.71 8.15 10.63 8.28 10.5 8.35L7.2 10.4C7.08 10.47 6.92 10.47 6.8 10.4C6.67 10.33 6.6 10.19 6.6 10.05Z");
  --dd-i-article:path(evenodd,"M4.25 1H9.5Q9.81 1 10.03 1.22L13.28 4.47Q13.5 4.69 13.5 5V13.25Q13.5 15 11.75 15H4.25Q2.5 15 2.5 13.25V2.75Q2.5 1 4.25 1ZM4.25 2.5Q4 2.5 4 2.75V13.25Q4 13.5 4.25 13.5H11.75Q12 13.5 12 13.25V6H9.25Q8.94 6 8.72 5.78Q8.5 5.56 8.5 5.25V2.5ZM5.75 7.5H10.25Q10.56 7.5 10.78 7.72Q11 7.94 11 8.25Q11 8.56 10.78 8.78Q10.56 9 10.25 9H5.75Q5.44 9 5.22 8.78Q5 8.56 5 8.25Q5 7.94 5.22 7.72Q5.44 7.5 5.75 7.5ZM5.75 10.25H10.25Q10.56 10.25 10.78 10.47Q11 10.69 11 11Q11 11.31 10.78 11.53Q10.56 11.75 10.25 11.75H5.75Q5.44 11.75 5.22 11.53Q5 11.31 5 11Q5 10.69 5.22 10.47Q5.44 10.25 5.75 10.25ZM10 3.31V4.5H11.19Z");
  --dd-i-event:path(evenodd,"M3.25 3.25H8.75Q11.25 3.25 11.25 5.75V5.79L13.52 4.45Q14.1 4.12 14.68 4.45Q15.26 4.79 15.25 5.46L15.25 10.55Q15.26 11.21 14.68 11.55Q14.1 11.88 13.52 11.55L11.25 10.21V10.25Q11.25 12.75 8.75 12.75H3.25Q0.75 12.75 0.75 10.25V5.75Q0.75 3.25 3.25 3.25ZM3.25 4.75Q2.25 4.75 2.25 5.75V10.25Q2.25 11.25 3.25 11.25H8.75Q9.75 11.25 9.75 10.25V8.94Q9.75 8.89 9.75 8.84V7.16Q9.75 7.11 9.75 7.06V5.75Q9.75 4.75 8.75 4.75ZM11.25 8.47 13.75 9.94 13.75 6.06 11.25 7.53Z");
  --dd-i-calendar:path(evenodd,"M4 2.25H4.5V1.5Q4.5 1.19 4.72 0.97Q4.94 0.75 5.25 0.75Q5.56 0.75 5.78 0.97Q6 1.19 6 1.5V2.25H10V1.5Q10 1.19 10.22 0.97Q10.44 0.75 10.75 0.75Q11.06 0.75 11.28 0.97Q11.5 1.19 11.5 1.5V2.25H12Q14.75 2.25 14.75 5V12Q14.75 14.75 12 14.75H4Q1.25 14.75 1.25 12V5Q1.25 2.25 4 2.25ZM2.75 7.5V12Q2.75 13.25 4 13.25H12Q13.25 13.25 13.25 12V7.5ZM4 3.75Q2.75 3.75 2.75 5V6H13.25V5Q13.25 3.75 12 3.75H11.5V4.5Q11.5 4.81 11.28 5.03Q11.06 5.25 10.75 5.25Q10.44 5.25 10.22 5.03Q10 4.81 10 4.5V3.75H6V4.5Q6 4.81 5.78 5.03Q5.56 5.25 5.25 5.25Q4.94 5.25 4.72 5.03Q4.5 4.81 4.5 4.5V3.75Z");
  --dd-i-clock:path(evenodd,"M1.25 8Q1.25 5.2 3.23 3.23Q5.2 1.25 8 1.25Q10.8 1.25 12.77 3.23Q14.75 5.2 14.75 8Q14.75 10.8 12.77 12.77Q10.8 14.75 8 14.75Q5.2 14.75 3.23 12.77Q1.25 10.8 1.25 8ZM2.75 8Q2.75 10.17 4.29 11.71Q5.83 13.25 8 13.25Q10.17 13.25 11.71 11.71Q13.25 10.17 13.25 8Q13.25 5.83 11.71 4.29Q10.17 2.75 8 2.75Q5.83 2.75 4.29 4.29Q2.75 5.83 2.75 8ZM8.75 4.5V7.57L10.78 8.75Q11.05 8.91 11.13 9.21Q11.2 9.51 11.05 9.78Q10.89 10.05 10.59 10.13Q10.29 10.2 10.02 10.05L7.62 8.65Q7.25 8.43 7.25 8V4.5Q7.25 4.19 7.47 3.97Q7.69 3.75 8 3.75Q8.31 3.75 8.53 3.97Q8.75 4.19 8.75 4.5Z");
  --dd-i-alert:path(evenodd,"M6.48 2.23 6.48 2.23Q6.98 1.34 8 1.34Q9.02 1.34 9.52 2.23L14.72 11.38Q15.23 12.25 14.72 13.13Q14.21 14 13.2 14L2.8 14Q1.79 14 1.28 13.13Q0.77 12.25 1.28 11.37ZM7.78 2.97 2.58 12.13Q2.51 12.25 2.58 12.38Q2.65 12.5 2.8 12.5L13.2 12.5Q13.35 12.5 13.42 12.38Q13.49 12.25 13.42 12.12L8.22 2.97Q8.15 2.84 8 2.84Q7.85 2.84 7.78 2.97ZM8.75 6.25V9.15Q8.75 9.46 8.53 9.68Q8.31 9.9 8 9.9Q7.69 9.9 7.47 9.68Q7.25 9.46 7.25 9.15V6.25Q7.25 5.94 7.47 5.72Q7.69 5.5 8 5.5Q8.31 5.5 8.53 5.72Q8.75 5.94 8.75 6.25ZM7.15 11.3C7.15 10.83 7.53 10.45 8 10.45C8.47 10.45 8.85 10.83 8.85 11.3C8.85 11.77 8.47 12.15 8 12.15C7.53 12.15 7.15 11.77 7.15 11.3Z");
  --dd-i-chevron:path(evenodd,"M6.57 2.93 11.07 7.43Q11.3 7.67 11.3 8Q11.3 8.33 11.07 8.57L6.57 13.07Q6.33 13.3 6 13.3Q5.67 13.3 5.43 13.07Q5.2 12.83 5.2 12.5Q5.2 12.17 5.43 11.93L9.37 8L5.43 4.07Q5.2 3.83 5.2 3.5Q5.2 3.17 5.43 2.93Q5.67 2.7 6 2.7Q6.33 2.7 6.57 2.93Z");
  --dd-i-award:path(evenodd,"M3.25 6.25Q3.25 4.28 4.64 2.89Q6.03 1.5 8 1.5Q9.97 1.5 11.36 2.89Q12.75 4.28 12.75 6.25Q12.75 8.22 11.36 9.61Q11.28 9.69 11.19 9.77L11.99 14.12Q12.04 14.38 11.9 14.62Q11.75 14.89 11.45 14.97Q11.15 15.06 10.88 14.9L8 13.26L5.12 14.9Q4.88 15.04 4.62 14.99Q4.31 14.93 4.13 14.68Q3.96 14.42 4.01 14.12L4.81 9.77Q4.72 9.69 4.64 9.61Q3.25 8.22 3.25 6.25ZM4.75 6.25Q4.75 8.07 5.77 8.87Q6.03 8.93 6.19 9.14Q6.91 9.5 8 9.5Q9.09 9.5 9.81 9.14Q9.97 8.93 10.23 8.87Q11.25 8.07 11.25 6.25Q11.25 3 8 3Q4.75 3 4.75 6.25ZM6.17 10.65 5.78 12.8 7.63 11.75Q8 11.54 8.37 11.75L10.22 12.8L9.83 10.65Q8.99 11 8 11Q7.01 11 6.17 10.65Z");
  --dd-i-list:path(evenodd,"M8.5 9.75H13.75Q14.06 9.75 14.28 9.97Q14.5 10.19 14.5 10.5Q14.5 10.81 14.28 11.03Q14.06 11.25 13.75 11.25H8.5Q8.19 11.25 7.97 11.03Q7.75 10.81 7.75 10.5Q7.75 10.19 7.97 9.97Q8.19 9.75 8.5 9.75ZM8.5 3.75H13.75Q14.06 3.75 14.28 3.97Q14.5 4.19 14.5 4.5Q14.5 4.81 14.28 5.03Q14.06 5.25 13.75 5.25H8.5Q8.19 5.25 7.97 5.03Q7.75 4.81 7.75 4.5Q7.75 4.19 7.97 3.97Q8.19 3.75 8.5 3.75ZM2.78 3.87 3.52 4.61 5.29 2.6Q5.49 2.37 5.8 2.35Q6.11 2.33 6.35 2.54Q6.58 2.74 6.6 3.05Q6.62 3.36 6.41 3.6L4.11 6.2Q4.1 6.21 4.08 6.23Q3.86 6.45 3.55 6.45Q3.24 6.45 3.02 6.23L1.72 4.93Q1.5 4.71 1.5 4.4Q1.5 4.09 1.72 3.87Q1.94 3.65 2.25 3.65Q2.56 3.65 2.78 3.87ZM2.78 9.87 3.52 10.61 5.29 8.6Q5.49 8.37 5.8 8.35Q6.11 8.33 6.35 8.54Q6.58 8.74 6.6 9.05Q6.62 9.36 6.41 9.6L4.11 12.2Q4.1 12.21 4.08 12.23Q3.86 12.45 3.55 12.45Q3.24 12.45 3.02 12.23L1.72 10.93Q1.5 10.71 1.5 10.4Q1.5 10.09 1.72 9.87Q1.94 9.65 2.25 9.65Q2.56 9.65 2.78 9.87Z");
}

/* ---- Panel frame --------------------------------------------------- */
.dd-activities:not(#dd) .dashboard-access{position:relative;margin:0;padding:0;background:var(--dd-card);border:1px solid var(--dd-line);border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -16px rgba(15,23,42,.18);overflow:hidden;color:var(--dd-text)}

/* ---- Header: icon tile, title, collapse toggle on the right -------- */
.dd-activities:not(#dd) .dashboard-access__header{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:16px 16px 14px 20px;line-height:1.3;background:var(--dd-card) !important;background-image:none !important;border:0;border-radius:0}
.dd-activities:not(#dd) .dashboard-access__header::before{content:"";flex:none;width:34px;height:34px;border-radius:10px;background:var(--dd-brand-soft)}
.dd-activities:not(#dd) .dashboard-access__header>span{order:1;flex:1 1 auto;min-width:0;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.005em;color:var(--dd-ink)}
.dd-activities:not(#dd) .dashboard-access__header>span::before{content:"";position:absolute;left:29px;top:50%;width:16px;height:16px;margin-top:-9px;background:var(--dd-brand);clip-path:var(--dd-i-list)}
.dd-activities:not(#dd) .dashboard-access__header .button-expander{order:2;flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px !important;height:32px !important;margin:0 0 0 auto;padding:0 !important;border:0 !important;border-radius:9px;background:transparent !important;box-shadow:none !important;color:var(--dd-muted);line-height:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.dd-activities:not(#dd) .dashboard-access__header .button-expander:hover{background:#f1f5f9 !important;color:var(--dd-ink)}
.dd-activities:not(#dd) .dashboard-access__header .button-expander i{display:block;width:16px;height:16px;border-radius:0;background:none;box-shadow:none;color:inherit;font-size:0;line-height:0}
.dd-activities:not(#dd) .dashboard-access__header .button-expander i::before{content:"";display:block;width:16px;height:16px;line-height:0;background:currentColor;clip-path:var(--dd-i-chevron);transform:rotate(90deg);transition:transform .2s ease}
.dd-activities:not(#dd) .dashboard-access__header .button-expander[aria-expanded="true"] i::before{transform:rotate(-90deg)}
.dd-activities:not(#dd) .dashboard-access__header:not(.dashboard-access__header--expanded){padding-bottom:16px}
/* The toggle's click area covers the whole title bar, so a click anywhere on it opens or closes the panel. */
.dd-activities:not(#dd) .dashboard-access__header{cursor:pointer}
.dd-activities:not(#dd) .dashboard-access__header .button-expander{position:static}
.dd-activities:not(#dd) .dashboard-access__header .button-expander::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}
.dd-activities:not(#dd) .dashboard-access__header:hover .button-expander{background:#f1f5f9 !important;color:var(--dd-ink)}

/* ---- Tabs: soft pills that wrap cleanly on small screens ----------- */
.dd-activities:not(#dd) .dashboard-access-tabs{display:flex !important;flex-wrap:wrap;align-items:center;gap:4px;list-style:none;margin:0 !important;padding:0 16px 12px !important;font-size:14px;background:transparent !important;background-image:none !important;border:0 !important;border-bottom:1px solid var(--dd-line) !important;border-radius:0 !important}
.dd-activities:not(#dd) .dashboard-access-tabs[aria-hidden="true"]{display:none !important}
.dd-activities:not(#dd) .dashboard-access-tab{position:static;display:block;list-style:none;margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important}
.dd-activities:not(#dd) .dashboard-access-tab::after{content:none}
.dd-activities:not(#dd) .dashboard-access-tab .dashboard-access-tab-divider{display:none}
.dd-activities:not(#dd) .dashboard-access-tab>button{position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;margin:0 !important;padding:0 12px !important;border:0 !important;border-radius:9px !important;background:transparent !important;box-shadow:none !important;font-family:inherit;font-size:14px;font-weight:600;line-height:1;color:#475569;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.dd-activities:not(#dd) .dashboard-access-tab>button:hover{background:#f1f5f9 !important;color:var(--dd-ink)}
.dd-activities:not(#dd) .dashboard-access-tab--active>button,
.dd-activities:not(#dd) .dashboard-access-tab--active>button:hover{background:var(--dd-brand-soft) !important;color:var(--dd-brand-ink) !important;font-weight:600;box-shadow:none !important}
.dd-activities:not(#dd) .dashboard-access-tab--active>button::after{content:none}
.dd-activities:not(#dd) .dashboard-access-tab__label{display:inline}
.dd-activities:not(#dd) .dashboard-access-tab__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:20px;height:20px;margin:0;padding:0 6px;border:0;border-radius:999px;background:#e8edf3;color:#475569;font-size:11.5px;font-weight:700;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.dd-activities:not(#dd) .dashboard-access-tab--active .dashboard-access-tab__count{background:var(--dd-brand);color:#fff}
.dd-activities:not(#dd) .dashboard-access-tab__count[data-dd-empty]{display:none}

/* ---- List area ------------------------------------------------------ */
/* Only padding and color here. TI hides inactive tabs itself, so the
   display of these sections must never be touched. */
.dd-activities:not(#dd) .dashboard-access section[role="tabpanel"]{margin:0;padding:12px;background:var(--dd-well)}

/* ---- Empty tab -------------------------------------------------------- */
/* Shown only if a tab is still empty after a moment, so it never flashes
   while rows are loading. */
@keyframes dd-empty-in{from{opacity:0}to{opacity:1}}
.dd-activities:not(#dd) .dashboard-access section[role="tabpanel"][aria-hidden="false"]:not(:has(*:not(script)))::after{content:"Nothing to show here right now.";display:block;padding:16px 12px;text-align:center;font-size:13.5px;line-height:1.4;color:var(--dd-muted);animation:dd-empty-in .25s ease 1.2s both}

/* ---- Rows ------------------------------------------------------------ */
.dd-activities:not(#dd) .dashboard-access-list-item{position:relative;overflow:visible;margin:0 0 8px !important;padding:9px 10px 9px 16px !important;background:var(--dd-card) !important;border:1px solid #e7ecf3;border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.04);color:var(--dd-text);font-size:14px;transform:none;transition:border-color .16s ease,box-shadow .16s ease}
.dd-activities:not(#dd) .dashboard-access-list-item:last-of-type{margin-bottom:0 !important}
.dd-activities:not(#dd) .dashboard-access-list-item::before{content:none}
.dd-activities:not(#dd) .dashboard-access-list-item:hover{border-color:var(--dd-brand-line);box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 22px -12px rgba(37,99,235,.4);transform:none}

/* Row layout:  title | type tag (+ author) ........ deadline | button */
.dd-activities:not(#dd) .dashboard-access-list-item>.grid{display:grid !important;grid-template-columns:minmax(0,auto) minmax(min-content,1fr) auto auto !important;column-gap:12px !important;row-gap:8px !important;align-items:center;min-height:36px}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-4{grid-row:1;grid-column:1;min-width:0;padding:0}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3{grid-row:1;grid-column:2;display:flex;align-items:center;gap:10px;min-width:0;padding:0;overflow:hidden;white-space:nowrap;color:var(--dd-muted);font-size:13px;line-height:1.3}
/* thin divider between the title and its type tag */
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3::before{content:"";flex:none;width:1px;height:18px;margin:0 2px 0 0;background:#cfd8e3}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2:not(.col-start-11){grid-row:1;grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--dd-muted);font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-start-11{grid-row:1;grid-column:4;justify-self:end;padding:0;text-align:right;white-space:nowrap}

/* Title and the expand chevron */
.dd-activities:not(#dd) .dashboard-access-list-item-expander{display:flex;align-items:center;gap:8px;width:100%;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none;color:inherit;font-family:inherit;font-size:15px;line-height:1.35;text-align:left;cursor:pointer}
.dd-activities:not(#dd) .dashboard-access-list-item-expander i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:0 0 0 -8px;border-radius:8px;color:var(--dd-muted);font-size:0;line-height:0;transition:background-color .15s ease,color .15s ease}
.dd-activities:not(#dd) .dashboard-access-list-item-expander i::before{content:"";display:block;width:16px;height:16px;background:currentColor;clip-path:var(--dd-i-chevron)}
.dd-activities:not(#dd) .dashboard-access-list-item-expander i.icon-navigatedown::before{transform:rotate(90deg)}
.dd-activities:not(#dd) .dashboard-access-list-item-expander:hover i{background:var(--dd-brand-soft);color:var(--dd-brand)}
.dd-activities:not(#dd) .dashboard-access-list-item-expander__title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:650;line-height:1.35;letter-spacing:-.003em;color:var(--dd-ink)}
.dd-activities:not(#dd) .dashboard-access-list-item-expander__title a{color:inherit;text-decoration:none}
.dd-activities:not(#dd) .dashboard-access-list-item-expander__title a:hover{color:var(--dd-brand-ink)}

/* Type tag with icon. Course is the default look; the others switch on
   the data-dd-kind attribute the script sets on the row. */
.dd-activities:not(#dd) .dashboard-access-list-item .col-span-3>strong,
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-3>strong{flex:none;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:26px;margin:0;padding:0 10px 0 8px;border-radius:999px;background:var(--dd-course-bg);color:var(--dd-course-ink);font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1;text-transform:none;white-space:nowrap}
.dd-activities:not(#dd) .dashboard-access-list-item .col-span-3>strong::before,
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-3>strong::before{content:"";flex:none;width:16px;height:16px;background:var(--dd-course-ico);clip-path:var(--dd-i-course)}

.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="path"] .col-span-3>strong,
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="path"]>.row>.medium-3>strong{background:var(--dd-path-bg);color:var(--dd-path-ink)}
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="path"] .col-span-3>strong::before,
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="path"]>.row>.medium-3>strong::before{background:var(--dd-path-ico);clip-path:var(--dd-i-path)}

.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="video"] .col-span-3>strong,
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="article"] .col-span-3>strong,
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="event"] .col-span-3>strong,
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="video"]>.row>.medium-3>strong,
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="article"]>.row>.medium-3>strong,
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="event"]>.row>.medium-3>strong{background:var(--dd-other-bg);color:var(--dd-other-ink)}
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="video"] strong::before{background:var(--dd-other-ico);clip-path:var(--dd-i-video)}
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="article"] strong::before{background:var(--dd-other-ico);clip-path:var(--dd-i-article)}
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-kind="event"] strong::before{background:var(--dd-other-ico);clip-path:var(--dd-i-event)}

/* Learning Path rows are also recognised straight from their link, so the
   right tag shows on the very first paint, before the script tags the row. */
.dd-activities:not(#dd) .dashboard-access-list-item:has(a[href*="/learn/learning-path/"]) .col-span-3>strong{background:var(--dd-path-bg);color:var(--dd-path-ink)}
.dd-activities:not(#dd) .dashboard-access-list-item:has(a[href*="/learn/learning-path/"]) .col-span-3>strong::before{background:var(--dd-path-ico);clip-path:var(--dd-i-path)}

/* Author name after the tag. The script copies it into data-dd-by so the
   raw "| Name" text TI prints can be replaced with a clean version. */
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3 p{display:inline;margin:0}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3[data-dd-by]{font-size:0}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3[data-dd-by] p{display:none}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3[data-dd-by]::after{content:attr(data-dd-by);content:attr(data-dd-by) / "";flex:1 1 0;width:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;line-height:1.3;color:var(--dd-muted)}

/* Deadline. Plain until the script tags it, then a chip whose color and
   icon follow urgency:  ok (calendar), soon (clock), over (warning). */
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2:not(.col-start-11)::before{content:none}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2:not(.col-start-11)::after{content:attr(data-dd-text);display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font-size:inherit;font-weight:inherit;white-space:nowrap}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2:not(.col-start-11) div{display:inline;margin:0;padding:0;color:inherit}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2:not(.col-start-11) strong{font-weight:700;color:inherit}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2[data-dd-chip]{height:28px;padding:0 11px 0 8px;border:1px solid var(--dd-due-line);border-radius:999px;background:var(--dd-due-bg);color:var(--dd-due-ink)}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2[data-dd-chip]::before{content:"";flex:none;width:16px;height:16px;margin:0;background:var(--dd-due-ico);clip-path:var(--dd-i-calendar)}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2[data-dd-chip] br{display:none}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2[data-dd-chip="soon"]{border-color:var(--dd-soon-line);background:var(--dd-soon-bg);color:var(--dd-soon-ink)}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2[data-dd-chip="soon"]::before{background:var(--dd-soon-ico);clip-path:var(--dd-i-clock)}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2[data-dd-chip="over"]{border-color:var(--dd-over-line);background:var(--dd-over-bg);color:var(--dd-over-ink)}
.dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2[data-dd-chip="over"]::before{background:var(--dd-over-ico);clip-path:var(--dd-i-alert)}

/* ---- Buttons --------------------------------------------------------- */
.dd-activities:not(#dd) .dashboard-access .btn.btn--primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:34px;min-width:96px;margin:0;padding:0 14px;border:1px solid var(--dd-brand) !important;border-radius:9px;background:var(--dd-brand) !important;color:#fff !important;font-family:inherit;font-size:13px;font-weight:700;line-height:1;letter-spacing:.01em;text-align:center;text-decoration:none;text-transform:none;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.14);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.dd-activities:not(#dd) .dashboard-access-list-item:hover .btn.btn--primary{background:var(--dd-brand) !important;border-color:var(--dd-brand) !important}
.dd-activities:not(#dd) .dashboard-access-list-item .btn.btn--primary:hover,
.dd-activities:not(#dd) .dashboard-access .btn.btn--primary:hover{background:var(--dd-brand-ink) !important;border-color:var(--dd-brand-ink) !important;box-shadow:0 4px 10px -4px rgba(30,64,175,.55)}
.dd-activities:not(#dd) .dashboard-access .btn.btn--primary i{font-size:14px;line-height:1}
.dd-activities:not(#dd) .dashboard-access .btn.btn--alt{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;margin:0;padding:0 12px;border:1px solid var(--dd-line) !important;border-radius:8px;background:#fff !important;color:var(--dd-ink) !important;font-family:inherit;font-size:13px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .15s ease,background-color .15s ease}
.dd-activities:not(#dd) .dashboard-access .btn.btn--alt:hover{border-color:#cbd5e1 !important;background:#f8fafc !important}
.dd-activities:not(#dd) .dashboard-access .btn:focus-visible,
.dd-activities:not(#dd) .dashboard-access button:focus-visible,
.dd-activities:not(#dd) .dashboard-access a:focus-visible{outline:2px solid var(--dd-brand);outline-offset:2px}
.dd-activities:not(#dd) .dashboard-access-list-item .col-start-11 br{display:none}
.dd-activities:not(#dd) .dashboard-access-list-item .col-start-11 small{display:block;margin:4px 0 0;font-size:11.5px;line-height:1.3;color:var(--dd-muted);white-space:normal}

/* ---- Earned Certificates rows (TI uses older markup for these) ------ */
.dd-activities:not(#dd) .dashboard-access-list-item>.row{display:grid !important;grid-template-columns:minmax(0,auto) minmax(min-content,1fr) auto;column-gap:12px;row-gap:8px;align-items:center;width:auto;max-width:none;min-height:36px;margin:0}
.dd-activities:not(#dd) .dashboard-access-list-item>.row::before,
.dd-activities:not(#dd) .dashboard-access-list-item>.row::after,
.dd-activities:not(#dd) .dashboard-access-list-item>.row .row::before,
.dd-activities:not(#dd) .dashboard-access-list-item>.row .row::after{content:none;display:none}
.dd-activities:not(#dd) .dashboard-access-list-item>.row .columns{float:none;width:auto;min-width:0;padding:0}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-5{grid-column:1}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-3{grid-column:2;display:flex;align-items:center}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4{grid-column:3;justify-self:end;text-align:right}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4>.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;max-width:none;margin:0}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4>.row>.columns:empty{display:none}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4 br{display:none}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4 small{display:block;margin:4px 0 0;font-size:11.5px;line-height:1.3;color:var(--dd-muted)}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4 a.btn:not(.btn--primary){display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;margin:0;padding:0 12px;border-radius:9px;font-family:inherit;font-size:13px;font-weight:700;line-height:1;white-space:nowrap}
/* Certificates are always for courses, so the type tag is dropped and a certificate icon leads the row instead */
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-3{display:none}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-5{display:flex;align-items:center;gap:10px}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-5::before{content:"";flex:none;width:16px;height:16px;background:#d97706;clip-path:var(--dd-i-award)}
/* "Upload Third-Party Certificate" becomes a quiet secondary action */
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-12{grid-column:1 / -1}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-12>.btn.btn--primary{height:34px;border:1px dashed #b6c6e6 !important;background:#fff !important;color:var(--dd-brand-ink) !important;box-shadow:none}
.dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-12>.btn.btn--primary:hover{border-color:var(--dd-brand) !important;background:var(--dd-brand-soft) !important;color:var(--dd-brand-ink) !important;box-shadow:none}

/* ---- Expanded row detail ---------------------------------------------- */
.dd-activities:not(#dd) .dashboard-access-list-item-expansion{position:relative;margin:10px 0 1px -6px;padding:16px;background:#f8fafc;border:1px solid #edf1f6;border-radius:10px;box-shadow:none}
.dd-activities:not(#dd) .dashboard-access-list-item-expansion img{border-radius:8px}
.dd-activities:not(#dd) .dashboard-access-list-item__description,
.dd-activities:not(#dd) .dashboard-access-list-item__description p{margin:0;font-size:14px;line-height:1.55;color:var(--dd-text)}
.dd-activities:not(#dd) .dashboard-access-list-item__description{margin-bottom:12px}
.dd-activities:not(#dd) .user-engagement-stat__label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dd-muted)}
.dd-activities:not(#dd) .user-engagement-stat__value-container{font-weight:700;color:var(--dd-ink)}
.dd-activities:not(#dd) .dashboard-access-list-item-expansion .small-12{margin-top:12px}

/* ---- Urgency accents on the row itself -------------------------------- */
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-urgency="soon"]{border-color:#f5e3a3}
.dd-activities:not(#dd) .dashboard-access-list-item[data-dd-urgency="over"]{border-color:#f6c8c8}

/* ---- Narrower panels (tablet, phone, or a narrow dashboard column) ---- */
@media (max-width:900px){
  /* Title on its own line. Tag, deadline and button share the next line and wrap only if they must, so nothing is ever cut off. */
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid{display:flex !important;flex-wrap:wrap;align-items:center;column-gap:12px !important;row-gap:8px !important}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-4{order:1;flex:0 0 100%;min-width:0}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3{order:2;flex:1 1 auto;min-width:0}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3::before{content:none}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-2:not(.col-start-11){order:3;flex:0 0 auto}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-start-11{order:4;flex:0 0 auto;margin-left:auto}
  .dd-activities:not(#dd) .dashboard-access-list-item-expander{align-items:flex-start}
  .dd-activities:not(#dd) .dashboard-access-list-item-expander i{margin-top:-3px}
  .dd-activities:not(#dd) .dashboard-access-list-item-expander__title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row{grid-template-columns:minmax(0,1fr) auto}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-5{grid-column:1 / -1}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-5 .dashboard-access-list-item-expander__title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-3{grid-column:1}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4{grid-column:2}
}
@media (max-width:600px){
  .dd-activities:not(#dd) .dashboard-access__header{padding:14px 12px 12px 14px}
  .dd-activities:not(#dd) .dashboard-access__header>span::before{left:23px}
  .dd-activities:not(#dd) .dashboard-access-tabs{padding:0 10px 10px !important}
  .dd-activities:not(#dd) .dashboard-access section[role="tabpanel"]{padding:8px}
  .dd-activities:not(#dd) .dashboard-access-list-item{padding:12px 12px 12px 14px !important}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid{column-gap:8px !important;row-gap:10px !important}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3{flex:0 1 auto}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-span-3[data-dd-by]::after{display:none}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-start-11{flex:0 0 100%;margin-left:0}
  .dd-activities:not(#dd) .dashboard-access-list-item>.grid>.col-start-11 .btn.btn--primary{display:flex;width:100%;height:40px;font-size:14px}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row{grid-template-columns:minmax(0,1fr)}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-5,
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-3,
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4{grid-column:1;justify-self:stretch;text-align:left}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4>.row{justify-content:stretch}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4>.row>.columns{flex:1 1 auto}
  .dd-activities:not(#dd) .dashboard-access-list-item>.row>.medium-4 .btn{display:flex;width:100%;height:40px}
  .dd-activities:not(#dd) .dashboard-access-list-item-expansion{margin-left:0;padding:12px}
}

@media (prefers-reduced-motion:reduce){
  .dd-activities:not(#dd) *,
  .dd-activities:not(#dd) *::before{transition:none !important}
}


/* ====================================================================
   CATALOG - v1 design
   Styles the Catalog widget that carries the class  dd-catalog.
   Pure CSS, no script. To re-theme, change the colors in the first rule.
   ==================================================================== */
.dd-catalog:not(#dd){
  --dc-brand:#2563eb; --dc-brand-ink:#1e40af; --dc-brand-soft:#eef4ff; --dc-brand-line:#c7d7fe;
  --dc-ink:#0f172a; --dc-text:#334155; --dc-muted:#64748b; --dc-line:#e2e8f0; --dc-soft:#f5f7fa;
  --dc-tag-bg:#eef2ff; --dc-tag-ink:#3730a3; --dc-tag-ico:#4f46e5;
  --dc-i-course:path(evenodd,"M8 2.71Q8.85 1.72 10.52 1.75L13.5 1.75Q15 1.75 15 3.25V11.25Q15 12.75 13.5 12.75H10Q8.75 12.75 8.75 14Q8.75 14.31 8.53 14.53Q8.31 14.75 8 14.75Q7.69 14.75 7.47 14.53Q7.25 14.31 7.25 14Q7.25 12.75 6 12.75H2.5Q1 12.75 1 11.25V3.25Q1 1.75 2.5 1.75L5.48 1.75Q7.15 1.72 8 2.71ZM8.75 11.44Q9.28 11.25 10 11.25H13.5V3.25L10.48 3.25Q9.06 3.22 8.75 4.58ZM7.25 4.58Q6.94 3.22 5.52 3.25L2.5 3.25V11.25H6Q6.72 11.25 7.25 11.44Z");
  --dc-i-path:path(evenodd,"M0.75 12.25Q0.75 9.75 3.25 9.75Q5.34 9.75 5.68 11.5H10.25Q11.62 11.5 11.62 10.12Q11.62 8.75 10.25 8.75H5.75Q2.88 8.75 2.88 5.88Q2.88 3 5.75 3H10.32Q10.66 1.25 12.75 1.25Q15.25 1.25 15.25 3.75Q15.25 6.25 12.75 6.25Q10.66 6.25 10.32 4.5H5.75Q4.38 4.5 4.38 5.88Q4.38 7.25 5.75 7.25H10.25Q13.12 7.25 13.12 10.12Q13.12 13 10.25 13H5.68Q5.34 14.75 3.25 14.75Q0.75 14.75 0.75 12.25ZM2.25 12.25Q2.25 13.25 3.25 13.25Q4.25 13.25 4.25 12.25Q4.25 11.25 3.25 11.25Q2.25 11.25 2.25 12.25ZM11.75 3.75Q11.75 4.75 12.75 4.75Q13.75 4.75 13.75 3.75Q13.75 2.75 12.75 2.75Q11.75 2.75 11.75 3.75Z");
  --dc-i-chevron:path(evenodd,"M6.57 2.93 11.07 7.43Q11.3 7.67 11.3 8Q11.3 8.33 11.07 8.57L6.57 13.07Q6.33 13.3 6 13.3Q5.67 13.3 5.43 13.07Q5.2 12.83 5.2 12.5Q5.2 12.17 5.43 11.93L9.37 8L5.43 4.07Q5.2 3.83 5.2 3.5Q5.2 3.17 5.43 2.93Q5.67 2.7 6 2.7Q6.33 2.7 6.57 2.93Z");
}

/* ---- Search / filter / sort bar ---- */
.dd-catalog:not(#dd) .catalog-search-bar{display:block;height:auto;margin:0 0 20px}
.dd-catalog:not(#dd) .catalog-filters{display:flex;align-items:stretch;height:52px;background:#fff;border:1px solid var(--dc-line);border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);overflow:hidden}
.dd-catalog:not(#dd) .catalog-filters>.columns{float:none;height:auto;margin:0;padding:0}
.dd-catalog:not(#dd) .catalog-filters__search{flex:1 1 260px;width:auto;background:#fff}
.dd-catalog:not(#dd) .catalog-filters__search .catalog-search{position:relative;height:100%}
.dd-catalog:not(#dd) .catalog-filters__search .catalog-search input{height:100%;padding:0 52px 0 18px;border:0;background:transparent;font-size:15px;color:var(--dc-ink);box-shadow:none}
.dd-catalog:not(#dd) .catalog-search input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--dc-brand-line)}
.dd-catalog:not(#dd) .catalog-search__button{display:flex;align-items:center;justify-content:center;width:48px;padding:0;background:transparent}
.dd-catalog:not(#dd) .catalog-search__button i{display:block;padding:0;font-size:20px;color:var(--dc-brand)}
.dd-catalog:not(#dd) .catalog-filters__selections{flex:2 1 auto;width:auto;border-left:1px solid var(--dc-line)}
.dd-catalog:not(#dd) .catalog-filters__sort{flex:0 0 auto;width:auto;min-width:190px;background:#fff;border-left:1px solid var(--dc-line)}
.dd-catalog:not(#dd) .catalog-filters__select{height:100%;border:0;font-size:14px;font-weight:600;color:var(--dc-text)}
.dd-catalog:not(#dd) .catalog-active-filter{padding:14px 0}
.dd-catalog:not(#dd) .catalog-active-filter__remove{color:var(--dc-brand)}

/* ---- Filter sidebar ---- */
.dd-catalog:not(#dd) .catalog-aggregation{margin:0 0 8px;padding:0;background:#fff;border:1px solid var(--dc-line);border-radius:12px;overflow:hidden;transition:border-color .15s ease}
.dd-catalog:not(#dd) .catalog-aggregation:hover{border-color:var(--dc-brand-line)}
.dd-catalog:not(#dd) .catalog-aggregation--expanded{margin-bottom:8px;background:#fff;border:1px solid var(--dc-brand-line)}
.dd-catalog:not(#dd) .catalog-aggregation__header{display:block;width:100%;height:auto;margin:0 !important;padding:13px 14px !important;line-height:1.3;color:var(--dc-ink);text-align:left}
.dd-catalog:not(#dd) .catalog-aggregation--expanded .catalog-aggregation__header{background:var(--dc-brand-soft) !important}
.dd-catalog:not(#dd) .catalog-aggregation__header>.row{display:flex;align-items:center;gap:10px;margin:0}
.dd-catalog:not(#dd) .catalog-aggregation__header>.row::before,.dd-catalog:not(#dd) .catalog-aggregation__header>.row::after{content:none}
.dd-catalog:not(#dd) .catalog-aggregation__header .column{float:none;width:auto;padding:0}
.dd-catalog:not(#dd) .catalog-aggregation__expander{display:block;width:16px;height:16px;font-size:0;line-height:0}
.dd-catalog:not(#dd) .catalog-aggregation__expander i{display:block;width:16px;height:16px;font-size:0;color:var(--dc-muted)}
.dd-catalog:not(#dd) .catalog-aggregation__expander i::before{content:"";display:block;width:16px;height:16px;background:currentColor;clip-path:var(--dc-i-chevron)}
.dd-catalog:not(#dd) .catalog-aggregation__expander i.icon-navigatedown::before{transform:rotate(90deg)}
.dd-catalog:not(#dd) .catalog-aggregation__header--label{display:block;padding:0;font-size:15px;font-weight:700;line-height:1.3;color:var(--dc-ink)}
.dd-catalog:not(#dd) .catalog-aggregation ul{margin:0;padding:8px 8px 12px 38px}
.dd-catalog:not(#dd) .catalog-aggregation>ul>li{margin:0}
.dd-catalog:not(#dd) .btn.catalog-aggregation__value{display:inline-block;margin:0;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;color:var(--dc-text);text-align:left;transition:background-color .15s ease,color .15s ease}
.dd-catalog:not(#dd) .btn.catalog-aggregation__value:hover{background:#f1f5f9;color:var(--dc-ink)}
.dd-catalog:not(#dd) .btn.catalog-aggregation__value.active{background:var(--dc-brand-soft);color:var(--dc-brand-ink);font-weight:700}
.dd-catalog:not(#dd) .catalog-aggregation__count{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:#eef2f6;font-size:11.5px;font-weight:700;color:#475569}

/* ---- Course cards ---- */
.dd-catalog:not(#dd) li:has(>.catalog-grid-item){display:flex}
.dd-catalog:not(#dd) .catalog-grid-item{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--dc-line);border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);overflow:hidden;color:var(--dc-text);text-decoration:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.dd-catalog:not(#dd) .catalog-grid-item:hover{border-color:var(--dc-brand-line);box-shadow:0 14px 28px -16px rgba(37,99,235,.45);transform:translateY(-2px)}
.dd-catalog:not(#dd) .catalog-grid-item:focus-visible{outline:2px solid var(--dc-brand);outline-offset:2px}
.dd-catalog:not(#dd) .catalog-grid-item>.row{flex:1 1 auto;display:flex;flex-direction:column;width:auto;max-width:none;margin:0}
.dd-catalog:not(#dd) .catalog-grid-item>.row::before,.dd-catalog:not(#dd) .catalog-grid-item>.row::after{content:none}
.dd-catalog:not(#dd) .catalog-grid-item>.row>.column{float:none;width:100%;padding:0}
.dd-catalog:not(#dd) .catalog-grid-item>.row>.column:last-child{flex:1 1 auto;display:flex}
.dd-catalog:not(#dd) .catalog-grid-item__asset-container{padding:0;background:var(--dc-soft)}
.dd-catalog:not(#dd) .catalog-grid-item__asset{display:block;width:100%;aspect-ratio:750 / 361;object-fit:cover}
.dd-catalog:not(#dd) .catalog-grid-item__body{flex:1 1 auto;display:flex;flex-direction:column;width:100%;padding:16px 16px 14px}
.dd-catalog:not(#dd) .catalog-grid-item__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;margin:0 0 10px;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.005em;color:var(--dc-ink)}
.dd-catalog:not(#dd) .catalog-grid-item__start-date{font-size:12.5px;font-weight:500;color:var(--dc-muted)}
/* Type tag with icon, provider beside it */
.dd-catalog:not(#dd) .catalog-grid-item__source{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 4px;font-size:13px;color:var(--dc-muted)}
.dd-catalog:not(#dd) .catalog-grid-item__source strong{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:999px;background:var(--dc-tag-bg);font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1;color:var(--dc-tag-ink);white-space:nowrap}
.dd-catalog:not(#dd) .catalog-grid-item__source strong::before{content:"";flex:none;width:16px;height:16px;background:var(--dc-tag-ico);clip-path:var(--dc-i-course)}
.dd-catalog:not(#dd) [href*="learning-path"] .catalog-grid-item__source strong::before,
.dd-catalog:not(#dd) .catalog-grid-item:has([href*="learning-path"]) .catalog-grid-item__source strong::before,
.dd-catalog:not(#dd) li:has([href*="learning-path"]) .catalog-grid-item__source strong::before{clip-path:var(--dc-i-path)}
.dd-catalog:not(#dd) .featured-content-item__authors{margin:4px 0 0;font-size:13px;font-weight:500;color:var(--dc-muted)}
.dd-catalog:not(#dd) .catalog-grid-item__description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 0;padding:0;font-size:13.5px;line-height:1.5;color:var(--dc-text)}
.dd-catalog:not(#dd) .catalog-grid-item__hr{margin:auto 0 0;border:0;height:0}
.dd-catalog:not(#dd) .catalog-grid-item__cta-container{margin-top:14px;padding-top:12px;border-top:1px solid #edf1f6;font-size:14px;line-height:1.2}
.dd-catalog:not(#dd) .catalog-grid-item__cta-container .btn.btn--primary{float:none;display:flex;align-items:center;justify-content:center;gap:6px;height:36px;margin:0;padding:0 14px;border:1px solid var(--dc-brand-line) !important;border-radius:9px;background:var(--dc-brand-soft) !important;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--dc-brand-ink) !important;text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.dd-catalog:not(#dd) .catalog-grid-item__cta-container .btn.btn--primary::after{content:"";width:14px;height:16px;background:currentColor;clip-path:var(--dc-i-chevron)}
.dd-catalog:not(#dd) .catalog-grid-item:hover .catalog-grid-item__cta-container .btn.btn--primary,.dd-catalog:not(#dd) .catalog-grid-item__cta-container .btn.btn--primary:hover{background:var(--dc-brand) !important;background-image:none !important;border-color:var(--dc-brand) !important;color:#fff !important}
.dd-catalog:not(#dd) .catalog-grid-item__text-cta{font-size:13px;color:var(--dc-muted)}
.dd-catalog:not(#dd) .catalog-grid-item__price{font-size:15px;font-weight:700;color:var(--dc-ink)}
.dd-catalog:not(#dd) .catalog-grid-item__completed-container{border-radius:0}

@media (max-width:640px){
  .dd-catalog:not(#dd) .catalog-filters{flex-wrap:wrap;height:auto}
  .dd-catalog:not(#dd) .catalog-filters__search{flex:1 1 100%;height:48px}
  .dd-catalog:not(#dd) .catalog-filters__sort{flex:1 1 100%;height:46px;border-left:0;border-top:1px solid var(--dc-line)}
}
@media (prefers-reduced-motion:reduce){ .dd-catalog:not(#dd) .catalog-grid-item{transition:none} .dd-catalog:not(#dd) .catalog-grid-item:hover{transform:none} }