@import url(https://designtools.ciditools.com/css/themes.css);
@import url(https://designtools.ciditools.com/css/inst_theme_overrides.css);
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=PT+Serif:wght@400;700&family=Arvo:wght@400;700&display=swap');
/*! DESKTOP DT-V2 2026-10-15 Release  */
/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */
/*** Legacy Sidebar ***/
/* For Main CSS file */
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/* Institution color customizations */
/*** New Sidebar ***/
/* For Main CSS files */
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/
/*

/* Default Colors set in base/_colors.css  */
/*

Cidi Labs Default for Reference
:root {
    --dt-color-primary: #2f76bf;
    --dt-color-primary-contrast: white;
    --dt-color-primary-dark-text: #003366;
    --dt-color-secondary: #bbd147;
    --dt-color-secondary-contrast: black;
    --dt-color-secondary-dark-text: #819126;
    --dt-color-accent: #922E1F;
    --dt-color-accent-contrast: white;
    --dt-color-accent-dark-text: #922E1F;
    --dt-color-graybg: #E6E6E6;
    --dt-color-graybg-contrast: #000000;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: black;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: black;
    --dt-color-white-dark-text: #707070;
} */
/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/
/*********************************************************************/
/*! BOSTON COLLEGE CANVAS 1 CUSTOM CSS *************************************/
/*********************************************************************/
/* ===== Fixing new Canvas page padding === */
@media only screen and (min-width: 992px) {
    
    .pages.show.home .show-content #kl_wrapper_3 {
        margin-top: 0;
    }
    .pages.show .show-content {
        padding:0 !important;
        clear:both; 
    }
}
/**********************************************************************/
/*********************** CDIL CUSTOMIZATIONS ***************************/
/*********************************************************************/
/*****    SHARED THEME STYLES    *****************************************/
/* removes right side gap */
#kl_wrapper, #kl_wrapper_3, .kl_wrapper, .kl_wrapper_parent {
  max-width: 1125px;
}
/* on small screens */
@media (max-width: 400px) {
  #kl_wrapper_3 {
    padding: 15px;
  }
}
/* default body link color */
#kl_wrapper_3 a {
  color: var(--dt-link-on-white);
}
/* hide deprecated module navigation sidebar  */
.kl_book_nav,
.kl_book_trigger {
  display:none; 
}
/* height 0 to keep this from adding extra pdding when custom css is on */
#kl_custom_css {
  height:0;
}
/* float right text/number by default */
#kl_wrapper_3 #kl_banner_left {
  float:right;
}
/* constrain video width on narrow screens */
@media (max-width: 400px) {
  #kl_wrapper_3 iframe[allowfullscreen="allowfullscreen"] {
    width: 400px !important;
    height: 225px !important; } 
}
#kl_wrapper_3.kl_generic h3:not(.ui-state-default).kl_message_heading i {
  background:none;
}
#kl_wrapper_3 .video-placeholder {
  width: 720px;
  height: 405px;
  background-color: #222;
  color: #fff;
  text-align: center;
  padding-top: 160px;
  font-size: 2em;
}
/* add some margin after the last div on a page */
#kl_wrapper_3>div:last-of-type {
  margin-bottom: 20px;
}
/* lists*/
#kl_wrapper_3 h3 + :is(ol, ul) {
  padding-top: .5rem;
}
#kl_wrapper_3 li,
.dp-wrapper li {
  padding-bottom: .25rem;
}
/* === DT-V2 Styles === */
/* Keep custom css div from adding space above the banner */
#dpCustomCss {
  height:0;
}
/* Issue with conflicting info contrast colors */
#dp-tools-wrapper .dp-tabs-footer>.nav-tabs a.nav-link.footer-tab-info.active,
#dp-tools-wrapper .dp-tabs-footer>.nav-tabs a.nav-link.footer-tab-info:hover {
  color: #000 !important
}
/* giving DT sidebar more BC colors */
#dp-tools-wrapper .sidebar-nav-wrapper,
#dp-tools-wrapper .sidebar-panel h4.panel-heading {
  background-color: #234673;
}
#dp-tools-wrapper .footer-notifications {
  border: 3px solid var(--warning);
}
#dp-tools-wrapper .footer-notifications .footer-button {
  background-color: var(--warning);
  color: var(--warning-contrast);
}
#dp-tools-wrapper #upgradeAllItems {
  background-color: var(--warning);
  color: var(--warning-contrast);
}
/* overridding DT-V2 defaults */
.dp-wrapper .dp-content-block {
  padding-bottom:0;
  margin-bottom:0;
}
.dp-wrapper p {
  margin-bottom: var(--s-3);
  margin-top: var(--s-3);
  padding-bottom: 0;
}
/* lists */
.dp-wrapper ol, .dp-wrapper ul {
  padding-left: 0;
}
/* --- Testing Styles --- */
/* #kl_wrapper_3.testing-page.home #kl_banner{
    margin-bottom: 1rem;
}

#kl_wrapper_3.testing-page #kl_module_navigation_block {
  margin-top: 3rem;
} */
/* Separator for sections in single-page testing pages */
.testing-section {
  background-color: #333 !important;
  color: #fff !important;
  margin: 2rem 0 1rem 0!important;
  padding: 0 1rem;
}
#kl_wrapper_3.testing-page.home #kl_banner, 
.dp-wrapper.testing-page.home .dp-header,
#kl_wrapper_3.testing-pagehome #kl_banner_image, 
.dp-wrapper.testing-page.home .dp-banner-image {
  max-width: 840px;
}
:root {
  /* Override DesignPlus defaults  */ 
  --dt-color-primary: #56060F !important; 
  --dt-color-primary-contrast: white;
  --dt-color-primary-dark-text: #56060F;
  --dt-color-secondary: #6F6259 !important;
  --dt-color-secondary-contrast: #ffffff;
  --dt-color-secondary-dark-text: #6F6259 !important;
  --dt-color-accent: #8A100B !important; 
  --dt-color-accent-contrast: white !important;
  --dt-color-accent-dark-text: #8A100B !important;
  --dt-color-gray: #CCCCCC !important;
  --dt-color-gray-contrast: black !important;
  --dt-color-gray-dark-text: #636363 !important;
  --dt-color-white: #FFFFFF !important;
  --dt-color-white-contrast: black !important;
  --dt-color-white-dark-text: #707070 !important;

  /* Override Default DesignPlus Links */ 
  --bs-link-color: #56060F !important; 
  --bs-link-hover-color: #8A100B !important; 


  /* Additional Custom Neutral Colors */ 
  --dt-neutral-dark: #555; 
  --dt-neutral-medium: #656565; 
  --dt-neutral-light: #ccc;

 /* --red: #dc3545;
  --yellow: #f1c40f;
  --green: #28a745;
  --cyan: #17a2b8; 
  --gray-dark: #343a40;
  */

  /* Overriding other DT defaults for primary and secondary  */ 
--primary: var(--dt-color-primary) !important;
--primary-contrast: var(--dt-color-primary-contrast) !important;
--primary-alert-link: var(--dt-color-primary) !important;
--primary-text: var(--dt-color-primary) !important;
--primary-border: var(--dt-color-primary) !important;
--primary-hover-dark: #666;
--primary-hover-light: #565656;

--secondary: var(--dt-color-secondary) !important;
--secondary-contrast: var(--dt-color-secondary-contrast) !important;
/* --secondary-alert-link: #202326;
--secondary-text: #383d41;
--secondary-border: #545b62;
--secondary-hover-dark: #5a6268;
--secondary-hover-light: #c8cbcf;
--secondary-bg-light: #d6d8db;
--secondary-bg-lighter: #e2e3e5; */


/* Override  Default DesignPlus Alerts */

--info: #234673 !important; 
--success: #3f5c3d !important; 
--warning: #f1c40f !important; 
--danger: #801D16 !important; 

--bs-info: var(--info) !important;
--bs-success: var(--success) !important;
--bs-warning: var(--warning) !important;
--bs-danger: var(--danger) !important;

--info-contrast: #fff !important;
--info-text: var(--bs-info) !important;
--info-alert-link: #062c33;
--info-border: var(--bs-info) !important;
--info-hover-dark: #138496;
--info-hover-light: #abdde5;
--info-bg-light: #bee5eb;
--info-bg-lighter: #d1ecf1;

--success-contrast: #FFFFFF;
--success-text: var(--success) !important;
--success-border: var(--success) !important;

--warning-contrast: #000;

--danger-contrast: #FFFFFF;
--danger-text: var(--danger) !important;


}
/* Previous Base Colors for Reference 
:root {

--dt-primary: #56060F;
--dt-secondary: #8A100B;
--dt-bright: #b30000; 
--dt-neutral-dark: #555; 
--dt-neutral-medium: #656565; 
--dt-neutral-light: #ccc;

--dt-link-on-white: #56060F; 
--dt-contrast-on-primary: #fff; 
--dt-color-secondary-contrast: #fff;

--dt-info: #234673;
--dt-success: #3f5c3d;
--dt-warning: #b25819;
--dt-danger: #801D16;

}  
*/
/* Default DesignPlus colors for reference (editor.css line 777)

:root {
    --dt-color-primary: #2f76bf;
    --dt-color-primary-contrast: white;
    --dt-color-primary-dark-text: #003366;
    --dt-color-secondary: #bbd147;
    --dt-color-secondary-contrast: black;
    --dt-color-secondary-dark-text: #819126;
    --dt-color-accent: #922E1F;
    --dt-color-accent-contrast: white;
    --dt-color-accent-dark-text: #922E1F;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: black;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: black;
    --dt-color-white-dark-text: #707070;
    --dt-color-toolbar-primary: #656565;
    --dt-color-toolbar-primary-contrast: white;
    --dt-color-toolbar-primary-hover: #2C3C46;
  }

  :root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #f1c40f;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #f1c40f;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

  */
/* Google Fonts - Open Sans, PT Serif, Arvo (Lato loaded by Canvas) */
:root {
--open-sans: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root {

/* Text Size */
--ratio: 1.2;
--text-xsm: .75rem; /* 12px */
--text-sm: .875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-md: calc(var(--text-base) * var(--ratio)); /* 1.2rem */
--text-lg: calc(var(--text-md) * var(--ratio)); 
--text-xl: calc(var(--text-lg) * var(--ratio));
--text-2xl: calc(var(--text-xl) * var(--ratio));
--text-3xl: calc(var(--text-2xl) * var(--ratio));
--text-4xl: calc(var(--text-3xl) * var(--ratio));

/* Spacing */
/* adapted from https://tailwindcss.com/docs/width */
--s-0: 0px;
--s-0-5: 0.125rem; /* 2px */
--s-1: 0.25rem; /* 4px */
--s-1-5: 0.375rem; /* 6px */
--s-2: 0.5rem; /* 8px */
--s-2-5: 0.625rem; /* 10px */
--s-3: 0.75rem; /* 12px */
--s-3-5: 0.875rem; /* 14px */
--s-4: 1rem; /* 16px */
--s-5: 1.25rem; /* 20px */
--s-6: 1.5rem; /* 24px */
--s-7: 1.75rem; /* 28px */
--s-8: 2rem; /* 32px */
--s-9: 2.25rem; /* 36px */
--s-10: 2.5rem; /* 40px */
--s-11: 2.75rem; /* 44px */
--s-12: 3rem; /* 48px */
--s-14: 3.5rem; /* 56px */
--s-16: 4rem; /* 64px */
--s-20: 5rem; /* 80px */
--s-24: 6rem; /* 96px */
--s-28: 7rem; /* 112px */
--s-32: 8rem; /* 128px */
--s-36: 9rem; /* 144px */
--s-40: 10rem; /* 160px */
--s-44: 11rem; /* 176px */
--s-48: 12rem; /* 192px */
--s-52: 13rem; /* 208px */
--s-56: 14rem; /* 224px */
--s-60: 15rem; /* 240px */
--s-64: 16rem; /* 256px */
--s-72: 18rem; /* 288px */
--s-80: 20rem; /* 320px */
--s-96: 24rem; /* 384px */
--s-home: 52.5rem; /* 800px */
--s-auto: auto;
--s-half: 50%;
--s-1third: 33.333333%;
--s-2thirds: 66.666667%;
--s-1quarter: 25%;
--s-3quarters: 75%;
--s-full: 100%;
--s-screen: 100vw;
  
/* Border Width */
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-3: 3px;
--border-width-4: 4px;
--border-width-5: 5px;
--border-width-10: 10px;

/* Border Radius */
--radius-1: .125rem;
--radius-2: .25rem;
--radius-3: .375rem;
--radius-4: .5rem;
--radius-5: .75rem;
--radius-6: 1rem;

/* Box Shadow */
--box-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);

/* Text Shadow */
--text-shadow-1: 0 1px 0 rgba(0,0,0,.5);
--text-shadow-2: 0 2px 0 rgba(0,0,0,.3);

/* Translucent Backgrounds */
--translucent-bg-1: rgba(0, 0, 0, 0.1); 
--translucent-bg-2: rgba(0, 0, 0, 0.2); 
--translucent-bg-3: rgba(0, 0, 0, 0.3); 
--translucent-bg-4: rgba(0, 0, 0, 0.4); 
--translucent-bg-5: rgba(0, 0, 0, 0.5); 
--translucent-bg-6: rgba(0, 0, 0, 0.6); 

/* Gradients for Backgrounds */
--gradient-bg-05: linear-gradient(121deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0.2) 25%, rgba(0,0,0,.1) 100%);
--gradient-bg-1: linear-gradient(121deg, rgba(0,0,0,.3),rgba(0,0,0,.3) 60%,rgba(0,0,0,.4) 0);
--gradient-bg-2: linear-gradient(121deg, rgba(0,0,0,.6), rgba(0,0,0,.4) 60%, rgba(0,0,0,.4) 40%);
--gradient-bg-3: linear-gradient(141deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.3) 100%);
--gradient-bg-4: linear-gradient(141deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0.45) 100%); 
}
/* For reference */
.show-sr-only {
  /* show hidden field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;
}
.ui-accordion .ui-accordion-header.ui-state-default.ui-state-active,
.ui-accordion .ui-progressbar .ui-accordion-header.ui-state-default.ui-widget-header,
.ui-progressbar .ui-accordion .ui-accordion-header.ui-state-default.ui-widget-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(---dt-color-primary);
    border-bottom: 1px solid var(--dt-color-primary);
    background: var(--dt-color-primary);
}
.kl_panels_wrapper.ui-accordion .ui-accordion-header.ui-state-default.ui-state-active,
.kl_panels_wrapper.ui-accordion .ui-progressbar .ui-accordion-header.ui-state-default.ui-widget-header,
.kl_panels_wrapper.ui-progressbar .ui-accordion .ui-accordion-header.ui-state-default.ui-widget-header,
.kl_wrapper .ui-accordion .ui-accordion-header.ui-state-default.ui-state-active,
.kl_wrapper .ui-accordion .ui-progressbar .ui-accordion-header.ui-state-default.ui-widget-header,
.kl_wrapper .ui-progressbar .ui-accordion .ui-accordion-header.ui-state-default.ui-widget-header {
  background: var(--dt-color-primary);
}
#kl_wrapper_3 .kl_custom_accordion.ui-accordion .ui-accordion-header.ui-state-active a,
#kl_wrapper_3 .kl_panels_accordion.ui-accordion .ui-accordion-header.ui-state-active a,
#kl_wrapper_3 .kl_panels_expander.ui-accordion .ui-accordion-header.ui-state-active a,
.kl_custom_accordion.ui-accordion .ui-accordion-header.ui-state-active a,
.kl_panels_accordion.ui-accordion .ui-accordion-header.ui-state-active a,
.kl_panels_expander.ui-accordion .ui-accordion-header.ui-state-active a {
  color: var(--dt-color-primary-contrast);
}
#kl_wrapper_3 .kl_panel_heading.ui-tabs-active {
  bottom: -2px;
  top: auto;
}
#kl_wrapper_3 .kl_panel_heading.ui-state-focus {
  box-shadow: none;
}
#kl_wrapper_3 .ui-tabs .ui-tabs-nav .kl_panel_heading.ui-state-focus a,
#kl_wrapper_3 .ui-tabs .ui-tabs-nav .kl_panel_heading.ui-tabs-active a {
  font-weight:bold;
  color:#000;
}
#kl_wrapper_3 .kl_panels_tabs .ui-tabs-nav li {
  border-color: #ccc;
}
#kl_wrapper_3 .kl_panels_tabs.homepage-tabs .ui-tabs-nav {
  display: flex;
  justify-content: space-evenly;
}
#kl_wrapper_3 .kl_panels_tabs.homepage-tabs .ui-tabs-nav li {
  display: flex;
  justify-content: center;
  width:100%;
  margin: 0 .5em 1px 0;
  text-transform: uppercase;
  padding: .5rem 0;
}
#kl_wrapper_3 .homepage-tabs #kl_modules.kl_modules_tabbed.kl_vertical_progress {
  border-top: 1px solid #000 !important;
}
/* COMPONENT: HTML Snippets > Block Quotes  */
#kl_wrapper_3 blockquote {
  margin: 20px 0 20px 25px;
}
#kl_wrapper_3 blockquote p {
  font-weight: normal;
}
/* Buttons */
#kl_wrapper_3 .btn,
#kl_wrapper_3 .Button {
    text-transform: uppercase;
    line-height: 1.1;
    padding-top: 10px;
}
.kl_wrapper .bs-btn-group-sm>.bs-btn,
.kl_wrapper .bs-btn-sm {
    padding-top: 5px;
}
#kl_wrapper_3 .btn-primary,
#kl_wrapper_3 .Button--primary,
#kl_wrapper_3 a.btn-primary,
#kl_wrapper_3 a.Button--primary,
#kl_tools_wrapper .Button--primary {
    background-color: var(--dt-color-primary) !important;
    color: var(--dt-color-primary-contrast);
    border-color: transparent;
}
#kl_wrapper_3 .btn-secondary,
#kl_wrapper_3 .Button--secondary,
#kl_wrapper_3 a.btn-secondary,
#kl_wrapper_3 a.Button--secondary,
#kl_tools_wrapper .Button--secondary {
    background-color: var( --dt-color-secondary);
    color: var(--dt-color-secondary-contrast);
    border-color: transparent;
}
#kl_wrapper_3 .Button--danger {
    background: var(--bs-danger);
    color: #fff;
}
#kl_wrapper_3 .Button--success {
    background: var(--bs-success);
    color: #fff;
}
#kl_wrapper_3 .Button--warning {
    background: var(--bs-warning);
    color: #000;
}
#kl_wrapper_3 .alert {
    color: var(--bs-warning);
    color: #fff;
}
#kl_wrapper_3 .alert.alert-error {
    color: var(--bs-danger);
    color: #fff;
}
#kl_wrapper_3 .alert.alert-success {
    color: var(--bs-success);
    color: #fff;
}
#kl_wrapper_3 .alert.alert-info {
    color: #0072b4;
    color: #fff;
}
.kl_wrapper .bs-badge-primary,
.kl_wrapper .bs-text-primary {
    color: #fff;
    background-color: #006fe6
}
.kl_wrapper .bs-badge-secondary,
.kl_wrapper .bs-text-secondary {
    color: #fff;
    background-color: #6f767e
}
.kl_wrapper .bs-badge-success,
.kl_wrapper .bs-text-success {
    color: #fff;
    background-color: var(--bs-success);
}
.kl_wrapper .bs-badge-danger,
.kl_wrapper .bs-text-danger {
    color: #fff;
    background-color: var(--bs-danger);
}
.kl_wrapper .bs-badge-warning,
.kl_wrapper .bs-text-warning {
    color: #111;
    background-color: #ffc107
}
.kl_wrapper a.bs-badge-warning:hover {
    color: #000
}
.kl_wrapper .bs-badge-info,
.kl_wrapper .bs-text-info {
    color: #000;
    background-color: #54bbcb
}
.kl_wrapper .bs-badge-light,
.kl_wrapper .bs-text-light {
    color: #111;
    background-color: #f8f9fa
}
.kl_wrapper .bs-badge-dark,
.kl_wrapper .bs-text-dark {
    color: #fff;
    background-color: #343a40
}
.kl_wrapper .bs-badge-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem
}
.kl_wrapper .bs-alert {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    overflow: hidden
}
.kl_wrapper .bs-alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff
}
.kl_wrapper .bs-alert-secondary {
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2
}
.kl_wrapper .bs-alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb
}
.kl_wrapper .bs-alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb
}
.kl_wrapper .bs-alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba
}
.kl_wrapper .bs-alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb
}
.kl_wrapper .bs-alert-light {
    color: #757576;
    background-color: #fefefe;
    border-color: #fdfdfe
}
.kl_wrapper .bs-alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca
}
/* COMPONENT: HTML Snippets > Block Alert Boxes  */
#kl_wrapper_3>div .kl_message_block,
.kl_message_block {
  margin: 20px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  border: 1px solid;
}
#kl_wrapper_3>div .kl_message_block h3:not(.kl_message_heading),
#kl_wrapper_3>div .kl_message_block h4:not(.kl_message_heading) {
  margin-left: 10px;
}
#kl_wrapper_3>div .kl_message_block ul {
  margin-left: 40px;
}
#kl_wrapper_3>div .kl_message_block.kl_message_block_success,
.kl_message_block.kl_message_block_success {
  background-color: #e8f6e9;
}
#kl_wrapper_3>div .kl_message_block.kl_message_block_info,
.kl_message_block.kl_message_block_info {
  background-color: #e5f2f8;
}
/* COMPONENT HTML Snippets > Bootstrap Callouts */
.kl_wrapper .bs-callout {
  border-color: #ccc;
}
/* Primary */
.kl_wrapper .bs-callout-primary {
  border-left-color: var(--dt-color-primary); 
}
.kl_wrapper .bs-callout-primary i {
  background: (--dt-color-primary); 
}
#kl_wrapper_3.kl_wrapper .bs-callout-primary h3,
#kl_wrapper_3.kl_wrapper .bs-callout-primary h4,
#kl_wrapper_3.kl_wrapper .bs-callout-primary h5,
#kl_wrapper_3.kl_wrapper .bs-callout-primary h6,
.kl_wrapper .bs-callout-primary h3,
.kl_wrapper .bs-callout-primary h4,
.kl_wrapper .bs-callout-primary h5,
.kl_wrapper .bs-callout-primary h6 {
  color: var(--dt-color-primary); 
}
/* Secondary */
.kl_wrapper .bs-callout-secondary {
  border-left-color: var( --dt-color-secondary); 
}
#kl_wrapper .bs-callout-secondary i,
#kl_wrapper .bs-callout-secondary h4 i {
  background: var( --dt-color-secondary); 
}
#kl_wrapper_3.kl_wrapper .bs-callout-secondary h3,
#kl_wrapper_3.kl_wrapper .bs-callout-secondary h4,
#kl_wrapper_3.kl_wrapper .bs-callout-secondary h5,
#kl_wrapper_3.kl_wrapper .bs-callout-secondary h6,
.kl_wrapper .bs-callout-secondary h3,
.kl_wrapper .bs-callout-secondary h4,
.kl_wrapper .bs-callout-secondary h5,
.kl_wrapper .bs-callout-secondary h6 {
  color: var( --dt-color-secondary);
}
/* Success */
.kl_wrapper .bs-callout-success {
  border-left-color: var(--bs-success);
}
#kl_wrapper .bs-callout-success i,
#kl_wrapper .bs-callout-success h4 i {
  background: var(--bs-success);
}
#kl_wrapper_3.kl_wrapper .bs-callout-success h3,
#kl_wrapper_3.kl_wrapper .bs-callout-success h4,
#kl_wrapper_3.kl_wrapper .bs-callout-success h5,
#kl_wrapper_3.kl_wrapper .bs-callout-success h6,
.kl_wrapper .bs-callout-success h3,
.kl_wrapper .bs-callout-success h4,
.kl_wrapper .bs-callout-success h5,
.kl_wrapper .bs-callout-success h6 {
  color: var(--bs-success);
}
/* Danger  */
.kl_wrapper .bs-callout-danger {
  border-left-color: var(--bs-danger);
}
#kl_wrapper .bs-callout-danger i,
#kl_wrapper .bs-callout-danger h4 i {
  background: var(--bs-danger);
}
#kl_wrapper_3.kl_wrapper .bs-callout-danger h3,
#kl_wrapper_3.kl_wrapper .bs-callout-danger h4,
#kl_wrapper_3.kl_wrapper .bs-callout-danger h5,
#kl_wrapper_3.kl_wrapper .bs-callout-danger h6,
.kl_wrapper .bs-callout-danger h3,
.kl_wrapper .bs-callout-danger h4,
.kl_wrapper .bs-callout-danger h5,
.kl_wrapper .bs-callout-danger h6 {
  color: var(--bs-danger);
}
/* Warning */
.kl_wrapper .bs-callout-warning {
  border-left-color: var(--bs-warning);
}
#kl_wrapper .bs-callout-warning i,
#kl_wrapper .bs-callout-warning h4 i {
  background: var(--bs-warning);
}
#kl_wrapper_3.kl_wrapper .bs-callout-warning h3,
#kl_wrapper_3.kl_wrapper .bs-callout-warning h4,
#kl_wrapper_3.kl_wrapper .bs-callout-warning h5,
#kl_wrapper_3.kl_wrapper .bs-callout-warning h6,
.kl_wrapper .bs-callout-warning h3,
.kl_wrapper .bs-callout-warning h4,
.kl_wrapper .bs-callout-warning h5,
.kl_wrapper .bs-callout-warning h6 {
  color: var(--bs-warning);
}
/* Info */
.kl_wrapper .bs-callout-info {
  border-left-color: var(--bs-info);
}
#kl_wrapper .bs-callout-info i,
#kl_wrapper .bs-callout-info h4 i  {
  background: var(--bs-info);
}
#kl_wrapper_3.kl_wrapper .bs-callout-info h3,
#kl_wrapper_3.kl_wrapper .bs-callout-info h4,
#kl_wrapper_3.kl_wrapper .bs-callout-info h5,
#kl_wrapper_3.kl_wrapper .bs-callout-info h6,
.kl_wrapper .bs-callout-info h3,
.kl_wrapper .bs-callout-info h4,
.kl_wrapper .bs-callout-info h5,
.kl_wrapper .bs-callout-info h6 {
  color: var(--bs-info);
}
/* COMPONENT: Add Block > Message Blocks */
#kl_wrapper_3>div .kl_message_block .kl_message_heading,
.kl_message_block .kl_message_heading {
  padding: 7px 5px 5px 10px !important; /* keep from getting overwritten by other h3 theming */
}
#kl_wrapper_3 .kl_message_block .kl_message_heading i {
  background: none;
  margin-right: 5px
}
#kl_wrapper_3>div .kl_message_block.kl_message_block_success {
  border-color: var(--bs-success);
  border-radius: 3px;
}
#kl_wrapper_3>div .kl_message_block.kl_message_block_success .kl_message_heading_success {
  text-align: left;
}
#kl_wrapper_3>div .kl_message_heading.kl_message_heading_success,
#kl_wrapper_3>div h3.kl_message_heading.kl_message_heading_success,
#kl_wrapper_3>div h4.kl_message_heading.kl_message_heading_success,
#kl_wrapper_3>div h5.kl_message_heading.kl_message_heading_success,
#kl_wrapper_3>div h6.kl_message_heading.kl_message_heading_success,
.kl_message_heading.kl_message_heading_success {
  color: #fff;
  background-color: var(--bs-success);
}
#kl_wrapper_3>div .kl_message_block.kl_message_block_info {
  border-color: var(--bs-info);
  border-radius: 3px;
}
#kl_wrapper_3>div .kl_message_block.kl_message_block_info .kl_message_heading_info{
  text-align: left;
}
#kl_wrapper_3>div .kl_message_heading.kl_message_heading_info,
#kl_wrapper_3>div h3.kl_message_heading.kl_message_heading_info,
#kl_wrapper_3>div h4.kl_message_heading.kl_message_heading_info,
#kl_wrapper_3>div h5.kl_message_heading.kl_message_heading_info,
#kl_wrapper_3>div h6.kl_message_heading.kl_message_heading_info,
.kl_message_heading.kl_message_heading_info {
  color: #fff;
  background-color: var(--bs-info);
}
#kl_wrapper_3>div .kl_message_block.kl_message_block_danger {
  border-color: var(--bs-danger);
  border-radius: 3px;
  background-color: #ecd8d7;
}
#kl_wrapper_3>div .kl_message_block.kl_message_block_danger .kl_message_heading_danger {
  text-align: left;
}
#kl_wrapper_3>div .kl_message_heading.kl_message_heading_danger,
#kl_wrapper_3>div h3.kl_message_heading.kl_message_heading_danger,
#kl_wrapper_3>div h4.kl_message_heading.kl_message_heading_danger,
#kl_wrapper_3>div h5.kl_message_heading.kl_message_heading_danger,
#kl_wrapper_3>div h6.kl_message_heading.kl_message_heading_danger,
.kl_message_heading.kl_message_heading_danger {
  color: #fff;
  background-color: var(--bs-danger);
}
#kl_wrapper_3>div .kl_message_block.kl_message_block_neutral .kl_message_heading_neutral {
  text-align: left;
}
#kl_wrapper_3>div .kl_message_heading.kl_message_heading_neutral,
#kl_wrapper_3>div h3.kl_message_heading.kl_message_heading_neutral,
#kl_wrapper_3>div h4.kl_message_heading.kl_message_heading_neutral,
#kl_wrapper_3>div h5.kl_message_heading.kl_message_heading_neutral,
#kl_wrapper_3>div h6.kl_message_heading.kl_message_heading_neutral,
.kl_message_heading.kl_message_heading_neutral {
  color: #fff;
  background-color: #666;
}
#kl_wrapper_3 #kl_neutral_callout .kl_message_block.kl_message_block_neutral{
  background: #f5f5f5;
  border: 1px solid #c7cdd1;
  border-radius: 3px;
}
#kl_wrapper_3 #kl_neutral_callout .kl_message_heading_neutral{
  text-align: left;
}
/* IC warnings  */
#kl_wrapper_3 .ic-flash-info {
  border-color: var(--ic-brand-primary)
}
#kl_wrapper_3 .ic-flash-info .ic-flash__icon {
  background-color: var(--ic-brand-primary)
}
#kl_wrapper_3 .ic-flash-success {
  border-color: var(--bs-success);
}
#kl_wrapper_3 .ic-flash-success .ic-flash__icon {
  background-color: var(--bs-success);
}
#kl_wrapper_3 .ic-flash-warning {
  border-color: var(--bs-warning);
}
#kl_wrapper_3 .ic-flash-warning .ic-flash__icon {
  background-color: var(--bs-warning);
}
#kl_wrapper_3 .ic-flash-error {
  border-color: var(--bs-danger);
}
#kl_wrapper_3 .ic-flash-error .ic-flash__icon {
  background-color: var(--bs-danger);
}
/* Headings */
/* === H3 with Underline === */
/* H3 Text */
#kl_wrapper_3 >div>h3:not(.ui-state-default){
    /* !important overrides of default dt .kl_colored_headings theme */
  border-top: 0px solid transparent;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  min-height: 0;
  width: 100%;
  background:none;
  display: inline-block;
  font-size: var(--text-lg);
  font-weight: bold;
  border-bottom: 2px solid var(--dt-color-primary);
  margin: var(--s-7) 0 var(--s-3) 0;
  padding: 0;
  line-height: 1.2;
}
/* H3 with Line Behind  
#kl_wrapper_3 h3,
#kl_wrapper_3.kl_nursing_nanda >div>h3:not(.ui-state-default) {
  line-height: var(--s-7);
  border-bottom: none;
}

#kl_wrapper_3.kl_nursing_nanda h3:after {
  content: "";
  background-color: var(--dt-color-primary) !important;
  display: inline-block;
  height: 2px;
  position: absolute;
  vertical-align: middle;
  width: 100%;
  margin: var(--s-4) 0 0 var(--s-3);
}   
*/
/* H3 Icon */
#kl_wrapper_3 >div>h3:not(.ui-state-default) i,
#kl_wrapper_3 #kl_modules h3:not(.ui-state-default) i {
  background: var(--dt-color-primary);
  margin-right: var(--s-2);
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
  color: var(--dt-color-primary-contrast);
  border-bottom: none;
  position: relative;
  top: 1px;
  left: 0;
  display: inline-block;
  height: var(--s-9);
  width: var(--s-9);
  line-height: var(--s-9);
  text-align: center;
  font-size: var(--text-md);
}
/* === H4 === */
#kl_wrapper_3 h4 {
  /* DT resets */
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  min-height: 0;

  margin: var(--s-4) 0 var(--s-4) 0;
  font-size: var(--text-md);
  font-weight:bold;
}
/* H4 w/ Icon */
#kl_wrapper_3 h4 i {
    border-bottom: none;
    position: relative;
    display: inline-block;
    margin-right: var(--s-2);
    border-radius: var(--radius-2);
    background: var( --dt-color-secondary);
    color: var(--dt-color-secondary-contrast);
    font-size: var(--text-md);
    height: var(--s-8);
    width: var(--s-8);
    line-height: var(--s-8);
    text-align: center;
    top: -5px;
}
#kl_wrapper_3 h5 {
  font-size: var(--text-base);
  margin: 1rem 0;
  font-weight:bold;
  color: #222;
}
/* Pill List */
#kl_wrapper_3 .pill {
  background: #fff;
}
#kl_wrapper_3 .pill>li {
  padding: 8px 10px;
  font-size: 1rem;
  font-weight:bold;
  color: #000;
  text-transform: uppercase;
}
#kl_wrapper_3.kl .pill>li a {
  text-decoration: none;
  font-weight:normal;
  color: var(--dt-link-on-white);
}
/*#region ***** Component: Module Tabs ******************************** */
.dp_tabs_nav {
  margin-bottom: 1rem;
}
.dp_tabs_nav_ul {
  margin-top: 1rem;
  color: inherit;
  background:none;
  position: relative;
  z-index: 1;
  bottom: -10px;
}
.dp_tabs_nav_ul>li a {
  font-size: 1.125rem;
  font-weight:bold;
}
.dp_tabs_nav_ul .dp_tabs_nav_ul_active_page > a,
.dp_tabs_nav_ul .dp_tabs_nav_ul_active_page > a:hover {
  padding: 0.5rem 0.75rem !important;
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
  font-size: 1rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  color: #000; 
  background:#fff;
  text-transform:uppercase;
}
.dp_tabs_nav_ul>li a:focus, 
.dp_tabs_nav_ul>li a:hover {
  color: #000; 
  background:none;
}
li.dp_tabs_nav_ul_active_sub_page i {
  display:none;
}
.dp_tabs_nav_sub_ul {
  font-size: 0.875rem;
  border-radius: var(--s-1);
  border: 1px solid #000;
  background:none;
}
.dp_tabs_nav_sub_ul li {
  border-right:none;
}
li.dp_tabs_nav_ul_active_sub_page a {
  border-radius: 3px;
  color: #000;
  text-transform: uppercase
}
/*#endregion*/
/* === Vertical Tabs Homepage Module list  === 

Note: this requires having the two columns view and "Include Quick Links - All" enabled in the DesignPlus settings ("Add Advanced Elements > Module List" 

*/
/* Adds warning on Module List telling people not to edit it directly  */
.mce-content-body #kl_modules {
  position:relative;
}
.mce-content-body #kl_modules:after {
  content:"NOTE: The module list is not meant to be edited directly here. Use Design Tools to update instead. Please contact CDIL if you need instructions (cdil-inbox@bc.edu).";
  position: absolute;
  top: 0;
  right:0; 
  display:block;
  width: 250px;
  font-size: 14px;
  margin: 0 5px 0 0;
  background: #b45f06;
  font-size: 12px;
  padding: 4px 5px;
  color: #fff;
  z-index: 1;
}
/* Course Modules Block Heading - remove underline since there's already a border at the top of the homepage module list  */
#kl_wrapper_3 #kl_course_modules h3,
#kl_wrapper_3 #kl_course_modules > h3:not(.ui-state-default):after {
  border: none !important;
}
#kl_wrapper_3>div .kl_message_block h3 {
  font-size: 22px;
  font-weight: bold;
}
/* Homepage Module Lists Icons Controls */
#kl_wrapper_3 #kl_modules > ul li i.fas.fa-minus-square { /* removes icon */
  display:none;
}
#kl_wrapper_3 #kl_modules > ul li a i.far.fa-arrow-alt-circle-right:before {
  display:none; /* creates indent by hiding icon but keeping space */
}
/* Fixing missing styles for font-awesome icons */
#kl_wrapper_3 #kl_modules > ul li i[class^=fa-]:before,
#kl_wrapper_3 #kl_modules > ul li i[class*=fa-]:before {
    display: inline-block;
    width: 25px;
    text-align: center
}
/* COMPONENT: Home-page Module List - Single Column  */
#kl_modules.kl_modules_columns_1 {
  padding-top: 20px;
  margin-top:0;
}
#kl_modules.kl_modules_columns_1 > ul {
  margin-left: 0;
}
#kl_wrapper_3 #kl_modules.kl_modules_columns_1 > ul li {
  font-size: 1rem;
  padding-bottom: 8px;
}
#kl_wrapper_3 #kl_modules.kl_modules_columns_1 > ul li a,
#kl_wrapper_3 #kl_modules.kl_modules_columns_1 > ul li a:active,
#kl_wrapper_3 #kl_modules.kl_modules_columns_1 > ul li a:visited {
  color:var(--dt-link-on-white);
}
#kl_wrapper_3 #kl_modules.kl_modules_columns_1 > ul li.kl_current a {
  font-weight: 700;
  display: block;
  padding: 5px 5px 3px 2px;
  text-decoration: none;
  border-radius: 3px;
  color:var(--dt-color-primary-contrast);
  background: var(--dt-color-primary);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);
}
#kl_wrapper_3 #kl_modules.kl_modules_columns_1 .kl_current:not(.ui-tabs-active)::before {
  float: right;
  padding: 5px 10px 5px 5px;
  content: '- current - ';
  color: #fff;
}
#kl_wrapper_3 #kl_modules.kl_modules_columns_1 > ul li.kl_current a:hover {
  color: #000;
  background: #bc9b6a;
}
#kl_wrapper_3 #kl_modules.kl_modules_columns_1 .kl_current:not(.ui-tabs-active) i {
  color: #fff;
}
/* COMPONENT: Vertical module tabs - "Include Quick Links - All" */
#kl_wrapper_3 #kl_modules.kl_modules_tabbed {
  display: flex;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: 1px solid #000 !important;
  border-top: 8px solid var(--dt-color-primary) !important;
  align-items: stretch;
  border-radius: 1px;
  background-color: #fff !important /* themes-payload */;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details {
  padding: 8px 10px 10px 5px;
  border: none;
  background: none;
}
/* left pane */
#kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav {
  width: 50%;
  display:block;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ui-state-active,
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ui-state-hover {
  width: calc(100% + 1px);
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li {
  display: block;
  overflow: visible;
  margin: 0;
  white-space: normal;
  border-right: none;
  border-radius: 0;
  background: none;
  position: relative;
  width: calc(100% + 1px);
  padding: 4px 0 4px 20px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed>ul li:first-of-type {
  padding-top: 20px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed>ul li:last-of-type {
  padding-bottom: 20px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul li.ui-tabs-active {
  padding-left: 20px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li a {
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  float: none;
  text-decoration: none;
  border: none;
  border-radius: 0;
  width: 100% !important; /* keep left tabs from wrapping */
  margin-left: 0;
  padding: 5px 20px 5px 5px;
  color: var(--dt-color-primary) !important
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed:not(.kl_vertical_progress) > ul.ui-tabs-nav li a {
  display: flex;
  align-items: center;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li a:focus, 
#kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li a:hover {
    background:none;
    text-decoration: underline;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed ul.ui-tabs-nav li.ui-tabs-active a {
  display: block;
  width: 100% !important;
  margin: 0;
  color: #030303 !important;
  background: #fff !important;
  border: 1px solid #000;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-right: none;
  text-indent: 0;
  margin-left: 0;
  padding-right: 10px;
  padding-left: 5px;
  color: #000 !important;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed:not(.kl_vertical_progress) > ul.ui-tabs-nav li.ui-tabs-active a {
  display: flex;
  align-items: center;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_modules_columns_1 > ul li.kl_current a {
  box-shadow:none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed ul.ui-tabs-nav li.ui-state-hover a:hover {
  text-decoration:underline;
  background-color:transparent;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed>ul.ui-tabs-nav {
  width: auto;
  min-width: 60%;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed>ul.ui-tabs-nav li.ui-tabs-active a:focus {
  text-decoration: none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ui-tabs-nav .ui-state-focus,
#kl_modules.kl_modules_tabbed .kl_panel_content:focus {
    box-shadow: none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li:first-child {
  margin-top: -1px;
  border-top: none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed>ul.ui-tabs-nav li i {
  left: 36px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed>ul.ui-tabs-nav li a:hover i {
  text-decoration:none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed:not(.kl_vertical_progress)>ul.ui-tabs-nav li i {
  left: 36px;
  height: 16px;    
  display:flex;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed:not(.kl_vertical_progress)>ul.ui-tabs-nav li i.icon-unpublish {
  color: gray;
  margin-left: .5rem;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed>ul li.ui-tabs-active i {
  left: 0;
}
/* right pane */
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list {
  margin-top: 0;
  padding-top: 0;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list.items:before {
  content: "In this Module";
  padding-top: 5px;
  display: block;
  padding-bottom: 5px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold;
  margin-left:-15px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list.ui-tabs-panel {
  width: auto;
  min-width: 40%;
  margin-left: 0;
  padding-left: 35px;
  padding-top: 5px;
  padding-bottom: 0;
  border: none;
  border-left: 1px solid #000;
  background: #fff !important;
  border-radius: 0px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list .ig-header {
  /* visually hidden but accessible to screen readers  */
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  transform: translatez(0);
  border: 0;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list .context_module_item.context_module_item_hover,
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list .context_module_item:hover {
  background: none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list {
  margin-top: 0;
  padding-top: 0;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list .ig-row {
  border: none;
  padding: 0;
  margin-left: -22px;
  background: transparent;
  align-items: flex-start;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .context_module_item {
  border:none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list .ig-row a.ig-title {
  font-weight: normal;
  color: var(--dt-link-on-white);
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list .ig-row.ig-published:not(.student-view)::before {
  border: none;
  background: none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .context_module_item.context_module_sub_header .locked_title {
  font-size: 1em;
}
@media (max-width: 990px) {
  #kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav {
    right: 0;
    float: none;
    width: 100%;
    margin-top: 0;
    padding: 20px 0 20px 0;
  }
  
  #kl_wrapper_3 #kl_modules.kl_modules_tabbed .ui-widget-content {
    width: 100%;
    margin-left: 0;
  }
  #kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul.ui-tabs-nav li {
    border-right: 1px solid #565656;
  }
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .type_icon i,
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .unpublish-icon {
  color: var(--dt-color-primary);
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .icon-publish {
  display: none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details .ig-info {
  margin-right: 0;
  margin-left: 0px;
  font-size: 15px;
  padding-top: 3px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details .ig-info a {
  text-decoration: none !important;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 42px;
  margin-bottom: 0;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details li,
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details .context_module_item.context_module_item_hover {
  position: relative;
  background: transparent;
  margin-bottom: 7px;
  line-height: 1;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details li:before {
  background-color: #616161;
  width: 4px;
  content: '';
  position: absolute;
  top: 18px;
  bottom: -18px;
  left: 24px;
  display: none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details li:last-of-type::before {
  display: none;
}
/* Temp Override */
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details.ig-admin,
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details .module-item-status-icon {
  display: block;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details .kl_current .module-item-title i {
  display: none;
}
/*#region ***** COMPONENT: Verical Progress Bar + Tabs ******************************** */
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress {
  border: 1px solid #000 !important;
  border-top: 8px solid var(--dt-color-primary) !important;
  background: #fff !important;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul.ui-tabs-nav {
  width: auto;
  min-width: 60%;
}
/* remove ui-tabs-active so it displays in rich text editor */
#tinymce #kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul {
  width: auto;
  min-width: 60%;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .ig-list.ui-tabs-panel {
  width: auto;
  min-width: 40%;
  border-left: 1px solid #000;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li {
  position: relative;
  width: calc(100% + 1px);
  padding: 4px 0 4px 20px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li:first-of-type {
  padding-top: 20px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li:last-of-type {
  padding-bottom: 20px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li:after {
  background-color: var(--dt-color-primary);
  width: 8px;
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 38px;
}
/* Hide background line in editor */
#tinymce #kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li:after {
  display:none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li:first-of-type::after {
  top: 30px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li:last-of-type::after {
  bottom: 27px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul.ui-tabs-nav li a {
  text-indent: 0;
  margin-left: 0;
  padding: 5px 10px 5px 5px;
  padding-left: 45px;
  text-indent: -40px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress ul.ui-tabs-nav li.ui-tabs-active a {
  background: #fff !important;
  border: 1px solid #000;
  border-right: none;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  color: #000 !important;
  padding-left: 45px;
}
/* fix to make sure all icons are hidden */
#kl_wrapper_3 #kl_modules.kl_vertical_progress>ul li i,
#kl_wrapper_3 #kl_modules.kl_vertical_progress>ul li i:before {
  content: '';
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress ul.ui-tabs-nav li i {
  background-color: var(--dt-color-primary);
  height: 30px;
  width: 30px;
  border-radius: 25px;
  left: 2px;
  z-index: 1;
  top: 0px;
  margin-right: 7px;
  border: 7px solid var(--dt-color-primary);
  position: relative;
}
#tinymce #kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li i {
  left: 7px;
  /* so it doesn't look weird in the editor */
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li.ui-tabs-active i {
  background-color: #000;
  border-color: #000;
  height: 30px;
  width: 30px;
  border-radius: 25px;
  left: 1px;
}
#kl_wrapper_3 #kl_modules.kl_vertical_progress>ul li i,
#kl_wrapper_3 #kl_modules.kl_vertical_progress>ul li i[class^="icon-"]::before {
  content: '';
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li a {
  color: var(--dt-color-primary) !important;
  width: 100% !important;
  display: block;
  line-height: 16px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress ul li.ui-tabs-active a {
  padding-left: 45px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .ig-list {
  margin-top: 0;
  padding-top: 0;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .ig-list.items:before {
  content: "In this Module";
  padding-left: 10px;
  padding-top: 5px;
  display: block;
  padding-bottom: 5px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight:bold;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .ig-list.ui-tabs-panel {
  background: #fff !important;
  border-radius: 0px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .type_icon i,
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .unpublish-icon {
  color: var(--dt-color-primary);
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li i.icon-unpublish {
  display: none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details .ig-type-icon i:before {
  background: #616161;
  border-radius: 20px;
  padding: 5px;
  height: 4px;
  width: 4px;
  content: "";
  margin-top: 2px;
  display:none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details {
  padding: 8px 10px 10px 5px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details .ig-type-icon {
  display:none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details .kl_module_content .ig-list .ig-row {
  margin-left: -14px;
  background: transparent;
  align-items: flex-start;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details .ig-info {
  margin-right: 0;
  margin-left: 0px;
  font-size: 15px;
  padding-top: 3px;
  min-height: 30px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details .ig-info a {
  text-decoration: none !important;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 42px;
  margin-bottom:0;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details li,
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details .context_module_item.context_module_item_hover {
  position: relative;
  background: transparent;
  margin-bottom:3px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details li:before {
  background-color: #616161;
  width: 4px;
  content: '';
  position: absolute;
  top: 18px;
  bottom: -18px;
  left: 24px;
  display:none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details li:last-of-type::before {
  display: none;
}
/* temp override */
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details.ig-admin,
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details .module-item-status-icon {
  display: block;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details .kl_current .module-item-title i {
  display: none;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .kl_module_details .ig-list .ig-row {
  padding: 0 0 0 10px;
}
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress>ul li i.fas.fa-minus-square {
  /* removes icon but keeps the space*/
  display: inline-block;
  visibility: hidden;
}
/* } */
/*#endregion*/
/*#region ***** temp Fixes ******************************** */
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .kl_module_details .context_module_sub_header .ig-info a {
  /* figure out issue with #kl_wrapper_3 #kl_modules.kl_modules_tabbed .ig-list .ig-row a.ig-title in module list (AR III) */
    display:none; /* showing title link that shouldn't be visible  */
  }
#kl_wrapper_3 #kl_modules.kl_modules_tabbed .context_module_item.context_module_sub_header .locked_title {
    font-size: 1em;
    display: inline-block; /* added */
    padding: 3px 0 5px 7px; /* added */
  }
#kl_wrapper_3 .context_module.locked .context_module_item .title {
    display:none; /* showing title link that shouldn't be visible  */
  }
#kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul li i.icon-lock {
    left: -6px;
    top: 13px;
  }
#kl_wrapper_3 #kl_modules.kl_modules_tabbed > ul li.ui-tabs-active i.icon-lock {
    left: -11px;
    top: 14px;
  }
/* icon issue with vertical progress */
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress > ul li i.icon-lock {
    left: -138px;
    top: 4px;
    background: none;
    border-color: transparent;
  }
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress > ul li i.icon-lock:before {
    content: "\f023"; /* temp fix for icon */
    font-family: "Font Awesome 5 Free";
    font-weight: bold !important;
  }
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress > ul li.ui-tabs-active i.icon-lock {
    left: -143px;
    top: 4px;
    background: none;
    border-color: transparent;
  }
#kl_wrapper_3 #kl_modules.kl_modules_tabbed.kl_vertical_progress .ig-list.items::before {
    padding-left: 2px;
  }
/* COMPONENT: Module Nav Block - contains Icon Progress Bar component*/
#kl_wrapper_3 #kl_module_navigation_block {
  margin-bottom: 20px;
  margin-top: 12px;
  position: relative;
  z-index: 0;
  /* keeps popovers from getting covered  */
}
#kl_wrapper_3 #kl_module_navigation_block h3 {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  transform: translatez(0);
}
#kl_module_navigation_block .kl_current_module_container {
  margin-top: -15px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--dt-color-primary);
}
/* hide module nav  block on mobile */
@media (max-width: 400px) {
  #kl_module_navigation_block {
    display:none;
  }
}
/* Module name that appears below progress bar */
#kl_module_navigation_block .kl_current_module_name {
  font-size: 18px;
  color: #000;
  position: relative;
  bottom: -10px;
  display: inline-block;
  padding-right: 5px;
  background: #fff;
  font-weight :bold;
}
/* COMPONENT: Icon Progress Bar */
.kl_progress_icons {
  margin-top: 10px;
  width:100%; 
}
.kl_progress_icons ul {
  margin-right:1px; /* to keep current icon from getting cut off at last point in module */
}
.kl_progress_icons .kl_colored_bar {
  height: 12px !important;
  box-shadow: none !important;
}
i
.kl_progress_icons li:first-child .kl_colored_bar {
  border-left: 1px solid #ddd;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.kl_progress_icons li.kl_complete .kl_colored_bar,
.kl_progress_icons li.kl_current .kl_colored_bar {
  border: 2px solid var(--dt-color-primary) !important;
  background: var(--dt-color-primary) !important;
}
.kl_progress_icons li.kl_pending .kl_colored_bar {
  background-color: #ccc;
  border-top: none;
  border-bottom: none;
}
.kl_progress_icons li a {
  line-height: 1rem;
  top: -5px;
  right: 0 !important;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--dt-color-primary) !important;
  box-shadow: none;
}
.kl_progress_icons li.kl_complete a {
  /* override inline styles */
  border: 3px solid var(--dt-color-primary) !important;
  background: var(--dt-color-primary) !important;
}
.kl_progress_icons li.kl_current {
  z-index:2;
}
.kl_progress_icons li.kl_current a {
  border: 3px solid #000 !important;
  background: #000;
  box-shadow: none !important;
  right: -1px !important;
}
.kl_progress_icons li.kl_current:last-child a { /* brighter color when at last position in progress bar  */
  border: 3px solid #000 !important;
  background: #000;
  box-shadow: none !important;
  right: -1px !important;
}
.kl_progress_icons li.kl_pending {
  z-index:1;
}
.kl_progress_icons li.kl_pending a {
  color: #555;
  border: 1px solid #ccc !important;
  background: #cccccc !important;
}
.kl_progress_icons li i {
  line-height: 1;
  position: relative;
  top: 1px;
}
.kl_progress_icons li i.icon-assignment {
  left: 2px;
}
.kl_progress_icons li.kl_current i {
  color: #fff;
}
.kl_progress_icons li.kl_pending i {
  top: 2px;
  color: #555;
}
.kl_progress_icons li i::before {
  font-size: .95rem !important;
}
#kl_wrapper_3 .kl_progress_icons li.kl_pending i::before {
  top: 1px;
  position: relative;
}
/* COMPONENT:  Basic Progress Bar */
.kl_progress {
  margin-top: 10px;
  background-color: #888;
}
.kl_progress .kl_progress-bar {
  background: var(--dt-color-primary);
}
.kl_progress > .kl_progress-type {
  padding-left: 3px;
}
.kl_wrapper .kl_progress .bs-badge.bs-badge-light {
  padding-top: 6px;
  color: #fff;
  border: none;
}
.kl_wrapper .kl_progress .kl_progress-type .bs-badge.bs-badge-light {
  background: transparent; /* allow text to extend past progress area at the beginning of modules */
  text-shadow: 1px 1px #333; /* provide a bit more contrast if over striped area */
}
.kl_wrapper .kl_progress .kl_progress-completed .bs-badge.bs-badge-light {
  background: var(--dt-color-primary);
}
.kl_progress > .kl_progress-completed {
  padding-right: 3px;
}
/***** Design Tools Core Block: Navigation *****/
/* Custom variable for hiding nav block; used in theme config */
:root {
  --navigation-visibility: none; /* hidden by default */ 
}
#kl_navigation {
  display: var(--navigation-visibility); 
}
#kl_wrapper_3 #kl_navigation ul {
    margin: 0;
    padding: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
  }
#kl_wrapper_3 #kl_navigation {
    position: relative;
    z-index: 2;
    top: -.2rem;
    border-bottom-right-radius: var(--radius-2);
    border-bottom-left-radius: var(--radius-2);
  }
#kl_wrapper_3 #kl_navigation ul,
  #kl_wrapper_3 #kl_navigation ul.kl_nav_list_1 {
    background: var(--dt-color-primary);
    margin: 0;
    padding-bottom: var(--s-2-5) !important;
    padding-right: var(--s-2-5) !important;
  }
#kl_wrapper_3 #kl_navigation li a,
  #kl_wrapper_3 #kl_navigation li a:visited {
    display:block;
    border: none;
    text-decoration: none;
    padding: var(--s-0-5) var(--s-0-3) var(--s-0-5) var(--s-3);
    margin: var(--s-2-5) 0 0 var(--s-2-5);
    box-shadow: inset 0 0 3px #999;
    border-radius: var(--radius-2);
    background: var( --dt-color-secondary);
    color: var(--dt-color-secondary-contrast);
  }
#kl_wrapper_3 #kl_navigation i {
    color: #fff;
    border-bottom-width: 0;
    border-radius: var(--radius-2);
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
    margin-right: var(--s-1);
    width: var(--s-6);
    background: none;
  }
@media screen and (min-width:500px) {
    body:not(.course-menu-expanded) #kl_wrapper_3 #kl_navigation ul {
     padding-bottom:0;
     overflow:hidden
    }
    body:not(.course-menu-expanded) #kl_wrapper_3 #kl_navigation ul li {
     font-weight:400;
     list-style-type:none;
     display:table-cell;
     width:auto;
     float:none;
     display:block;
     width:50%;
     float:left
    }
   }
@media screen and (min-width:850px) {
    body.course-menu-expanded #kl_wrapper_3 #kl_navigation ul {
     padding-bottom:0;
     overflow:hidden
    }
    body.course-menu-expanded #kl_wrapper_3 #kl_navigation ul li{
     background:none;
     display:block;
     padding:0;
     width:50%;
     display:inline-block;
     float:left
    }
   }
@media screen and (min-width:1100px) {
    body.course-menu-expanded #kl_wrapper_3 #kl_navigation ul li {
     display:table-cell;
     width:100%;
     float:none
    }
   }
#kl_wrapper_3 .ic-Table,
#kl_wrapper_3 .table {
    background: #fff;
    max-width: 100%;
    width: 100%;
}
.user_content #kl_wrapper_3 table:not([cellpadding]),
.mceContentBody #kl_wrapper_3 table:not([cellpadding]) {
    margin-left: 0;
    /* remove margin to prevent right-left scroll */
}
#kl_wrapper_3 thead {
    background-color: var( --dt-color-secondary);
    color: var(--dt-color-secondary-contrast);
}
#kl_wrapper_3 .ic-Table th,
#kl_wrapper_3 .ic-Table.ic-Table--condensed th {
    padding-left: 3px;
}
#kl_wrapper_3 .ic-Table th:first-of-type,
#kl_wrapper_3 .ic-Table.ic-Table--condensed th:first-of-type {
    padding-left: 7px;
}
/* Overide H3 Underline */
#dp-tools-wrapper .dp-accordion-default > .dp-panel-heading,
#dp-tools-wrapper .dp-accordion-plus > .dp-panel-heading,
#dp-tools-wrapper .dp-expander-default > .dp-panel-heading,
#dp-tools-wrapper .dp-expander-plus > .dp-panel-heading,
.dp-wrapper .dp-accordion-default > .dp-panel-heading,
.dp-wrapper .dp-accordion-plus > .dp-panel-heading,
.dp-wrapper .dp-expander-default > .dp-panel-heading,
.dp-wrapper .dp-expander-plus > .dp-panel-heading {
  border-bottom: none;
}
/* Customzatioins to Plus/Minus style */
.dp-wrapper .dp-accordion-plus {

}
.dp-wrapper .dp-accordion-plus>.dp-panel-heading{
  margin: 0 0 -2px 0;
}
.dp-wrapper .dp-expander-plus>.dp-panel-heading{
  margin: .5rem 0 -2px 0;
}
.dp-wrapper .dp-accordion-plus>.dp-panel-heading a,
.dp-wrapper .dp-accordion-plus>.dp-panel-heading a:hover,
.dp-wrapper .dp-expander-plus>.dp-panel-heading a,
.dp-wrapper .dp-expander-plus>.dp-panel-heading a:hover{
  border-radius: 0;
  padding: 1rem 1.5rem 1rem 2.5rem !important;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .8);
}
.dp-wrapper .dp-accordion-plus>.dp-panel-heading a:focus,
.dp-wrapper .dp-expander-plus>.dp-panel-heading a:focus{
  outline-color: transparent;
  font-weight: bold  !important;
  color: var(--info);
}
.dp-wrapper .dp-accordion-plus>.dp-panel-heading.active a,
.dp-wrapper .dp-expander-plus>.dp-panel-heading.active a{
  background-color: #fff !important;
  color: #000 !important;
  font-weight: bold !important;
  border-bottom:none;
}
.dp-wrapper .dp-accordion-plus>.dp-panel-content,
.dp-wrapper .dp-expander-plus>.dp-panel-content{
  margin-bottom: -2px;
  padding: .5rem 1.5rem !important;
  border: 1px solid rgba(0, 0, 0, .8);
  border-top:none;
}
/* temp */
.dp-wrapper:not(.dp-tools-wrapper) .dp-accordion-plus h2 i:not(.fa-caret-down):not(.fa-caret-up),
.dp-wrapper:not(.dp-tools-wrapper) .dp-accordion-plus h3 i:not(.fa-caret-down):not(.fa-caret-up),
.dp-wrapper:not(.dp-tools-wrapper) .dp-accordion-plus h4 i:not(.fa-caret-down):not(.fa-caret-up),
.dp-wrapper:not(.dp-tools-wrapper) .dp-expander-plus h2 i:not(.fa-caret-down):not(.fa-caret-up),
.dp-wrapper:not(.dp-tools-wrapper) .dp-expander-plus h3 i:not(.fa-caret-down):not(.fa-caret-up),
.dp-wrapper:not(.dp-tools-wrapper) .dp-expander-plus h4 i:not(.fa-caret-down):not(.fa-caret-up){
  background: none !important;
  margin-right: 0 !important;
  color: #000 !important;
  border-bottom: none !important  ;
  position: absolute !important; /* Temp */
  left: 1rem !important;
  right: auto !important;
  height: auto  !important;
  width: auto  !important;
  line-height: normal !important;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);

  /* underline */
  border-radius: var(--radius-2) var(--radius-2) 0 0;

}
/* Buttons */
.dp-wrapper .btn,
.dp-wrapper .Button {
    text-transform: uppercase;
}
.dp-wrapper .btn-primary,
.dp-wrapper .Button--primary,
.dp-wrapper a.btn-primary,
.dp-wrapper a.Button--primary {
    background-color: var(--dt-color-primary) !important;
    color: var(--dt-color-primary-contrast);
    border-color: transparent;
}
.dp-wrapper .btn-secondary,
.dp-wrapper .Button--secondary,
.dp-wrapper a.btn-secondary,
.dp-wrapper a.Button--secondary,
.dp-wrapper .btn-dp-secondary {
    background-color: var( --dt-color-secondary);
    color: var(--dt-color-secondary-contrast);
    border-color: transparent;
}
.dp-wrapper .btn-info, 
.dp-wrapper .Button--info {
    background: var(--info);
    color: var(--info-contrast);
    border-color: transparent;
}
.dp-wrapper .btn-success, 
.dp-wrapper .Button--success {
    background: var(--success);
    color: var(--success-contrast);
    border-color: transparent;
}
.dp-wrapper .btn-warning, 
.dp-wrapper .Button--warning {
    background: var(--warning);
    color: var(--warning-contrast);
    border-color: transparent;
}
.dp-wrapper .btn-danger, 
.dp-wrapper .Button--danger {
    background: var(--danger);
    color: var(--danger-contrast);
    border-color: transparent;
}
.dp-wrapper .alert {
    background: var(--danger);
    color: var(--danger-contrast)
}
.dp-wrapper .alert.alert-error {
    background: var(--danger);
    color: var(--danger-contrast)
}
.dp-wrapper .alert.alert-success {
    background: var(--success);
    color: var(--success-contrast)
}
.dp-wrapper .alert.alert-info {
    background: var(--info);
    color: var(--info-contrast)
}
.dp-wrapper .bs-badge-primary,
.dp-wrapper .bs-text-primary {
    background-color: var(--dt-color-primary) !important;
    color: var(--dt-color-primary-contrast);
}
.dp-wrapper .bs-badge-secondary,
.dp-wrapper .bs-text-secondary {
    background-color: var( --dt-color-secondary);
    color: var(--dt-color-secondary-contrast);
}
.dp-wrapper .bs-badge-success,
.dp-wrapper .bs-text-success {
    background: var(--success);
    color: var(--success-contrast)
}
.dp-wrapper .bs-badge-danger,
.dp-wrapper .bs-text-danger {
    background: var(--danger);
    color: var(--danger-contrast)
}
.dp-wrapper .bs-badge-warning,
.dp-wrapper .bs-text-warning {
    background: var(--warning);
    color: #fff;
}
.dp-wrapper a.bs-badge-warning:hover {
    color: #000
}
.dp-wrapper .bs-badge-info,
.dp-wrapper .bs-text-info {
    color: #000;
    background-color: #54bbcb
}
.dp-wrapper .bs-badge-light,
.dp-wrapper .bs-text-light {
    color: #111;
    background-color: #f8f9fa
}
.dp-wrapper .bs-badge-dark,
.dp-wrapper .bs-text-dark {
    color: #fff;
    background-color: #343a40
}
.dp-wrapper .bs-badge-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem
}
.dp-wrapper .bs-alert {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    overflow: hidden
}
.dp-wrapper .bs-alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff
}
.dp-wrapper .bs-alert-secondary {
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2
}
.dp-wrapper .bs-alert-success {
    background: var(--success);
    color: var(--success-contrast);
    border-color: transparent;
}
.dp-wrapper .bs-alert-danger {
    background: var(--danger);
    color: var(--danger-contrast);
    border-color: transparent;
}
.dp-wrapper .bs-alert-warning {
    background: var(--warning);
    color: var(--warning-contrast);
    border-color: transparent;
}
.dp-wrapper .bs-alert-info {
    background: var(--info);
    color: var(--info-contrast);
    border-color: transparent;
}
.dp-wrapper .bs-alert-light {
    color: #757576;
    background-color: #fefefe;
    border-color: #fdfdfe
}
.dp-wrapper .bs-alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca
}
/* Legacy callouts - may be deprecated eventually  */
.dp-wrapper .kl_emphasis_callout .card-title i,
.dp-wrapper .kl_information_callout .card-title i,
.dp-wrapper .kl_warning_callout .card-title i {
    background:none !important;
}
/* Clear header underline style if present */
.dp-callout.card h1, 
.dp-callout.card h2, 
.dp-callout.card h3, 
.dp-callout.card h4, 
.dp-callout.card h5, 
.dp-callout.card h6 {
    border-bottom: none !important; 
    margin-top: 0; 
}
.dp-callout.dp-callout-color-success:not(.dp-callout-type-solid) {
    background-color: #e8f6e9;
}
.dp-callout.dp-callout-color-info:not(.dp-callout-type-solid) {
    background-color: #e5f2f8;
}
.dp-callout.dp-callout-color-danger:not(.dp-callout-type-solid) {
    background-color: #ecd8d7;
}
.dp-callout.dp-callout-color-warning:not(.dp-callout-type-solid) {
    background-color: #fffbe5;
}
/* Remove default H3 underline */
.dp-wrapper .card h3 {
    border-bottom:none;
}
/* hide link underlines when link stretches to fill card*/
.dp-wrapper .card a.stretched-link {
    text-decoration:none !important;
}
/* show link underline in editor */
.mce-content-body .dp-wrapper .card a.stretched-link {
    text-decoration:underline !important;
}
/* remove position: absolute to allow editing in the card */
.mce-content-body .dp-wrapper .card a.stretched-link:after {
    position:relative
}
.dp-wrapper .card a.stretched-link:hover:after {
    background-color: rgba(var(--bs-body-color-rgb), 0.2) !important;
}
/* Ensure contrast for links */
.dp-wrapper .cp-bg-primary a,
.dp-wrapper .cp-bg-dp-primary a  {
    color: var(--dt-color-primary-contrast)
}
.dp-wrapper .cp-bg-secondary a,
.dp-wrapper .cp-bg-dp-secondary a {
    color: var(--dt-color-secondary-contrast)
}
.dp-wrapper .cp-dp-accent a,
.dp-wrapper .cp-bg-dp-accent a {
    color: var(--dt-color-accent-contrast)
}
.dp-wrapper .cp-bg-success a {
    color: var(--success-contrast)
}
.dp-wrapper .cp-bg-info a {
    color: var(--info-contrast)
}
.dp-wrapper .cp-bg-warning a {
    color: var(--warning-contrast)
}
.dp-wrapper .cp-bg-danger a {
    color: var(--danger-contrast)
}
/* Darken card headers slightly  */
.dp-wrapper .card .card-header {
    background-color: rgba(var(--bs-body-color-rgb), 0.2) !important;
}
/* Early experiment - revise now that Cards are an actual component */
.dp-wrapper .card-box {
    display:flex; 
    flex-wrap: wrap;
    gap: 1rem 1rem;
}
.dp-wrapper .dp-callout.card.card-system {
    max-width: 250px;
    min-height: 300px;
    align-items: center;
    justify-content: space-between;
    padding-left:0;
    background: #fafafa;
}
.dp-callout.card.dp-callout-type-info.card-system  > .dp-callout-side-emphasis {
    position:relative; 
    height:auto;
}
.dp-wrapper .card-system .card-body {
    text-align:center;
    padding:0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.dp-wrapper .card-system .card-title {
    padding: var(--s-6) var(--s-4) 0 var(--s-4);
    font-size: calc(1rem + 0.6vw);
    font-weight:bold;
}
.dp-wrapper .card-system .card-body > p {
    padding: 0 var(--s-4);
}
.dp-wrapper .card-system i {
    font-size: 75px;
    padding-top: var(--s-8);
}
.dp-wrapper .card-system .dp-content-block {
    margin-bottom: 0;
    padding: var(--s-2);
    background: #ccc;
    margin-top: auto;
    text-transform: uppercase;
}
.dp-wrapper .card-system .dp-content-block p {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* Careers */
.dp-wrapper .card-system.careers  {
    background: #D1DCE0;
}
.dp-wrapper .card-system.careers i  {
    color: #456A7A;
}
.dp-wrapper .card-system.careers .dp-content-block  {
    background: #456A7A;
    color: #fff;
}
/* Headings */
.dp-wrapper h3, 
.dp-wrapper h4,
.dp-wrapper h5,
.dp-wrapper h6 {
  font-weight: bold;
}
.dp-wrapper h3 > i:not(.dp-callout i), 
.dp-wrapper h4 > i:not(.dp-callout i),
.dp-wrapper h5 > i:not(.dp-callout i),
.dp-wrapper h6 > i:not(.dp-callout i) {
  color: var(--dt-color-primary);
  margin-right: var(--s-1);
}
/* === H3 with Underline === */
/* H3 Text */
.dp-wrapper h3 {
  font-size: var(--text-xl);
  margin-top: var(--s-5);
  
  /* Underline */ 
  border-bottom: 2px solid var(--dt-color-primary);
}
/* H3 Icon */
.dp-wrapper:not(.dp-tools-wrapper) h3 i:not(.fa-caret-down):not(.fa-caret-up):not(.dp-panel-heading i):not(.dp-callout i) {
  font-size: var(--text-md);
  background: var(--dt-color-primary);
  margin-right: var(--s-1);
  border-radius: var(--radius-2);
  color: var(--dt-color-primary-contrast);
  border-bottom: none;
  position: relative;
  left: 0;
  display: inline-block;
  height: var(--s-9);
  width: var(--s-9);
  line-height: var(--s-9);
  text-align: center;

  /* underline */ 
  border-radius: var(--radius-2) var(--radius-2) 0 0;

}
/* Plain Heading - overrides underline */
.dp-wrapper.heading-plain h3 {
  border-bottom: none !important;
}
.dp-wrapper:not(.dp-tools-wrapper) h3.heading-plain i:not(.fa-caret-down):not(.fa-caret-up):not(.dp-panel-heading i):not(.dp-callout i)  {
  top: -2px;
  border-radius: var(--radius-2) var(--radius-2) var(--radius-2) var(--radius-2) ; 
}
/* H3 with Line Behind */
.dp-wrapper h3.heading-linebehind {
  line-height: var(--s-7);
  border-bottom: none;
}
.dp-wrapper h3.heading-linebehind:after {
  content: "";
  background-color: var(--dt-color-primary) !important;
  display: inline-block;
  height: 2px;
  position: absolute;
  vertical-align: middle;
  width: 100%;
  margin: var(--s-4) 0 0 var(--s-3);
}
.dp-wrapper:not(.dp-tools-wrapper) h3.heading-linebehind i:not(.fa-caret-down):not(.fa-caret-up) {
  top: -2px;
  border-radius: var(--radius-2) var(--radius-2) var(--radius-2) var(--radius-2) ; 
}
/* === H4 === */
.dp-wrapper h4 {
  font-size: var(--text-lg);
  margin-top: var(--s-5);
}
/* H4 w/ Icon */
.dp-wrapper:not(.dp-tools-wrapper) h4 i:not(.fa-caret-down):not(.fa-caret-up):not(.dp-panel-heading i):not(.dp-callout i) {
    border-bottom: none;
    position: relative;
    display: inline-block;
    margin-right: var(--s-1);
    border-radius: var(--radius-2);
    background: var( --dt-color-secondary);
    color: var(--dt-color-secondary-contrast);
    font-size: var(--text-base);
    height: var(--s-8);
    width: var(--s-8);
    line-height: var(--s-8);
    text-align: center;
    top: -1px;
}
.dp-wrapper h5 {
  font-size: var(--text-md);
  margin-top: var(--s-5);
}
.dp-wrapper h6 {
  font-size: var(--text-base);
  margin-top: var(--s-4);
}
/* === Vertical Tabs Homepage Module list  === 

Uses NDPS vertical tabs with some styling to match old bversion



/* Adds warning on Module List telling people not to edit it directly  */
.mce-content-body .dp-module-list {
    position:relative;
  }
/* DP Module List */
.dp-wrapper .dp-panels-wrapper.dp-tabs-pills-vertical {
    overflow:hidden;
    margin-top: 0 !important;
    border: 1px solid #000;
    border-top: 8px solid var(--dt-color-primary);
    padding: 0; 
}
/* Tab Nav Column (Left) */
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs {
    margin: 1rem -1px 1.25rem 0;
    flex-basis: 50%;
    max-width: 50%;
    position:relative;
}
.dp-wrapper .dp-tabs-pills-vertical .nav-item {
    position:relative;
    border: none;
    overflow:hidden
}
.dp-wrapper .dp-tabs-pills-vertical .nav-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 38px;
    top: 0;
    width: 8px;
    height: 150px;
    background: var(--dt-color-primary);
    z-index: -1;
}
.dp-wrapper .dp-tabs-pills-vertical .nav li:first-child:after {
    top:20px;
}
.dp-wrapper .dp-tabs-pills-vertical .nav li:last-child:after {
   height: 20px;
}
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs .nav-link {
    position:relative !important;
    margin-left: .5rem !important;
    border-color: transparent !important;
    padding-left: 3.5rem !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    background-color: transparent !important;
}
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs .nav-link:before  {
    content: "";
    position: absolute;
    top: 6px;
    left: 18px;
    width: 30px;
    height: 30px;  
    padding: 0.5rem;
    border-radius: 100px;
    background: var(--dt-color-primary);
}
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs .nav-link:hover:before  {
    left: 18px; 
}
.dp-wrapper .dp-tabs-pills-vertical .nav-link:hover {
    border: 1px solid #000 !important;
    border-right: 1px solid #fff !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding-left: 3.5rem;
    position: relative;
    background: transparent !important;
    color: #000;
    font-weight: bold;
}
.dp-wrapper .dp-tabs-pills-vertical .nav-link:before:hover {
    left: 13px;
}
.user_content .dp-wrapper .dp-tabs-pills-vertical .nav>li>a:focus {
    outline-width: 0 !important; /* removes border when clicking on active tab */ 
}
/* hide any icons in the tabs */
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs .nav-link i {
    display:none; 
}
/* Font Awesome */
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs .nav-link i.fas {
    left: 28px;
}
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs .nav-link.active {
    position: relative !important;
    right: 0px !important;
    background-color: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-right: 1px solid #fff !important;
    padding-left: 3.5rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs .nav-link.active:before  {
    left: 18px;
    top: 5px; 
    background:#000;
}
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs .nav-link.active i {
    position: absolute;
    left: 21px;
    top: 12px;
    color: #fff;
}
/* Font Awesome */
.dp-wrapper .dp-tabs-pills-vertical>.nav-tabs .nav-link.active i.fas {
    left: 23px;
}
/* Tab Content Column (right)  */
.dp-wrapper .dp-tabs-pills-vertical>.tab-content {
    align-self: stretch;
    border: none;
    background: #fff;
    padding: 1rem;
    border-left: 1px solid #000;
    border-radius: 0;
}
.dp-wrapper .dp-tabs-pills-vertical .item-group-condensed .ig-header {
    background-color: transparent;
    border: none;
    min-height: 0;
    padding: var(--s-2);
}
.dp-tabs-pills-vertical .context_module_item .type_icon {
    display:none;
}
.dp-tabs-pills-vertical .item-group-condensed .ig-row {
    border: none;
    padding: 0.25rem 0.25rem 0;
}
.dp-tabs-pills-vertical .ig-list .ig-row.ig-published:not(.student-view):before {
    background: none;
    border-top: none;
    border-bottom: none;
}
/* Course Modules Block Heading - remove underline since there's already a border at the top of the homepage module list  */
.dp-wrapper .kl_course_modules h3 {
  border: none !important;
}
/* remove additional padding at top of module list */
.dp-wrapper .dp-module-list.dp-quick-links-all .item-group-condensed .ig-header {
    background-color: transparent;
    border: none;
    min-height: 0;
    padding: 0;
}
/* COMPONENT: Module Progress - Circles*/
.dp-wrapper .dp-tabs-pills.dp-progress-partial-circles > .nav-tabs .nav-item{
  margin-bottom: var(--s-2);
}
.dp-wrapper .dp-tabs-pills.dp-progress-partial-circles > .nav-tabs a.nav-link,
.dp-wrapper .dp-tabs-pillsdp-progress-partial-circles  > .nav-tabs a.nav-link.active {
  padding: 0 var(--s-2);
  margin-left: var(--s-2);
  border-color:transparent;
}
.dp-wrapper .dp-tabs-pills.dp-progress-partial-circles  > .nav-tabs a.nav-link.active {
  background:none;
  color: #000;
  border:none;
  border-bottom: 4px solid #000;
  padding: 0;
  border-radius: 0;
  margin: 0 var(--s-2);
}
.dp-wrapper .dp-tabs-pills.dp-progress-partial-circles > .nav-tabs a.nav-link.moduleName{
  background: none;
  border:none; 
  color: #000;
  padding-left: 0;
  margin-right: var(--s-5);
}
.dp-wrapper .dp-progress-partial-circles .dp-progress-partial-sub-ul li hr {
  border-top-width: 6px;
  margin-bottom: -22px;
}
/* === Vertical Sidebar Mododule Progress Bar === 

This creates a vertical version of the Module list component that gets positioned as a right sidebar using CSS Grid. It's somewhat experimental and doens't work as well on Canvas content types that already have a right column taking up space. 

Must be enabled for the entire theme, so not able to abstract it out to be enabled as a block elsewhere

*/
/*  Grid Layout to enable sidebar layout*/
.dp-wrapper {
  /* position: static; */
  /* display: grid; */
  /* grid-template-columns: 1fr auto; */
  grid-gap: 0;
}
/* disable grid in edit mode */
#tinymce .dp-wrapper {
  display: block;
}
/* Put most blocks in first column */
.dp-wrapper > * {
  grid-column: 1;
  grid-row: auto;
}
/* Banner always spans both columns */
.dp-wrapper .dp-header:first-child {
  grid-column: 1 / span 3;
  grid-row: 1;
}
@media only screen and (min-width: 600px) {
  .module_menu_active {
    grid-template-columns: auto;
  }
}
@media only screen and (min-width: 800px) {
  .dp-wrapper .kl_module_progress_sidebar {
    grid-column: 3;
    grid-row: 2 / span 50;
    width: 250px;
    margin-left: 40px !important;
    margin-right: 0;
    margin-top: 1rem;
  }
}
#tinymce .dp-wrapper .kl_module_progress_sidebar {
  width: auto;
  margin-left: 0 !important;
  padding-right: 15px;
}
.mce-content-body.kl_has_style:not(.kl_mce_view_app) .kl_module_progress_sidebar .kl_module_progress {
  padding: 25px 10px;
}
/* Position sidebar in right Canvas column on Assignment pages */
#assignment_show .description.teacher-version {
    overflow:visible;
}
#assignment_show .description.teacher-version .dp-wrapper .kl_module_progress_sidebar {
    margin-right: -300px; 
    margin-left: 50px !important;
}
.kl_module_progress_sidebar .module_progress_wrapper {
  width: auto;
  position: static;
  margin-left: 4px;
}
.dp-wrapper .kl_module_progress_sidebar nav > h3 {
  border-bottom: none !important;
  font-size: 17px;
  margin-top: 0;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: normal;
  padding: 0;
  position: relative;
  min-height: 0;
  padding: 8px 10px;
  background: var(--dt-color-primary);
  color: var(--dt-color-primary-contrast);
  border-radius: 2px;
  display:none;
}
.dp-wrapper .kl_module_progress_sidebar h3 i {
  display: none;
}
.dp-wrapper .kl_module_progress_sidebar .dp-current_module_name {
  display: block;
  line-height: 1.2;
  font-weight: bold;
  text-transform: none;
}
.dp-wrapper .kl_module_progress_sidebar h3:before
 { 
  /* content: "MODULE: "; */
    font-size: 12px;
    font-weight: bold;
    display:block;
}
.dp-wrapper .kl_module_progress_sidebar .dp-module-details .ig-header,
.dp-wrapper .kl_module_progress_sidebar .dp-module-details .ig-header h3 {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    clip-path:none;
    position: static !important
}
.dp-wrapper .kl_module_progress_sidebar .dp-module-details .ig-header h3 { 
    width: calc(100% + 20px);
    margin: 0 0 0.75rem -10px;
    /* padding: 8px 10px; */
    font-size: var(--text-md);
}
.dp-wrapper .kl_module_progress_sidebar .module-item-status-icon {
  display: none;
}
.dp-wrapper .kl_module_progress_sidebar li .ig-type-icon i:before {
  margin-top: 3px;
}
.dp-wrapper .kl_module_progress_sidebar .ig-row {
  margin-right: 0;
}
.dp-wrapper .kl_module_progress_sidebar .dp-current .ig-row {
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  background: transparent !important; 
}
.dp-wrapper .kl_module_progress_sidebar .dp-current .ig-row a {
  text-decoration: none !important;
  font-weight: bold !important;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  top: 2px;
}
.dp-wrapper .kl_module_progress_sidebar .dp-current .ig-info {
  padding: 0 0 3px 0;
}
/* Vert Progress Styling for Module Details - maybe make this default at some point  */
.dp-wrapper  .kl_module_progress_sidebar  .dp-module-details {
  padding-left: 10px
}
.dp-wrapper  .kl_module_progress_sidebar  .dp-module-details .ig-type-icon i:before {
  background: var(--dt-color-primary);
  border-radius: 1.5rem;
  padding: 5px;
  height: 1.25rem;
  width: 1.25rem;
  content: "";
  /* if we want to add icons */
  /* font-size: 12px;
  color: #fff; */
}
.dp-wrapper  .kl_module_progress_sidebar  .dp-module-details li.dp-current .ig-type-icon i:before {
  background: #000;
  left: -1px;
  position: relative;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .ig-list .ig-row {
  margin-left: -14px;
  background: transparent;
  align-items: flex-start;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .ig-info {
  margin-right: 0;
  margin-left: 5px;
  font-size: 14px;
  padding-top: 3px;
  min-height: 30px;
}
.dp-wrapper  .kl_module_progress_sidebar  .dp-module-details .ig-info a {
  text-decoration: none !important;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .dp-current .ig-info a {
  color: #000 !important;
  display: block;
  padding: 2px 6px 6px 3px;
  text-decoration: none !important;
  position: relative;
  left: -4px;
  margin-top: 1px;
  font-weight: bold;
  font-size: 110%;
  border-radius: 2px;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details li,
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .context_module_item.context_module_item_hover,
.dp-wrapper .kl_module_progress_sidebar .dp-module-details .ig-list .ig-row:hover  {
  position: relative;
  background: transparent;
}
/* creates the vertical line */
.dp-wrapper  .kl_module_progress_sidebar  .dp-module-details li:before {
  background-color: var(--dt-color-primary);
  width: 7px;
  content: '';
  position: absolute;
  top: 10px;
  bottom: -12px;
  left: -2px;
}
.dp-wrapper  .kl_module_progress_sidebar  .dp-module-details li:last-of-type::before {
  display: none;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .dp-current .module-item-title i {
  display: none;
}
.dp-wrapper  .kl_module_progress_sidebar  .dp-module-details .item-group-condensed .ig-header {
  background: none;
  border: none;
}
.dp-wrapper .kl_module_progress_sidebar  .context_module_item.context_module_item_hover, 
.dp-tools-wrapper .kl_module_progress_sidebar  .context_module_item.context_module_item_hover, 
#content .dp-wrapper .kl_module_progress_sidebar  .context_module_item.context_module_item_hover {
    background: none;
}
/* Text Header */
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .context_module_sub_header .title {
  margin-left: 30px;
}
/* align circles over line when module items are indented  */
.dp-wrapper .kl_module_progress_sidebar .kl_module_details .context_module_item.indent_1 .type_icon,
.dp-wrapper .kl_module_progress_sidebar .kl_module_details .context_module_item.indent_2 .type_icon,
.dp-wrapper .kl_module_progress_sidebar .kl_module_details .context_module_item.indent_3 .type_icon,
.dp-wrapper .kl_module_progress_sidebar .kl_module_details .context_module_item.indent_4 .type_icon,
.dp-wrapper .kl_module_progress_sidebar .kl_module_details .context_module_item.indent_5 .type_icon {
  padding: 0;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .context_module_item.indent_1 .module-item-title {
  padding-left: 10px;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .context_module_item.indent_2 .module-item-title {
  padding-left: 20px;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .context_module_item.indent_3 .module-item-title {
  padding-left: 30px;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .context_module_item.indent_4 .module-item-title {
  padding-left: 40px;
}
.dp-wrapper .kl_module_progress_sidebar  .dp-module-details .context_module_item.indent_5 .module-item-title {
  padding-left: 50px;
}
/*#region ***** Component: Module Tabs ******************************** */
/* Partial Progress Tabs Component  */
.dp-progress-partial-tab{
  margin-bottom: 1rem;
}
#content .dp-wrapper .dp-progress-partial-tabs .nav-tabs {
  margin-top: 1rem;
  color: inherit;
  background:none;
  position: relative;
  z-index: 1;
  bottom: 2px;
  border-bottom:none;
}
.dp-wrapper .dp-progress-partial-tabs .nav-tabs .nav-link {
}
.dp-wrapper .dp-progress-partial-tabs .nav-tabs .nav-link.active {
  position: relative;
  bottom: -6px;
}
#content .dp-wrapper .dp-progress-partial-tabs li {
  padding-bottom: 0;
  min-height: 40px;
}
.dp-progress-partial-tab .nav-tabs>li a {
  font-size: 1.125rem;
  font-weight:bold;
}
/* Module Name */
#content .dp-wrapper .dp-tabs.dp-progress-partial-tabs .nav-link.moduleName {
  color: #000;
}
#content .dp-wrapper .dp-progress-partial-tabs .dp-progress-partial-sub {
  background: none;
  border: 1px solid #000;
  border-radius: 3px;
}
#content .dp-wrapper .dp-progress-partial-tabs .dp-progress-partial-sub a {
  border:none;
}
#content .dp-wrapper .dp-progress-partial-tabs .dp-progress-partial-sub .active {
  color: #000;
  text-transform: uppercase;
  font-weight: normal;
}
#content .dp-wrapper .dp-progress-partial-tabs .nav-tabs .nav-link.active,
#content .dp-wrapper .dp-progress-partial-tabs .nav-tabs .nav-link.active:hover {
  padding: 0.5rem 0.75rem !important;
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
  font-size: 1rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  color: #000; 
  background:#fff;
  text-transform:uppercase;
  margin-top: -4px;
}
.dp-progress-partial-tab .nav-tabs>li a:focus, 
.dp-progress-partial-tab .nav-tabs>li a:hover {
  color: #000; 
  background:none;
}
#content .dp-wrapper .dp-progress-partial-tabs .nav-tabs a:not(.active) {
  color: var(--bs-link-color);
  border-bottom: 0;
}
li.dp_tabs_nav_ul_active_sub_page a {
  border-radius: 3px;
  color: #000;
  text-transform: uppercase
}
/*#endregion*/
/* COMPONENT: Module Progress - Top */
/* contains Icon Progress Bar component*/
.dp-wrapper .kl_module_navigation_block,
.dp-wrapper .dp-module-navigation-block {
    margin-bottom: var(--s-5);
    margin-top: var(--s-2);
    position: relative;
    z-index: 0;
    /* keeps popovers from getting covered  */
  }
.dp-wrapper .kl_module_navigation_block h3 {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    transform: translatez(0);
  }
.dp-wrapper .kl_module_navigation_block .kl_current_module_container,
  .dp-module-navigation-block .dp-current-module-container {
    margin-top: -15px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--dt-color-primary);
  }
/* hide module nav  block on mobile */
@media (max-width: 400px) {
    .dp-wrapper .kl_module_navigation_block {
      display:none;
    }
  }
/* Module name that appears below progress bar */
.dp-wrapper .kl_module_navigation_block .kl_current_module_name,
.dp-module-navigation-block .dp-personalized-token.dp-current-module-name {
    font-size: 18px;
    color: #000;
    position: relative;
    bottom: -14px;
    display: inline-block;
    padding-right: 5px;
    background: #fff;
    font-weight :bold;
  }
/* COMPONENT: Icon Progress Bar */
.dp-wrapper .dp-progress-icons {
    margin-top: 10px;
    width:100%; 
  }
.dp-wrapper .dp-progress-icons ul {
    margin-right:1px; /* to keep current icon from getting cut off at last point in module */
  }
.dp-wrapper .dp-progress-icons .dp-colored-bar {
    height: 12px !important;
    box-shadow: none !important;
  }
i
  .dp-wrapper .dp-progress-icons li:first-child .dp-colored-bar {
    border-left: 1px solid #ddd;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
.dp-wrapper .dp-progress-icons li.dp-complete .dp-colored-bar,
  .dp-wrapper .dp-progress-icons li.dp-current .dp-colored-bar {
    border: 2px solid var(--dt-color-primary);
    background: var(--dt-color-primary);
  }
.dp-wrapper .dp-progress-icons li.dp-pending .dp-colored-bar {
    background-color: #ccc !important;
    border-top: none !important;
    border-bottom: none !important;
  }
.dp-wrapper .dp-progress-icons li a {
    line-height: 1rem;
    top: -5px;
    right: 0 !important;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--dt-color-primary) !important;
    box-shadow: none;
  }
.dp-wrapper .dp-progress-icons li.dp-complete a {
    /* override inline styles */
    border: 3px solid var(--dt-color-primary) !important;
    background: var(--dt-color-primary) !important;
  }
.dp-wrapper .dp-progress-icons li.dp-current {
    z-index:2;
  }
.dp-wrapper .dp-progress-icons li.dp-current a {
    border: 3px solid #000 !important;
    background: #000 !important;
    box-shadow: none !important;
    right: -1px !important;
  }
.dp-wrapper .dp-progress-icons li.dp-current:last-child a { /* brighter color when at last position in progress bar  */
    border: 3px solid #000 !important;
    background: #000;
    box-shadow: none !important;
  }
.dp-wrapper .dp-progress-icons li.dp-pending {
    z-index:1;
  }
.dp-wrapper .dp-progress-icons li.dp-pending a {
    color: #555;
    border: 1px solid #ccc !important;
    background: #cccccc !important;
  }
.dp-wrapper .dp-progress-icons li i {
    line-height: 1;
    position: relative;
    display:inline-block; /* needed for url content types */ 
  }
.dp-wrapper .dp-progress-icons li i.icon-assignment {
    left: 2px;
  }
.dp-wrapper .dp-progress-icons li.dp-current i {
    color: #fff;
  }
.dp-wrapper .dp-progress-icons li.dp-pending i {
    top: 2px;
    color: #555;
  }
.dp-wrapper .dp-progress-icons li i::before {
    font-size: .95rem !important;
  }
#kl_wrapper_3 .dp-wrapper .dp-progress-icons li.dp-pending i::before {
    top: 1px;
    position: relative;
  }
/***** Design Tools Core Block: Navigation *****/
/* Custom variable for hiding nav block; used in theme config */
:root {
  --navigation-visibility: none; /* hidden by default */ 
}
.theme-link-grid {
  display: var(--navigation-visibility); 
}
.dp-wrapper .theme-link-grid {
    position: relative;
    z-index: 2;
    top: -.2rem;
    border-bottom-right-radius: var(--radius-2);
    border-bottom-left-radius: var(--radius-2);
    padding: 0;
  }
.dp-wrapper .theme-link-grid ul {
    margin: 0;
    padding: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
  }
.dp-wrapper .theme-link-grid ul,
  .dp-wrapper .theme-link-grid ul.kl_nav_list_1 {
    background: var(--dt-color-primary);
    margin: 0;
    padding-bottom: var(--s-2-5) !important;
    padding-right: var(--s-2-5) !important;
  }
.dp-wrapper .theme-link-grid li a,
  .dp-wrapper .theme-link-grid li a:visited {
    display:block;
    border: none;
    text-decoration: none !important;
    padding: var(--s-0-5) var(--s-0-3) var(--s-0-5) var(--s-3);
    margin: var(--s-2-5) 0 0 var(--s-2-5);
    box-shadow: inset 0 0 3px #999;
    border-radius: var(--radius-2);
    color: var(--dt-color-secondary-contrast);
  }
.dp-wrapper .theme-link-grid i {
    color: #fff;
    border-bottom-width: 0;
    border-radius: var(--radius-2);
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
    margin-right: var(--s-1);
    width: var(--s-6);
    background: none;
  }
@media screen and (min-width:500px) {
    body:not(.course-menu-expanded) .dp-wrapper .theme-link-grid ul {
     padding-bottom:0;
     overflow:hidden
    }
    body:not(.course-menu-expanded) .dp-wrapper .theme-link-grid ul li {
     font-weight:400;
     list-style-type:none;
     display:table-cell;
     width:auto;
     float:none;
     display:block;
     width:50%;
     float:left
    }
   }
@media screen and (min-width:850px) {
    body.course-menu-expanded .dp-wrapper .theme-link-grid ul {
     padding-bottom:0;
     overflow:hidden
    }
    body.course-menu-expanded .dp-wrapper .theme-link-grid ul li{
     background:none;
     display:block;
     padding:0;
     width:50%;
     display:inline-block;
     float:left
    }
   }
@media screen and (min-width:1100px) {
    body.course-menu-expanded .dp-wrapper .theme-link-grid ul li {
     display:table-cell;
     width:100%;
     float:none
    }
   }
.dp-wrapper thead {
    background-color: var( --dt-color-secondary);
    color: var(--dt-color-secondary-contrast);
}
.dp-wrapper thead tr th {
    padding: var(--s-2);
}
#kl_wrapper_3 .ai-free, 
#kl_wrapper_3 .ai-free-minimal,
#kl_wrapper_3 .ai-limited, 
#kl_wrapper_3 .ai-friendly,
.dp-wrapper .ai-free, 
.dp-wrapper .ai-free-minimal,
.dp-wrapper .ai-limited, 
.dp-wrapper .ai-friendly {
    position:relative;
    margin-top: var(--s-5, 1rem);
    margin-bottom: var(--s-5, 1rem);
    padding: var(--s-4, 1rem) 170px var(--s-2, .5rem) var(--s-4, 1rem);
    border-radius: var(--radius-2, .25rem);
    min-height: 165px;
}
#kl_wrapper_3 .ai-free:after,
#kl_wrapper_3 .ai-free-minimal:after,
#kl_wrapper_3 .ai-limited:after,
#kl_wrapper_3 .ai-friendly:after,
.dp-wrapper .ai-free:after,
.dp-wrapper .ai-free-minimal:after,
.dp-wrapper .ai-limited:after,
.dp-wrapper .ai-friendly:after {
    content:'';
    display:block;
    width: 125px;
    height: 125px;
    position:absolute; 
    top:var(--s-5, 1rem);
    right:var(--s-5, 1rem);
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 1rem;
}
#kl_wrapper_3 .ai-free,
.dp-wrapper .ai-free {
    background-color: #faedec;
    border: 1px solid #b30000;
}
#kl_wrapper_3 .ai-free:after,
.dp-wrapper .ai-free:after {
    background-image: url('https://cte.bc.edu/canvas/components/ai-guideposts-main/images/AI-Free.png');
}
#kl_wrapper_3 .ai-free-minimal,
.dp-wrapper .ai-free-minimal {
    border:none;
    margin-bottom: none;
    padding: var(--s-5, 1rem) 170px var(--s-5, 1rem) 0;
    background-position-x: right;
}
#kl_wrapper_3 .ai-free-minimal:after,
.dp-wrapper .ai-free-minimal:after {
    left:auto;
    right: var(--s-5, 1rem);
    background-image: url('https://cte.bc.edu/canvas/components/ai-guideposts-main/images/AI-Free.png');
}
#kl_wrapper_3 .ai-limited,
.dp-wrapper .ai-limited {
    background-color: #fffbe5;
    border: 1px solid #eed755;
}
#kl_wrapper_3 .ai-limited:after,
.dp-wrapper .ai-limited:after {
    background-image: url('https://cte.bc.edu/canvas/components/ai-guideposts-main/images/AI-Limited.png');
}
#kl_wrapper_3 .ai-friendly,
.dp-wrapper .ai-friendly {
    background-color: #cedfbe;
    border: 1px solid #176035;
}
#kl_wrapper_3 .ai-friendly:after,
.dp-wrapper .ai-friendly:after {
    background-image: url('https://cte.bc.edu/canvas/components/ai-guideposts-main/images/AI-Friendly.png');
}
#kl_wrapper_3 .ai-free h3:first-child, 
#kl_wrapper_3 .ai-free-minimal h4:first-child, 
#kl_wrapper_3 .ai-free-minimal h3:first-child, 
#kl_wrapper_3 .ai-free h4:first-child, 
#kl_wrapper_3 .ai-limited h3:first-child, 
#kl_wrapper_3 .ai-limited h4:first-child, 
#kl_wrapper_3 .ai-friendly h3:first-child,
#kl_wrapper_3 .ai-friendly h4:first-child,
.dp-wrapper .ai-free h3:first-child, 
.dp-wrapper .ai-free h4:first-child, 
.dp-wrapper .ai-free-minimal h3:first-child, 
.dp-wrapper .ai-free-minimal h4:first-child, 
.dp-wrapper .ai-limited h3:first-child, 
.dp-wrapper .ai-limited h4:first-child, 
.dp-wrapper .ai-friendly h3:first-child,
.dp-wrapper .ai-friendly h4:first-child {
    margin-top: 0 !important;
    margin-bottom: var(--s-4) !important;
    margin-bottom: 0 !important;
    border-bottom:none; 
}
#kl_wrapper_3 .ai-free p:first-child, 
#kl_wrapper_3 .ai-free-minimal p:first-child, 
#kl_wrapper_3 .ai-limited p:first-child, 
#kl_wrapper_3 .ai-friendly p:first-child,
.dp-wrapper .ai-free p:first-child, 
.dp-wrapper .ai-free-minimal p:first-child, 
.dp-wrapper .ai-limited p:first-child, 
.dp-wrapper .ai-friendly p:first-child {
    margin-top: 0 !important;
}
/* Mobile Adjustments */
@media screen and (max-width:520px) {

    #kl_wrapper_3 .ai-free,
    #kl_wrapper_3 .ai-free-minimal, 
    #kl_wrapper_3 .ai-limited, 
    #kl_wrapper_3 .ai-friendly,
    .dp-wrapper .ai-free,
    .dp-wrapper .ai-free-minimal, 
    .dp-wrapper .ai-limited, 
    .dp-wrapper .ai-friendly {  
        padding: var(--s-5, 1rem);
}

    #kl_wrapper_3 .ai-free:after,
    #kl_wrapper_3 .ai-free-minimal:after,
    #kl_wrapper_3 .ai-limited:after,
    #kl_wrapper_3 .ai-friendly:after,
    .dp-wrapper .ai-free:after,
    .dp-wrapper .ai-free-minimal:after,
    .dp-wrapper .ai-limited:after,
    .dp-wrapper .ai-friendly:after {
        position: relative;
        top: 0;
        left: calc(50% - 70px);
    }
}
/* Container Styling */
#enroll_form {
            max-width: 380px; 
            margin: 40px 0;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            position: relative;
            padding: 30px 25px 30px 25px;   
            color: #2d3b45;
            text-align: center; 
        }
/* The Maroon Header Bar */
#enroll_form::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 12px;
            background-color: #501315; /* BC Maroon */
        }
/* Enrollment Text */
#enroll_form div:first-of-type {
            font-size: 16px;
            line-height: 1.4;
        }
#enroll_formstrong {
            font-weight: 700;
        }
/* Layout for the footer area */
.ic-Self-enrollment-footer-modal-layout {
            margin-top: 18px;
        }
/* Stacked centered layout */
.ic-Self-enrollment-footer {
            display: flex;
            flex-direction: column-reverse; 
            align-items: center;
            gap: 12px; 
        }
/* Privacy Link */
.footer-info {
            color: #004c97; 
            text-decoration: none;
            font-size: 14px;
            display: inline-block;
        }
.footer-info:hover {
            text-decoration: underline;
        }
/* The "Enroll in Course" Button */
.btn-primary.btn,
        .ic-Self-enrollment-footer__Primary .btn {
            background-color: #2b436b !important; 
            border: none !important;
            color: #ffffff !important;
            padding: 12px 30px !important; 
            border-radius: 4px !important; 
            font-weight: 500 !important;
            text-transform: none; 
            letter-spacing: normal;
            font-size: 17px; 
            cursor: pointer;
            transition: opacity 0.2s ease;
            box-shadow: none !important;
            max-width: 280px;
        }
.btn-primary.btn:hover {
            opacity: 0.9;
        }
/* Mobile Responsiveness */
@media (max-width: 420px) {
            .ic-Self-enrollment-form {
                margin: 20px auto;
                max-width: 100%;
                padding: 30px 20px 20px;
            }
        }
/* Second Button */
.ic-Self-enrollment-footer__Primary .btn {
            margin-bottom:10px;
        }
/***** Design Tools Core Block: Banner Image *****/
/* Notes
The banner image gets added to the DT default themes, but is hidden on most CDIL-managed themes because we us background images in the banner.

*/
/* Custom variable for hiding banner block block; used in theme config */
:root {
    --banner-image-visibility: none; 
    --banner-image-radius: var(--radius-2);
}
#kl_wrapper_3 #kl_banner_image,
.dp-wrapper .dp-banner-image {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--s-4) * -1 + -2px);
    margin-bottom: -1px;
}
#kl_wrapper_3.home #kl_banner_image,
.dp-wrapper.home .dp-banner-image {
    display: var(--banner-image-visibility); 
}
#kl_wrapper_3 #kl_banner_image img,
.dp-wrapper .dp-banner-image img {
    width:100%;
    border-bottom-left-radius: var(--banner-image-radius);
    border-bottom-right-radius: var(--banner-image-radius);
}
/* Base Banner Component */
:root {
/* Home Banner */
--home-banner-bg: #666;
--home-banner-bg-size: cover;
--home-banner-padding: var(--s-5) var(--s-6);
--home-banner-gap: var(--s-4);

/* Homepage Banner Logo
@banner-logo: true - has a logo image inserted via css
See BANNER-PATTERNS-REFERENCE.md for complete pattern documentation
*/
--logo-bg: url('https://cte.bc.edu/canvas/themes/bc-general/bc-logo.png') no-repeat left center; 
--logo-visibility: ' '; /* default is content: ' '; hidden is "none" */
--logo-padding: 0 var(--s-4) 0 var(--s-1);

/* Banner Font-Family */
--banner-font-family: inherit;

/* Course Title - General */
--course-title-style: none; /* Text-transform - default is none; option for uppercase */ 
--course-title-size: var(--text-3xl);
--course-title-ltr-sp: 1px;
--course-title-text-shadow: none;
--course-title-color: var(--dt-color-primary-contrast);
--course-title-bg: none;

/* Homepage Course Title */
--home-h2-bg: none; /* Background for title container; default its none; bg used in banner-topbar */ 
--home-h2-bg-size: cover; 
--home-h2-gap: var(--s-4);
--home-h2-margin: 0;
--homepage-title-padding: var(--s-5) 0 var(--s-5) 0;
--homepage-title-margin: 0;
--homepage-title-width: auto;
--homepage-title-alignment: normal; /* aligned left by default; justify-content for centered */
--homepage-title-radius: 0; /* Option to add radius when top bar is white  */

/* Description Field Order - Home */
--home-description-order: -1; /* default is used for program info */
/* other options:
  - Below site title, usually if used for course info (banner-custom): 0; 
  - If used for logo (banner-custom) -2;  
*/

/* Homepage Course Info Bar (#kl_banner_left, dp-header-pre) */

/* @infobar: infobar-solid-bg */
--course-info-bar-padding: var(--s-1) var(--s-6);
--course-info-bar-bg: var(--dt-color-primary);
--course-info-bar-size: var(--text-md);
--course-info-bar-style: none;
--course-info-bar-color: var(--dt-color-primary-contrast);
--course-info-bar-alignment: normal; 

/* @infobar: infobar-transparent (#kl_banner_left, dp-header-pre) */
/*
--course-info-bar-padding: 0 var(--s-5) var(--s-6) var(--s-5);
--course-info-bar-bg: none; 
*/

/* Field Positions /*
/*  
  - width: auto; field aligns to the right 
  - width: 100%; field aligns left, stacked under logo
*/
--home-description-position: 100%; /* @description-position: left - field is stacked under logo*/
/*--home-description-position: auto; @description-position: right - field is positioned to the right of logo */
--home-subitle-position: 100%; /* field is stacked*/
--bannerleft-position: 100%; /* field is stacked*/

/* Home Description */ 
--home-description-padding: 0; 
--home-description-color: var(--home-description-color); /* default is primary contrast */
--home-description-background: none;
--home-description-max-width: auto; /* for right aligned description */ 
--home-description-v-align: center;

/*Module Banner */
--module-banner-padding: var(--s-3) var(--s-5);
--module-banner-bg: var(--dt-color-primary);
--module-bg-size: auto;
--module-h2-bg: none; /* not typically used */
--module-h2-gap: var(--s-4);
--module-course-title-style: none; /* Text-transform - default is none; option for uppercase */
--module-title-color: inherit; /* default is primary contrast */ 
--module-drop-shadow: var(--box-shadow-1); /* none for banners with white backgrounds */ 
}
/* @banner-style: banner-full-bg */
/* 
- full bg image,
- logo stacked 
*/
#kl_wrapper_3 #kl_banner,
.dp-wrapper .dp-header {
  position:relative; /* in case anything is absolutely positioned  */
  display: flex;
  flex-wrap: wrap;
  background: var(--module-banner-bg);
  background-size: var(--module-bg-size);
  justify-content: space-between;
  color: var(--dt-color-primary-contrast);
  border-radius: var(--radius-2);
  box-shadow: var(--module-drop-shadow);
  overflow:hidden; /* to force child elements to respect border radius */
  font-family: var(--banner-font-family);
}
#kl_wrapper_3:not(.home) #kl_banner,
.dp-wrapper:not(.home) .dp-header {
  margin-top: var(--s-3);
  padding: var(--module-banner-padding) !important; 
  text-transform: none; /* TEMP OVERRIDE */
}
#kl_wrapper_3.home #kl_banner,
.dp-wrapper.home .dp-header {
  background: var(--home-banner-bg);
  background-size: var(--home-banner-bg-size);
  padding: var(--home-banner-padding) !important; 
  gap: var(--home-banner-gap);
  /* animation-name: fadeIn;
  animation-duration: 1s; */
  margin-top: var(--s-4);
  margin-bottom: var(--s-4);
}
/* Logo */
#kl_wrapper_3.home #kl_banner:before,
.dp-wrapper.home .dp-header:before {
  content: var(--logo-visibility);
  background: var(--logo-bg);
  order: -3;
  width: 100%;
  max-width: 400px;
  min-height: 50px;
  background-size: contain;
  margin: var(--logo-padding);
  /* override NDPS editor.css */
  position: static;
  border: none; 
}
#kl_wrapper_3 #kl_banner h2,
.dp-wrapper .dp-header h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  background: none;
  gap: var(--s-4);
  margin: 0; 
  font-family: var(--banner-font-family); 
  background: var(--module-h2-bg); 
  border-radius: var(--homepage-title-radius);
}
/* Home Banner H2 - Title Container */
#kl_wrapper_3.home #kl_banner h2,
.dp-wrapper.home .dp-header .dp-heading {
  background: var(--home-h2-bg); /* Background for title container; default its none; bg used in banner-topbar */ 
  background-size: var(--home-h2-bg-size);
  gap: var(--home-h2-gap);
  margin: var(--home-h2-margin);
}
#kl_wrapper_3:not(.home) #kl_banner h2,
.dp-wrapper:not(.home) .dp-header .dp-heading {
  gap: 0;
}
/* Homepage Course Title Aligment */
.dp-wrapper.home .dp-header .dp-heading {
    justify-content: var(--homepage-title-alignment); 
}
#kl_wrapper_3 #kl_banner_right,
.dp-wrapper .dp-header-title {
  padding: var(--s-2) 0;
  font-size: var(--text-2xl);
  color: var(--course-title-color);
  font-weight: bold;
  line-height: 1.2;
  text-transform: var(--course-title-style);
  letter-spacing: var(--course-title-ltr-sp);
  text-shadow: var(--course-title-text-shadow);
  animation-name: fadeIn;
  animation-duration: 1.5s;
}
#kl_wrapper_3.home #kl_banner_right,
.dp-wrapper.home .dp-header-title {
  font-size: var(--course-title-size); 
  padding: var(--homepage-title-padding);
  margin: var(--homepage-title-margin);
  text-transform: var(--course-title-style);
  letter-spacing: var(--course-title-ltr-sp);
  font-weight: bold;
  line-height: 1.1;
  text-transform: var(--course-title-style);
  letter-spacing: var(--course-title-ltr-sp);
  text-shadow: var(--course-title-text-shadow);
  max-inline-size: var(--homepage-title-width); /* limit width of title */
  background: var(--course-title-bg);
  flex-grow: 0;
}
.dp-wrapper:not(.home) .dp-header .dp-header-title {
  text-transform: var(--module-course-title-style); /* Text-transform - default is none; option for uppercase */
  color: var(--banner-title-color); 
}
#kl_wrapper_3 #kl_banner_left,
.dp-wrapper .dp-header-pre {
  order: 1;
  font-size: 1rem;
  font-weight:bold;
  padding: 0 var(--s-2) 0 var(--s-2);
  margin: var(--s-4);
  justify-content: var(--course-info-bar-alignment);
}
#kl_wrapper_3:not(.home) #kl_banner_left,
.dp-wrapper:not(.home) .dp-header-pre {
  margin: var(--s-1) var(--s-4) var(--s-1) 0;
  padding: 0;
  color: var(--dt-color-primary-contrast)
}
/* Home Course Info Bar */
#kl_wrapper_3.home #kl_banner_left,
.dp-wrapper.home .dp-header-pre {
  width: var(--bannerleft-position);
  background: var(--course-info-bar-bg);
  color: var(--course-info-bar-color);
  padding: var(--course-info-bar-padding);
  margin:0 !important; /* override new DP defaults */ 
  text-transform: var(--course-info-bar-style);
  font-size: var(--course-info-bar-size);
  font-weight:bold;
  letter-spacing: 1px;
  /* account for header padding */
  position: relative;
  bottom: calc(var(--s-5) * -1); 
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12) * -1) !important;
  margin-top: calc(var(--s-5) * -1) !important; 
}
#kl_wrapper_3 #kl_description:not(.home),
.dp-wrapper .dp-header-description:not(.home) {
  width: 100%;
  padding: 0 var(--s-5) 0 0;
  font-weight:normal;
}
/* Description Field */
#kl_wrapper_3.home #kl_description,
.dp-wrapper.home .dp-header-description {
  order: var(--home-description-order);
  width: var(--home-description-position);
  background: var(--home-description-background);
  align-self: var(--home-description-v-align);
  padding: var(--home-description-padding);
  font-weight:bold; 
  font-size: var(--text-md);
  color: var(--home-description-color);
  max-width: var(--home-description-max-width);
  line-height: 1.2; 
}
#kl_wrapper_3.home #kl_description p,
.dp-wrapper.home .dp-header-description p {
  margin-top:0;
}
#kl_wrapper_3 .kl_subtitle,
.dp-wrapper .dp-header-subtitle {
  order: -1; 
  width: 100%; /* field is stacked, order on subtitle */
  margin: 0; /* reset paragraph */
  background: none;
  text-transform: uppercase;
  padding: 0 var(--s-5) 0 0;
  font-weight:normal;
  font-size: var(--text-sm);
}
#kl_wrapper_3.home .kl_subtitle,
.dp-wrapper.home .dp-header-subtitle {
  /* hide field text if present */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;

  text-transform: none;
  order: -1;
  margin: 0; /* reset paragraph */
  width: 100%; /* field is stacked*/
  font-weight:bold; 
  font-size: var(--text-md);
}
/* Mobile Adjustments */
@media screen and (max-width:520px) {

  #kl_wrapper_3 #kl_banner,
  .dp-wrapper .dp-header {
    text-align:center;
    justify-content: center;
    padding-top: var(--s-4);
  }

  /* Logo */
  #kl_wrapper_3.home #kl_banner:before,
  .dp-wrapper .dp-header:before {
    background-position: center;
    margin-left: var(--s-3);
    margin-right: var(--s-3);
  }

  #kl_wrapper_3 #kl_banner h2,
  .dp-wrapper .dp-header h2 {
    justify-content: center;
  }

#kl_wrapper_3 #kl_banner_left,
  .dp-wrapper .dp-header-pre {
    justify-content: center;
}

#kl_wrapper_3:not(.home) #kl_banner_left,
  .dp-wrapper:not(.home) .dp-header-pre {
    width: 100%; /* force it to stack */
}

}
@keyframes fadeIn {
  from {
      opacity: 0
  }

  to {
      opacity: 1
  }
}
.fadeIn {
  animation-name: fadeIn;
  animation-duration: .5s
}
/* @banner-style: banner-topbar */
/* 
  - solid top bar
  - bg image on h2 
  - additions: padding above h2, padding on #kl_banner_right
*/
/* @banner-style: v3-simple */
/* 
  - close to DT default
  - solid top bar
  - banner image can be changed with DT
*/
/* Other variations
  - logo/text: stacked, text to the right
  - course info bar: no bg
 */
/* Uppercase course Title */
/* 
font-size: var(--text-2xl);
text-transform: uppercase; 
*/
/* Course Info Bar Transparent Background 
.home #kl_banner_left,
.dp-wrapper.home .dp-header-pre {
  width: var(--bannerleft-position);
  background: none;
  padding: var(--s-0) var(--s-6) var(--s-4) var(--s-6);
}
 */
/* === Revised Page Titles === */
/* h2, h3, h4, h5 {
  font-weight: bold;
  color: #333;
}

.pages.show h1.page-title {
    color: #333 !important;
    font-size: 2.4rem !important;
    font-weight: bold;
} 

.topic h1.discussion-title {
  font-size: 2.1rem!important;
  margin-bottom: 0.5rem!important;
  font-weight: bold;
  line-height: 1.1;
  max-width: 530px;
  color: #333;
}

.is-masquerading-or-student-view .topic h1.discussion-title {
  max-width: 635px;
}

#assignment_show .title-content .title {
  font-size: 2.2rem !important;
  font-weight: bold !important;
  color: #333;
}

.quiz-header h1 {
    font-size: 2.2rem !important;
    font-weight: bold !important;
    color: #333 !important;
}

.quiz-header .row-fluid  > h2 {
  font-weight: bold !important;
  color: #333 !important;
  font-size: 2rem !important;
}

.dp-wrapper h2, .dp-wrapper .h2 {
  font-weight: bold;
  color: #333;
} */
/* COMPONENT: Bootstap Columns Theming (Advanced > HTML Snippets  */
/* default columns (no styling) */
#kl_wrapper_3 .bs-container .bs-col-md:first-of-type,
.dp-wrapper .container-fluid .bs-col-md:first-of-type {
  margin-left:-15px; /* align to the left */ 
}
/* Column Cards  */
#kl_wrapper_3 .bs-container.column-cards .bs-col-md,
.dp-wrapper .container-fluid.column-cards .col-md {
  background-color: var( --dt-color-secondary);
  margin-left: 10px;
  color: var(--dt-color-secondary-contrast); 
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  padding: 15px 25px;
  margin-bottom:10px;
}
#kl_wrapper_3 .bs-container.column-cards .bs-col-md:first-of-type,
.dp-wrapper .container-fluid.column-cards .col-md:first-of-type {
  margin-left: 0px; 
}
#kl_wrapper_3 .bs-container.column-cards .bs-row:first-of-type,
.dp-wrapper .container-fluid.column-cards .bs-row:first-of-type {
  margin-bottom: 0px;
}
@media only screen and (max-width: 1100px) {
  #kl_wrapper_3 .bs-container.column-cards .bs-col-md,
  .dp-wrapper .container-fluid.column-cards .col-md{
    margin-left: 0px;
  }
}
#kl_wrapper_3 .bs-container.column-cards .bs-col-md h4,
.dp-wrapper .container-fluid.column-cards .col-md h4{
  font-weight: bold;
  color: var(--dt-color-secondary-contrast); 
}
/*#region ***** COMPONENT: Column Cards - White  ******************************** */
#kl_wrapper_3 .bs-container.column-cards-white .bs-col-md,
.dp-wrapper .container-fluid.column-cards-white .col-md{
  margin-left: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  padding: 15px 25px;
  margin-bottom:10px;
  border-radius: .25rem;
  border: 1px solid var(--dt-neutral-light);
}
#kl_wrapper_3 .bs-container.column-cards-white .bs-col-md:first-of-type,
.dp-wrapper .container-fluid.column-cards-white .col-md:first-of-type{
  margin-left: 0px; 
}
#kl_wrapper_3 .bs-container.column-cards-white .bs-row:first-of-type,
.dp-wrapper .container-fluid.column-cards-white .row:first-of-type{
  margin-bottom: 0px;
}
@media only screen and (max-width: 1100px) {
  #kl_wrapper_3 .bs-container.column-cards-white .bs-col-md,
  .dp-wrapper .container-fluid.column-cards-white .col-md{
    margin-left: 0px;
  }
}
#kl_wrapper_3 .bs-container.column-cards-white .bs-col-md h4,
.dp-wrapper .container-fluid.column-cards-white .col-md h4{
  font-weight: bold;
}
/*#endregion*/
/* Column Cards inside Message Blocks */
#kl_wrapper_3 .kl_message_block .bs-container,
.dp-wrapper .kl_message_block .bs-container{
  padding-top: .5rem;
  padding-bottom: .5rem;
}
/*#region ***** Discussion Entry Theming ******************************** */
.using_design_tools .discussion_subentries {
  padding: 12px 0 12px 0px;
}
.using_design_tools .discussion-entries .entry {
  border: none;
  margin-bottom: 50px;
  margin-left: 18px;
}
.using_design_tools .discussion-entries .entry.collapsed {
  margin: 12px 0 24px 18px;
}
.using_design_tools .discussion-entries .entry .entry {
  border-top: none;
}
.using_design_tools .discussion-entries article {
  /* top level entry */
  border: none;
  border: 2px solid #616161;
  margin-bottom: 0;
  padding: 0;
}
.using_design_tools header.entry-header {
  background: #f5f5f5;
  border-bottom: 1px solid #C7CDD1;
  padding-bottom: 5px;
  padding-top: 5px;
}
.using_design_tools .message_wrapper,
.using_design_tools .entry-controls {
  padding: 15px;
}
.using_design_tools .replies .discussion-entries article {
  /* top level entry */
  border: none;
  background: none;
  box-shadow: none;
  margin-bottom: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.using_design_tools .replies header.entry-header {
  background: none;
  padding-bottom: 8px;
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
  margin-top: -1px;
  padding-top: 12px;
}
.using_design_tools .replies header.entry-header,
.using_design_tools .replies .message_wrapper,
.using_design_tools .replies .entry-controls {
  border-left: 1px solid #707070;
  border-right: 1px solid #707070;
}
/* Temporary fix for old design tools - not showing user name */
.discussion-title { 
  width: auto;
  height: auto;
  position: static;
}
.using_design_tools .replies .entry-controls {
  border-bottom: 1px solid #707070;
  padding: 15px;
}
.using_design_tools .entry>.bottom-reply-with-box .discussion-entry-reply-area.reply-box-container {
  border-top: 0;
  padding-right: 0;
  padding-left: 35px;
  padding-top: 5px;
}
.using_design_tools .entry.no-replies>.bottom-reply-with-box .discussion-entry-reply-area.reply-box-container {
  border-top: 0;
  padding-right: 0;
  padding-left: 0;
}
.using_design_tools .entry>.bottom-reply-with-box .discussion-entry-reply-area.reply-box-container .discussion-reply-box {
  border: 1px solid #707070;
  /* border: 1px solid #C7CDD1; */
}
.using_design_tools .discussion-read-state-btn {
  top: 21px;
}
.using_design_tools .replies .discussion-entries article .discussion-read-state-btn {
  left: -5px;
  top: 16px;
}
.using_design_tools .replies .discussion-entries .replies article .discussion-read-state-btn {
  left: 25px;
  top: 16px;
}
.using_design_tools .replies .discussion-entries .replies .discussion-entries .replies .discussion-entries article .discussion-read-state-btn {
  left: 55px;
  top: 16px;
}
.using_design_tools .replies .discussion-entries .replies .discussion-entries .replies .discussion-entries .replies .discussion-entries article .discussion-read-state-btn {
  left: 85px;
  top: 16px;
}
.using_design_tools .discussion-header-content.right-of-avatar>div {
  margin-left: 0;
}
/*#endregion*/
/*#region ***** Discussion Expand/Collapse Buttons ******************************** */
.using_design_tools #discussion-toolbar .span9,
.using_design_tools #discussion-toolbar .span3 {
  display: inline-block;
  width: auto;
  margin: 0 0 4px 0;
  float: none;
}
.using_design_tools #collapseAll {
  background: var(--ic-brand-primary);
  color: #fff;
}
@media only screen and (min-width: 1375px) {
  .using_design_tools #collapseAll {
    background: var(--ic-brand-primary);
    padding: 8px 10px;
    margin-left: -12px;
  }

  .using_design_tools #collapseAll:after {
    content: "Collapse All";
    margin-left: 3px;
  }

  .using_design_tools #expandAll {
    padding: 8px 10px;
  }

  .using_design_tools #expandAll:after {
    content: "Expand All";
    margin-left: 3px;
  }
}
.using_design_tools .new-and-total-badge {
  padding-top: 4px;
}
.using_design_tools .new-and-total-badge .total-items {
  color: #222;
  background: #fff;
  /* increase contrast */
}
.using_design_tools .collapsable {
  padding: 0;
}
.using_design_tools .collapsable:before,
.using_design_tools .collapsable:hover::before,
.using_design_tools .collapsable:focus::before,
.using_design_tools .collapsable:active::before {
  display: block;
  content: "Collapse Thread";
  font-size: 11px;
  text-transform: uppercase;
  position: absolute;
  top: 16px;
  left: auto;
  right: 50px;
  height: auto;
  width: 115px;
  border: 1px solid var(--ic-brand-primary);
  text-align: center;
  border-radius: 3px;
  background: var(--ic-brand-primary);
  color: #fff;
}
.using_design_tools .collapsed .collapsable:before,
.using_design_tools .collapsed .collapsable:hover::before,
.using_design_tools .collapsed .collapsable:focus::before,
.using_design_tools .collapsed .collapsable:active::before {
  display: block;
  content: "Expand Thread";
  top: 16px;
  border-color: var(--ic-brand-primary);
  width: 100px;
}
.using_design_tools .no-replies .collapsable:before,
.using_design_tools .no-replies .collapsable:hover::before,
.using_design_tools .no-replies .collapsable:focus::before,
.using_design_tools .no-replies .collapsable:active::before {
  content: "Collapse Post";
  width: 100px;
}
.using_design_tools .no-replies.collapsed .collapsable:before,
.using_design_tools .no-replies.collapsed .collapsable:hover::before,
.using_design_tools .no-replies.collapsed .collapsable:focus::before,
.using_design_tools .no-replies.collapsed .collapsable:active::before {
  content: "Expand Post";
  width: 90px;
}
/*#endregion*/
#kl_wrapper_3 .instructor-info,
.dp-wrapper .instructor-info {
  display:flex; 
  align-items: flex-start;
  padding-top: 1rem;
  position:relative;
  min-width: 175px;
  font-size:.9rem;
}
#kl_wrapper_3 .image-container,
.dp-wrapper .image-container {
  min-width: 1rem; /* hold space in case image is deleted */
}
#kl_wrapper_3 .instructor-info img,
.dp-wrapper .instructor-info img {
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc !important;
  max-width: 175px !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  border-radius: .25rem;
  padding:0 !important;
}
#kl_wrapper_3 .instructor-info .instructor-details,
.dp-wrapper .instructor-info .instructor-details {
  flex: 1;
}
@media screen and (max-width:500px) {
  #kl_wrapper_3 .instructor-info,
  .dp-wrapper .instructor-info  {
    display:block; 
  }
}
/* Overriding styles applied in upgrade */
.dp-wrapper .dp-user-details-wrapper.dp-user-details-h-legacy {
  padding: 1rem 0 0 0;
  min-height: 0;
  max-width: none;
  border:none;
}
.dp-wrapper .dp-user-details-wrapper.dp-user-details-h-legacy img.dp-user-details-image {
  width: auto;
  height: auto;
  max-width: 200px;
  border-radius: inherit;
  border: none;
}
/* Media + Text */
/* Adapted from https://every-layout.dev/layouts/sidebar/ */
.media-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
.media-text > :first-child {
    flex-grow: 1;
    max-width: 33%;
    min-width: 1rem; /* hold space in case image is deleted */
  }
/* swap image to the right */
.media-text.media-text-right> :first-child {
    flex-grow: 1;
    max-width: 33%;
    min-width: 1rem; /* hold space in case image is deleted */
    order:2; 
  }
.media-text > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 30ch;
  }
/* Module Checklist - custom module with #kl_module_checklist_block */
#kl_wrapper_3 #kl_module_checklist_block .kl_module_content .ig-list .ig-row {
    border: 1px solid#ccc;
    margin-bottom: 10px;
    margin-left: 0;
    background:
    #fafafa;
    border-radius: 2px;
  }
#kl_wrapper_3 #kl_module_checklist_block .ig-info {
    margin-left: 10px;
    margin-bottom: 4px;
    margin-top: 2px;
  }
/* hide type icon */
#kl_wrapper_3 #kl_module_checklist_block .type_icon {
    display:none;
  }
#kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon {
    order:-1;
    margin-left: 0; /* temp override */
    margin-top: -4px;
    margin-right: 0;
    width: auto; 
  }
#kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon .icon-check,
  #kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon .icon-mark-as-read,
  #kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon .icon-minimize {
    padding: 2px 5px;
    width: 26px;
    height:26px;
    border-radius: 2px;
    margin-left: 20px;
  }
#kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon .icon-check {
    background: green;
  
  }
#kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon .icon-check:before {
    color:#fff;
    position: relative;
    top: 3px;
  }
#kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon .icon-mark-as-read{
    border: 1px solid #565656;
    background:#fff;
    opacity:1;
  }
#kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon .icon-mark-as-read:before{
    color: #565656;
    position: relative;
    top: 2px;
    left: -1px;
  }
#kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon .icon-minimize{
    border: 1px solid red;
    background:#fff;
  }
#kl_wrapper_3 #kl_module_checklist_block .module-item-status-icon .icon-minimize:before{
    position: relative;
    top: 2px;
    left: -1px;
  }
/* Show completed module icon on module list */
#kl_wrapper_3 #kl_modules.kl_modules_tabbed>ul .kl_tab_completed i.iconStatus,
  #kl_wrapper_3 #kl_modules.kl_modules_tabbed:not(.kl_vertical_progress)>ul.ui-tabs-nav .kl_tab_completed i.iconStatus {
    left: auto;
    right: 8px;
    opacity: 1;
    color: #0b874b;
    /* padding: 2px 5px;
    width: 26px;
    height: 26px;
    border-radius: 2px;
    background: green;
    color: white;
   */
  }
#kl_wrapper_3 #kl_modules.kl_modules_tabbed>ul .kl_tab_completed i.iconStatus:before,
  #kl_wrapper_3 #kl_modules.kl_modules_tabbed:not(.kl_vertical_progress)>ul.ui-tabs-nav .kl_tab_completed i.iconStatus:before {
    top: 5px;
  }
/* hide icons indicating module status */
#kl_wrapper_3 #kl_module_checklist_block .has_requirements .header {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
  }
#kl_wrapper_3 #kl_module_checklist_block .has_requirements .context_module_items {
    margin-top: 0;
  }
/* COMPONENT: Module Details List  */
#kl_wrapper_3 .kl_module_content .kl_module_details,
.dp-wrapper .dp-module-details {
  padding: 0 0 5px 0;
  border: none;
  background: none;
}
#kl_wrapper_3 .kl_module_details .ig-header,
.dp-wrapper .dp-module-details .ig-header {
  /* hiding visibly but still accessible to screen readers  */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  padding:0;
  min-height:0; 
}
/* temp override */
#kl_wrapper_3 .kl_module_content .kl_module_details .context_module_items,
.dp-wrapper .kl_module_content .kl_module_details .context_module_items {
  margin-top: 0;
}
/* Module details - fix background showing through list */
#kl_wrapper_3 .kl_module_content .context_module .header,
.dp-wrapper .dp-module-details .header {
  background-color: transparent;
  border: none;
}
#kl_wrapper_3 .kl_module_content .ig-header .ig-header-title,
.dp-wrapper .dp-module-details .ig-header .ig-header-title {
  display: none;
}
#kl_wrapper_3 .kl_module_content .ig-header .name,
.dp-wrapper .dp-module-details .ig-header .name {
  font-size: 16px;
  color: #000;
}
#kl_wrapper_3 .kl_module_content .context_module_item,
.dp-wrapper .dp-module-details .context_module_item {
  border: none;
}
#kl_wrapper_3 .kl_module_content .ig-list .ig-row,
.dp-wrapper .dp-module-details .ig-list .ig-row {
  margin-left: -7px;
  padding: 2px 6px 2px 0;
  border: none;
}
#kl_wrapper_3 .kl_module_content .ig-list li:first-child .ig-row,
#kl_wrapper_3 .kl_module_content .ig-list li:first-of-type .ig-row,
#kl_wrapper_3 .kl_module_content .first_visible .ig-row,
.dp-wrapper .dp-module-details .ig-list li:first-child .ig-row,
.dp-wrapper .dp-module-details .ig-list li:first-of-type .ig-row,
.dp-wrapper .dp-module-details .first_visible .ig-row  {
  border: none;
  background: none !important;
}
#kl_wrapper_3 .kl_module_content li.kl_current,
#kl_wrapper_3 .kl_module_content li.kl_current .ig-row,
.dp-wrapper .dp-module-details li.dp-current,
.dp-wrapper .dp-module-details li.dp-current .ig-row  {
  background: none;
}
#kl_wrapper_3 .kl_module_content .ig-list .ig-row:hover,
.dp-wrapper .dp-module-details .ig-list .ig-row:hover {
  background-color: #ddd;
}
#kl_wrapper_3 .kl_module_content .ig-list .ig-row a.ig-title,
.dp-wrapper .dp-module-details .ig-list .ig-row a.ig-title {
  font-weight: normal;
  text-decoration: underline !important;
}
#kl_wrapper_3 .kl_module_content li.kl_current .ig-row a.ig-title,
.dp-wrapper .dp-module-details li.dp-current .ig-row a.ig-title {
  font-weight: bold;
  text-decoration: none !important;
}
#kl_wrapper_3 .kl_module_content li.kl_current .ig-row a.ig-title i,
.dp-wrapper .dp-module-details li.dp-current .ig-row a.ig-title i {
  margin-left: var(--s-2)
}
#kl_wrapper_3 .kl_module_content .ig-list .ig-row.ig-published:not(.student-view):before,
.dp-wrapper .dp-module-details .ig-list .ig-row.ig-published:not(.student-view):before  {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background-color: transparent;
}
#kl_wrapper_3 .kl_module_content .context_module .header,
.dp-wrapper .dp-module-details .context_module .header {
  padding: 0 !important;
  color: #000;
  border-bottom: none;
}
#kl_wrapper_3 .kl_module_content .context_module_item.context_module_sub_header .locked_title,
.dp-wrapper .dp-module-details .context_module_item.context_module_sub_header .locked_title { /* Module Item Heading */
  margin-left:5px;
  display:block; /* fixes issue with module titles in homepage module list */ 
}
#kl_wrapper_3 .kl_module_content .bs-badge-secondary,
#kl_wrapper_3 .kl_module_content .bs-text-secondary,
.dp-wrapper .dp-module-details .bs-badge-secondary,
.dp-wrapper .dp-module-details .bs-text-secondary {
  float: none !important;
  margin-top: 3px;
  margin-left: 10px;
  color: var(--dt-color-secondary-contrast);
  background: var( --dt-color-secondary);
  display: inline-block;
  padding: .25em .4em;
  font-size: 80%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  text-shadow: none;
  font-style: normal;
}
/* hide module details block on small screens */
@media (max-width: 400px) {
  #kl_wrapper_3 #kl_module_details_block,
  .dp-wrapper .kl_module_details_block {
    display:none;
  }
}
/* Module List */
#kl_wrapper_3 .module-list, 
.dp-wrapper .module-list {
    position: relative;
    margin-left: 8px;
    margin-top:10px;
    max-width: 840px;
  }
#kl_wrapper_3 .module-list:before,
  .dp-wrapper .module-list:before {
  background-color: var(--dt-color-primary, #333);
  width: 5px;
  content: '';
  position: absolute;
  top: 2px;
  bottom: 34px;
  }
#kl_wrapper_3 .module-list li:before,
  .dp-wrapper .module-list li:before {   
  background-color: var(--dt-color-primary, #333);
  width: 21px;
  height: 21px;
  border-radius: 10px;
  content: '';
  position: absolute;
  top: 2px;
  bottom: 0px;
  left: -8px;
  }
#kl_wrapper_3 .module-list li,
  .dp-wrapper .module-list li {
  position: relative;
  margin: 0;
  padding-bottom: .5rem;
  padding-left: 25px;
  list-style: none;
  font-size: 1.1rem;
  font-weight: bold;
  }
#kl_wrapper_3 .module-list li:last-of-type::before,
  .dp-wrapper .module-list li:last-of-type::before  {
  bottom:10px;
  }
/* Module List with Box */
#kl_wrapper_3 .module-list.boxed,
  .dp-wrapper .module-list.boxed {
    margin-left:0;
    border: 1px solid var(--dt-color-primary, #333);
    border-top: 5px solid var(--dt-color-primary, #333);
    border-radius: 2px;
    background: #f5f5f5;
    padding: 25px 30px 10px 30px;
  }
#kl_wrapper_3 .module-list.boxed:before,
  .dp-wrapper .module-list.boxed:before {
    top: 30px;
  }
/*#region ***** COMPONENT: week overview ******************************** */
#kl_wrapper_3 .module-overview,
.dp-wrapper .module-overview {
    height: auto !important; /* clear inline styles */
    width: 100% !important; /* clear inline styles */
    margin-top: .75rem;
  }
/* On mobile and edit screens, display as table */
#kl_wrapper_3 .module-overview td,
  #kl_wrapper_3 .module-overview th,
  .dp-wrapper .module-overview td,
  .dp-wrapper .module-overview td {
    padding: 0 .5rem; 
    text-align: left;
    height: auto !important; /* clear inline styles */
    width: auto !important; /* clear inline styles */
    vertical-align: top;
  }
#kl_wrapper_3 table.module-overview th,
  .dp-wrapper table.module-overview th {
    text-transform: uppercase;
    font-weight:bold;
    vertical-align: middle;
  }
#kl_wrapper_3 .module-overview tr,
  .dp-wrapper .module-overview tr {
    height: auto !important; /* clear inline styles */
    width: auto !important; /* clear inline styles */
  }
#kl_wrapper_3 .module-overview tbody tr:first-of-type td,
  .dp-wrapper .module-overview tbody tr:first-of-type td {
    padding-top: .75rem;
  }
#kl_wrapper_3 .module-overview td:first-of-type,
  .dp-wrapper .module-overview td:first-of-type {
    padding: .25rem .5rem;
    font-weight:bold;
  }
#kl_wrapper_3 .module-overview td p:first-of-type,
  .dp-wrapper .module-overview td p:first-of-type {
    margin-top: .25rem;
  }
#kl_wrapper_3 .module-overview tbody td:first-of-type p,
  .dp-wrapper .module-overview tbody td:first-of-type p {
    margin:0;
  }
/* On wider screens, display with weeks horizontal on top */
@media screen and (min-width:1100px) {
  
    #kl_wrapper_3 table.module-overview,
    .dp-wrapper table.module-overview {
      border:none;
    }
  
    /* table header visually hidden */
    #kl_wrapper_3 .module-overview thead,
    .dp-wrapper .module-overview thead {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
    
    #kl_wrapper_3 .module-overview tbody,
    .dp-wrapper .module-overview tbody {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: auto;
    }
  
    #kl_wrapper_3 .module-overview td,
    .dp-wrapper .module-overview td {
      display:block;
      font-size: .9rem;
      text-align: center;
      border:none;
    }
  
    #kl_wrapper_3 .module-overview td:first-of-type,
    .dp-wrapper .module-overview td:first-of-type {
      border-right: 1px solid #fff;
      padding: .25rem .5rem;
      text-transform: uppercase;
      color: var(--dt-color-secondary-contrast);
      background: var( --dt-color-secondary);
      font-weight:normal;
    }
  
    #kl_wrapper_3 .module-overview td p:first-of-type,
    .dp-wrapper .module-overview td p:first-of-type {
      margin-top: .75rem;
    }
  
    #kl_wrapper_3 .module-overview tbody tr:first-of-type td,
    .dp-wrapper .module-overview tbody tr:first-of-type td {
      padding-top: 0; /* reset for large screens  */
    }
    
    #kl_wrapper_3 .module-overview tbody tr:first-of-type td:first-of-type,
    .dp-wrapper .module-overview tbody tr:first-of-type td:first-of-type {
      padding-top: .25rem; /* reset for large screens */
    }
   }
/*#region ***** COMPONENT: Course Schedule Overview ******************************** */
#kl_wrapper_3 .schedule-overview,
   .dp-wrapper .schedule-overview {
     width: 100%; 
   }
#kl_wrapper_3 .schedule-overview p,
  .dp-wrapper .schedule-overview p {
    margin:0; 
  }
#kl_wrapper_3 .schedule-overview td,
  .dp-wrapper .schedule-overview td {
    padding: .5rem; 
    height:auto !important;
    width: auto !important;
  }
#kl_wrapper_3 .schedule-overview td:first-of-type,
  .dp-wrapper .schedule-overview td:first-of-type {
    font-weight:bold; 
  }
#kl_wrapper_3 .schedule-overview thead th,
  .dp-wrapper .schedule-overview thead th {
    text-align: left;
    padding: .5rem;
    text-transform:uppercase;
    font-weight:normal;
    font-size: .9rem;
  }
/* @media screen and (max-width:500px) {
    #kl_wrapper_3 .schedule-overview thead {
      visibility:hidden;
    }
    
    #kl_wrapper_3 .schedule-overview  tr {
      display:flex;
      flex-direction:column;
    }
  } */
/*#endregion*/
/*#region ***** COMPONENT: module table ******************************** */
.module-table {
    border-collapse: collapse;
    position: relative;
    width: 100% !important;
    font-size: 1.1rem;
    margin-top: 20px; 
    margin-left:0 !important;
    border: 1px solid #ccc;
  
  }
.module-table tr {
    position: relative;
    border: none;
    display: flex;
    height: auto /* needed for table to display properly in RTE */;
    height:45px !important;
  }
.module-table thead tr {
    background-color: #f5f5f5;
    border-bottom: 1px solid #C7CDD1;
  }
.module-table thead tr:before {
    background-color: transparent;
    width: 0;
    height: 0;
  }
.module-table thead p {
    margin:0;
  }
.module-table th {
    border-bottom: none;
    width: auto !important; 
    text-transform:uppercase;
    color:#000;
  }
.module-table th:first-child {
    padding-left: 15px !important;
    width: auto !important;
  }
.module-table th, 
  .module-table td {
    padding:10px !important;
    vertical-align: top;
    text-align: left;
    border: none;
    box-sizing: border-box;
  }
.module-table td {
    position: relative;
    width: auto !important;
  }
.module-table td .ui-icon-extlink {
    display:none; /* hide external link icon for placeholder links*/
  }
.module-table td:first-child {
    font-weight: bold;
    padding-left: 45px !important;
    width: auto !important;
  }
.module-table tr:before {
    background-color:#333;
    background-color: var(--dt-color-primary);
    width: 5px;
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 20px;
  }
.module-table tbody tr:nth-of-type(1)::before {
    top: 21px;
  }
.module-table tr:last-of-type::before {
    bottom: 8px;
    max-height: 26px;
  }
.module-table tr>td:first-child:before {
    background-color: #333;
    background-color: var(--dt-color-primary);
    width: 21px;
    height: 21px;
    content: '';
    position: absolute;
    top: 14px;
    bottom: 0px;
    left: 12px;
    border-radius: 19px;
  }
.module-table tr:first-of-type>td:before {
    top: 12px;
  }
.module-table tr:last-of-type>td:before {
    bottom: -10px;
  }
.module-table td ul {
    padding-left: 12px;
    margin: 15px 0;
  }
.module-table td ul li {
    padding-bottom: 7px;
  }
/*#region ***** Component: Reading Block ******************************** */
#kl_wrapper_3 .readability-block,
.dp-wrapper .readability-block {
  width: 100%;
  max-width: 70ch;
  font-size: var(--text-md);
  padding: var(--s-8);
  border: none; /* Temp override */ 
  box-shadow: none; /* Temp override */ 
  background: #ffffff; /* Temp override */ 
  margin: var(--s-5) auto auto auto;
}
#kl_wrapper_3 .readability-block.left
.dp-wrapper .readability-block.left {
  margin: 0; 
}
#kl_wrapper_3 .readability-block h3,
#kl_wrapper_3 > div.readability-block > h3:not(.ui-state-default),
.dp-wrapper .readability-block  h3 {
  font-size: 30px;
  background-color: transparent;
  border:none !important;
  margin-top: 0 !important;
}
/*#endregion*/
/*#region ***** COMPONENT: Vertical Progress Table  ******************************** */
.progess-table-vert {
    border-collapse: collapse;
    position: relative;
    width: 100%;
  }
.progess-table-vert tr {
    position: relative;
    border: none;
    display: flex; 
    height: auto /* needed for table to display properly in RTE */
  }
.progess-table-vert thead tr:before {
    background-color: transparent;
    width: 0;
    height: 0;
  }
.progess-table-vert th {
    border-bottom:none;
  }
.progess-table-vert th:first-child {
    padding-left: 40px !important;
    min-width: 225px; /* new */
  }
.progess-table-vert td {
    position: relative;
    border: none;
    vertical-align: top;
    padding: 3px 0 3px 12px;
    text-align: left;
  }
.progess-table-vert td:first-child  {
    font-weight: bold;
    padding: 17px 15px 15px 40px !important;
    min-width: 225px;
  }
.progess-table-vert tr:before {
    background-color: var(--dt-color-primary);
    width: 5px;
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 22px;
  }
.progess-table-vert tbody tr:nth-of-type(1)::before {
    top: 21px;
  }
.progess-table-vert tr:last-of-type::before {
    bottom: 8px;
    max-height: 26px;
  }
.progess-table-vert tr>td:first-child:before {
    background-color: var(--dt-color-primary);
    width: 19px;
    height: 19px;
    content: '';
    position: absolute;
    top: 18px;
    bottom: 0px;
    left: 15px;
    border-radius: 19px;
  }
.progess-table-vert tr:first-of-type>td:before {
    top: 18px;
  }
.progess-table-vert tr:last-of-type>td:before {
    bottom: -10px;
  }
.progess-table-vert td ul {
    padding-left: 12px;
    margin: 15px 0;
  }
.progess-table-vert td ul li {
    padding-bottom: 7px;
  }
/*#endregion*/
/***** CybersecurityTheme *****/
/* === Theme Notes ===
@theme-type: cdil-managed
@banner-style: v2-topbar
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_cybersecurity,
.dp-wrapper.theme-cybersecurity {

/* Base Colors */
--dt-color-primary: #7E1F16;
--dt-color-secondary: #800F0A;
--dt-color-accent: #721D15;
--dt-neutral-dark: #524543;
--dt-color-primary-dark-text: #5B1415;
--dt-color-secondary-contrast: #fff;
--bs-link-color: #7E1F16;

/* Banner Banner */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
--home-banner-padding: var(--s-4) 0 0 0;
--home-banner-gap: 0;
--course-title-text-shadow: var(--text-shadow-2);
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/law/law-bc-logo.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Field Position */
--home-description-position: auto; /* field aligns to the right */

/* Module Banner Background (with Adjustments for @banner-style: v2-topbar) */
--module-banner-bg: var(--dt-color-primary);
--home-h2-bg:#7E1F16 url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/cybersecurity/cs-background.jpg?raw=true') no-repeat 100% 65%;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-12) var(--s-6) var(--s-8)  var(--s-6);

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

/* Module Banner */
--module-banner-padding: 0 var(--s-6) 0 var(--s-6);
--module-banner-bg: var(--dt-color-primary) url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/cybersecurity/cs-bg-interior.jpg?raw=true') no-repeat right top;
--module-bg-size: cover;
}
/* === Custom Theme Styles === */
/* Disable grid on testing pages */
#kl_wrapper_3.kl_cybersecurity.testing-page.home {
  display:block;
}
#kl_wrapper_3.kl_cybersecurity.home #kl_banner H2,
.dp-wrapper.theme-cybersecurity.home .dp-header H2{
  border-top: 1px solid #925853;
}
/* Logo */
#kl_wrapper_3.kl_cybersecurity.home #kl_banner:before,
.dp-wrapper.theme-cybersecurity.home .dp-header:before {
  min-height: 48px;
  width: 297px;
}
#kl_wrapper_3.kl_cybersecurity.home #kl_banner_left,
.dp-wrapper.theme-cybersecurity.home .dp-header-pre {
  text-transform: none;
  text-shadow: var(--text-shadow-1);
}
#kl_wrapper_3.kl_cybersecurity #kl_description,
.dp-wrapper.theme-cybersecurity .dp-header-description {
  padding: 0 var(--s-5) 0 var(--s-5); 
}
/* Push description to single line underneath log on smaller screens */
@media screen and (min-width: 1340px) {
  #kl_wrapper_3.kl_cybersecurity.home #kl_description,
.dp-wrapper.theme-cybersecurity.home .dp-header-description {
      max-width: 340px;
      text-align: center;
      line-height: 1.3;
  }
  
}
/* Module banner Description and Subtitle position (Non-Standard)*/
#kl_wrapper_3.kl_cybersecurity:not(.home) #kl_description,
.dp-wrapper.theme-cybersecurity:not(.home) .dp-header-description {
  background: none !important;
  padding: var(--s-1) 0 var(--s-2) 0 ;
  }
#kl_wrapper_3.kl_cybersecurity:not(.home) .kl_subtitle,
.dp-wrapper.theme-cybersecurity:not(.home) .dp-header-subtitle {
  padding: var(--s-2) var(--s-5) 0 0 ;
}
#kl_wrapper_3.kl_cybersecurity:not(.home) #kl_banner_left,
.dp-wrapper.theme-cybersecurity:not(.home) .dp-header-pre {
  background: var(--dt-color-primary);
  padding: var(--s-2);
}
/* add lock icon to active tab */
#kl_wrapper_3.kl_cybersecurity #kl_modules.kl_vertical_progress>ul li.ui-tabs-active i:before {
  position: relative;
  left: 40px;
  color: #fff;
  font-size: 14px;
  font-family: "Font Awesome 5 Free";
  content: "\f09c";
  font-weight: bold !important;
}
/* === Vertical Sidebar Mododule Progress Bar === 

This creates a vertical version of the Module list component that gets positioned as a right sidebar using CSS Grid. It's somewhat experimental and doens't work as well on Canvas content types that already have a right column taking up space. 

Must be enabled for the entire theme, so not able to abstract it out to be enabled as a block elsewhere

*/
/*  Grid Layout to enable sidebar layout*/
#kl_wrapper_3.kl_cybersecurity {
  position: static;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0;
}
/* disable grid in edit mode */
#tinymce #kl_wrapper_3.kl_cybersecurity {
  display: block;
}
/* Put most blocks in first column */
#kl_wrapper_3.kl_cybersecurity>div {
  grid-column: 1;
  grid-row: auto;
}
/* Banner always spans both columns */
#kl_wrapper_3.kl_cybersecurity #kl_banner {
  grid-column: 1 / span 3;
  grid-row: 1;
}
@media only screen and (min-width: 600px) {
  .module_menu_active {
    grid-template-columns: auto;
  }
}
@media only screen and (min-width: 800px) {
  #kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar {
    grid-column: 3;
    grid-row: 2 / span 10;
    width: 250px;
    margin-left: 40px !important;
    margin-top: 20px !important;
    margin-right: 0;
  }
}
#tinymce #kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar {
  width: auto;
  margin-left: 0 !important;
  padding-right: 15px;
}
.mce-content-body.kl_has_style:not(.kl_mce_view_app) #kl_module_progress_sidebar .kl_module_progress {
  padding: 25px 10px;
}
#kl_module_progress_sidebar .module_progress_wrapper {
  width: auto;
  position: static;
  margin-left: 4px;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar h3 {
  border-bottom: none !important;
  font-size: 17px;
  margin-top: 0;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: normal;
  padding: 0;
  position: relative;
  min-height: 0;
  padding: 8px 10px;
  background: var(--dt-color-primary);
  color: var(--dt-color-primary-contrast);
  border-radius: 2px;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar h3 i {
  display: none;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar .kl_current_module_name {
  display: block;
  line-height: 1.2;
  font-weight: bold;
  text-transform: none;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar h3:before
 { 
  content: "MODULE: ";
    font-size: 12px;
    font-weight: bold;
    display:block;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar .ig-admin {
  display: none;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar li .ig-type-icon i:before {
  margin-top: 3px;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar .ig-row {
  margin-right: 0;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar .kl_current .ig-row {
  border: 1px solid #000;
  border-radius: 2px;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar .kl_current .ig-row a {
  text-decoration: none !important;
  font-weight: bold !important;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
  top: 2px;
}
#kl_wrapper_3.kl_cybersecurity #kl_module_progress_sidebar .kl_current .ig-info {
  padding: 0 0 3px 0;
}
/* Vert Progress Styling for Module Details - maybe make this default at some point  */
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details {
  padding-left: 10px
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .ig-type-icon i:before {
  background: var(--dt-color-primary);
  border-radius: 20px;
  padding: 5px;
  height: 12px;
  width: 12px;
  content: "";
  /* if we want to add icons */
  /* font-size: 12px;
  color: #fff; */
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details li.kl_current .ig-type-icon i:before {
  background: #000;
  left: -2px;
  position: relative;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .ig-list .ig-row {
  margin-left: -14px;
  background: transparent;
  align-items: flex-start;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .ig-info {
  margin-right: 0;
  margin-left: 5px;
  font-size: 14px;
  padding-top: 3px;
  min-height: 30px;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .ig-info a {
  text-decoration: none !important;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .kl_current .ig-info a {
  color: #000 !important;
  display: block;
  padding: 2px 6px 6px 3px;
  text-decoration: none !important;
  position: relative;
  left: -4px;
  margin-top: 1px;
  font-weight: bold;
  font-size: 110%;
  border-radius: 2px;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details li,
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.context_module_item_hover {
  position: relative;
  background: transparent;
}
/* creates the vertical line */
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details li:before {
  background-color: var(--dt-color-primary);
  width: 7px;
  content: '';
  position: absolute;
  top: 10px;
  bottom: -12px;
  left: -2px;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details li:last-of-type::before{
  display: none;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .kl_current .module-item-title i {
  display: none;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .item-group-condensed .ig-header {
  background: none;
  border: none;
}
/* Text Header */
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_sub_header .title {
  margin-left: 30px;
}
/* align circles over line when module items are indented  */
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_1 .type_icon,
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_2 .type_icon,
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_3 .type_icon,
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_4 .type_icon,
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_5 .type_icon,
.dp-wrapper.theme-cybersecurityy  .kl_module_progress_sidebar  .dp-module-details .context_module_item.indent_1 .type_icon {
  padding: 0;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_1 .module-item-title {
  padding-left: 10px;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_2 .module-item-title {
  padding-left: 20px;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_3 .module-item-title {
  padding-left: 30px;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_4 .module-item-title {
  padding-left: 40px;
}
#kl_wrapper_3.kl_cybersecurity  #kl_module_progress_sidebar  .kl_module_details .context_module_item.indent_5 .module-item-title {
  padding-left: 50px;
}
/***** BC Red Advanced *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-bc { 

/* Base Colors */
--dt-color-primary: #5B1415;
--dt-color-secondary: #726158;
--dt-color-accent: #8a100b;
--bs-link-color: #5B1415;
  
/* Banner */
--home-banner-bg: linear-gradient(121deg, rgba(0,0,0, .3) 0%, rgba(0,0,0,0.3) 25%, rgba(0,0,0,.2) 90%), url('https://cte.bc.edu/canvas/themes/bc-general/bc-bg-home.jpg') no-repeat left 55%;
--home-banner-gap: var(--s-2); 

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/bc-general/bc-logo.png') no-repeat left center;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-text-shadow: var(--text-shadow-1);

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

 /*Module Banner Background */
 --module-banner-bg: var(--dt-color-primary);
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-bc.home .dp-header-description {
  color: #dccaa0;
  font-weight: bold;
  font-size: var(--text-md);
  text-shadow: var(--text-shadow-1);
}
/* === Variation 2 === */
.dp-wrapper.theme-bc.v2 {
 
/* Base Colors */ 
--dt-color-primary: #003856;
--dt-color-secondary: #45423F;
--dt-color-accent: #003856;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--dt-color-primary-dark-text: #003856;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/summer/summer-background.jpg') no-repeat left 50%;
--home-banner-gap: var(--s-2);
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/bc-general/bc-logo-white.png') no-repeat left top;

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* @info-bar: v1-primary-bg */
--course-info-bar-bg: var(--dt-color-primary);

}
.dp-wrapper.theme-bc.v2.home .dp-header:before {
  height: 70px;
}
/***** BC Basic Theme *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v3-bc-basic
@info-bar: N/A

- Close to default Design Plus
- Provides color options by adding an addition class

*/
/* === Core Theme Settings === */
.dp-wrapper.theme-bc-basic {

--dt-color-primary: #56060F;
--dt-color-primary-contrast: white;
--dt-color-primary-dark-text: #56060F;
--dt-color-secondary: #8A100B;
--dt-color-secondary-contrast: #fff;
  
/* Banner Background */
--home-banner-bg: var(--dt-color-primary);
--home-banner-gap: 0;

/* Homepage Logo */
--logo-bg: none;
--logo-visibility: none;

/* Banner Field Order and position - Home */
--home-description-order: -1; /* description above page title */
--home-description-position: auto; /* Description is positioned to the right */
--home-subitle-position: 100%; /* field is stacked*/
--homepage-title-padding: var(--s-2) 0;

/* Home Course Info Bar */
--course-info-bar-bg: none;
--bannerleft-position: 100%; /* Info bar stacked below title */
--course-info-bar-padding: 0 var(--s-6) var(--s-6) var(--s-6);

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* Show banner image if present (hidden by default in most program themes */
--banner-image-visibility: block; 

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-bc-basic.home .dp-header h2 {
  gap:0;
}
.dp-wrapper.theme-bc-basic.home .dp-header-subtitle  {
    /* show subitle field */
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path:none;
    white-space: normal;

    font-size: var(--text-sm);
    text-transform: uppercase;
}
.dp-wrapper.theme-bc-basic.home .dp-header-description {
  margin-top:0;
}
.dp-wrapper.theme-bc-basic.home .dp-link-grid {
  background: var(--dt-color-primary);
  padding: 0 var(--s-3);
}
.dp-wrapper.theme-bc-basic.home .dp-link-grid ul {
  padding-right: var(--s-1-5); 
}
.dp-wrapper.theme-bc-basic.home .dp-link-grid > ul > li a {
  color: var(--dt-color-primary-contrast);
  padding: var(--s-2) var(--s-2-5) var(--s-2) var(--s-1-5); 
  margin: var(--s-1-5) 0 var(--s-1-5) var(--s-1-5);
  box-shadow: inset 0 0 3px #999;
  border-radius: var(--radius-2);
}
.dp-wrapper.theme-bc-basic.home .dp-link-grid > ul > li a i {
  padding: 0.5rem 0 0.5rem 0.3em !important; /* Override dp css for add icon  */ 
  margin-right: -0.25em;
}
/***** BC Basic Blue *****/
.dp-wrapper.theme-bc-basic.blue {
--dt-color-primary: #003957;
--dt-color-secondary:#234673;
--dt-color-accent: #0d5e93; 
--dt-color-primary-dark-text: #003957;
--bs-link-color: #0d5e93 !important;
}
/***** BC Basic White *****/
.dp-wrapper.theme-bc-basic.white{
--dt-color-primary: #fff;
--dt-color-secondary: #555;
--dt-color-accent: #000;
--dt-color-primary-dark-text: #000;
--dt-color-primary-contrast: #000;
--dt-color-secondary-contrast: #000;
--dt-neutral-dark: #555;
--dt-neutral-medium: #ddd;
--dt-neutral-light: #eee;

--navigation-visibility: block; 

}
.dp-wrapper.theme-bc-basic.white .dp-header {
  padding-left: 0 !important;
  box-shadow: none;
  border:none;
  color: var(--dt-color-secondary-contrast);
}
.dp-wrapper.theme-bc-basic.white .dp-header-subtitle,
.dp-wrapper.theme-bc-basic.white .dp-header-description {
  color: var(--dt-color-secondary-contrast);
}
.dp-wrapper.theme-bc-basic.white h3 i  {
  color: var(--dt-color-primary-contrast);
}
/***** BC Basic Orange *****/
.dp-wrapper.theme-bc-basic.orange {
--dt-color-primary: #A95A13;
--dt-color-secondary:#000;
--dt-color-accent: #A95A13; 
--dt-color-primary-dark-text: #A95A13; 
}
/***** BC Basic Yellow *****/
.dp-wrapper.theme-bc-basic.yellow {
--dt-color-primary: #f6cd4c;
--dt-color-secondary:#000;
--dt-color-accent: #f6cd4c; 
--dt-color-primary-contrast: #000;
--dt-color-secondary-contrast: #000;
--dt-color-primary-dark-text: #f6cd4c; /* should have accessible contrast on white background */
}
/***** BC Basic Green *****/
.dp-wrapper.theme-bc-basic.green {
--dt-color-primary: #5d694a;
--dt-color-secondary:#000;
--dt-color-accent: #5d694a; 
--dt-color-primary-dark-text: #5d694a;
--bs-link-color: #5d694a !important;
}
/***** BC Blank *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v3-bc-basic
@info-bar: N/A

- Close to default Design Plus
- used to be a variation of BC Basic, now separate

*/
/* === Core Theme Settings === */
.dp-wrapper.theme-bc-blank {

--dt-color-primary: #fff;
--dt-color-secondary: #555;
--dt-color-accent: #000;
--dt-color-primary-dark-text: #000;
--dt-color-primary-contrast: #000;
--dt-color-secondary-contrast: #000;
--dt-neutral-dark: #555;
--dt-neutral-medium: #ddd;
--dt-neutral-light: #eee;

--navigation-visibility: block; 

  
/* Banner Background */
--home-banner-bg: var(--dt-color-primary);
--home-banner-gap: 0;

/* Homepage Logo */
--logo-bg: none;
--logo-visibility: none;

/* Banner Field Order and position - Home */
--home-description-order: -1; /* description above page title */
--home-description-position: auto; /* Description is positioned to the right */
--home-subitle-position: 100%; /* field is stacked*/

/* Home Course Info Bar */
--course-info-bar-bg: none;
--bannerleft-position: 100%; /* Info bar stacked below title */
--course-info-bar-padding: var(--s-3) var(--s-6);

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);


/* Show banner image if present (hidden by default in most program themes */
--banner-image-visibility: block; 
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-bc-blank.home .dp-header {
  padding-left: 0 !important;
  box-shadow: none;
}
.dp-wrapper.theme-bc-blank.home .dp-header h2 {
  gap:0;
}
/* TODO

H3 with Icons

Progress bar

*/
.dp-wrapper.theme-bc-blank.home .dp-header-subtitle  {
    /* show subitle field */
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path:none;
    white-space: normal;

    font-size: var(--text-sm);
    text-transform: uppercase;
}
.dp-wrapper.theme-bc-blank.home .dp-header-description {
  margin-top:0;
}
/***** BOSTON COLLEGE COMPANIONS THEME *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-bc-companions { 

/* Base Colors */
--dt-color-primary: #5B1415;
--dt-color-secondary: #726158;
--dt-color-accent: #dccaa0;
--bs-link-color: #5B1415;
    
/* Banner */
--home-banner-bg:  var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/bc-companions/bc-companions-bg.jpg') no-repeat center top;
--home-banner-gap: 0;
--homepage-title-padding: var(--s-10) 0 var(--s-2) 0;


/* Homepage Logo */
--logo-bg: none;
--logo-visibility: none;
  
/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: 2.75rem;
--course-title-text-shadow: var(--text-shadow-1);


/*Module Banner */
--module-h2-gap: var(--s-2);
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-bc-companions.home .dp-header {
  text-align:center;
}
.dp-wrapper.theme-bc-companions.home .dp-header .dp-heading {
  text-align:center;
  gap: var(--s-1);
}
/* Swapping description with info bar formatting in order to positioning Purpose. Discernment. Spirituality course title */
.dp-wrapper.theme-bc-companions.home .dp-header-pre {
  background:none;
  bottom: auto;
  left: auto;
  letter-spacing: 0;
  margin: 0 0 var(--s-12) 0 !important;
  width: 100%;
  justify-content: center;
  color: var(--dt-color-accent);
  font-style:italic;
  font-size: var(--text-2xl);
  text-shadow: var(--text-shadow-2);
}
.dp-wrapper.theme-bc-companions.home .dp-header-description {
  order: 1;
  text-transform: uppercase;
  background: var(--course-info-bar-bg);
  bottom: calc(var(--s-5)*-1);
  font-size: var(--course-info-bar-size);
  font-weight: 700;
  left: calc(var(--s-6)*-1);
  letter-spacing: 1px;
  margin: 0!important;
  margin-right: calc(var(--s-12)*-1)!important;
  margin-top: calc(var(--s-5)*-1)!important;
  padding: var(--course-info-bar-padding);
  position: relative;
  width: var(--bannerleft-position);
  width: calc(120% + var(--s-6));
}
.dp-wrapper.theme-bc-companions:not(.home) .dp-header {
  background: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/bc-companions/bc-companions-bg.jpg?raw=true') no-repeat 100% 80%;
  background-size: cover;
}
.dp-wrapper.theme-bc-companions:not(.home) .dp-header-subtitle {
  color: var(--dt-color-accent);
  font-weight: bold;
}
/*****  CSOM BUSINESS WRITING THEME  *****/
/* === Theme Notes ===
@theme-type: cdil-managed
@banner-style: non-standard
This theme is only used for Rita Owens's courses
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-business-writing  {

/* Base Colors */
  --dt-color-primary: #0d5e93;
  --dt-color-secondary: #234673;
  --dt-color-accent: #666;
  --dt-neutral-dark: #666;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--dt-color-primary-dark-text: #666;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
  --home-banner-bg: #fff;
 
/* Homepage Logo */
  --logo-bg: #fff url('https://cte.bc.edu/canvas/themes/csom/bc-logo-csom.png') no-repeat left center;

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Adjustments for @banner-style: v2-topbar */
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-10) var(--s-6) var(--s-6)  var(--s-6);

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-6) var(--s-6);
--course-info-bar-bg: none;
--course-info-bar-color: #000;
--course-info-bar-size: var(--text-md);

/*Module Banner  */
--module-banner-padding: 0;
--module-banner-bg: none;
--module-h2-bg: #fff url('https://cte.bc.edu/canvas/themes/csom/csom-writing-branding-module.png') no-repeat top .5rem left;  

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-business-writing .dp-header {
  box-shadow: none;
}
.dp-wrapper.theme-business-writing.home .dp-header {
  padding: var(--s-1) 0 0 0;
  border:none;
}
.dp-wrapper.theme-business-writing.home .dp-header:before {
  margin-left:0;
}
.dp-wrapper.theme-business-writing.home .dp-header h2 {
  display:grid; 
  grid-template-columns: var(--s-52) 1fr;
  grid-template-areas:
  "logo kl_banner_right"
  "logo kl_banner_left";
  color: #000;
  gap: 0;
  border-top: 1px solid #C7CDD1;
  padding: var(--s-5) 0;
}
/* Add background as pseudo element to make it a flex child */
.dp-wrapper.theme-business-writing.home .dp-header h2:before {
  grid-area: logo;
  content:'';
  background:#fff url('https://cte.bc.edu/canvas/themes/csom/csom-writing-branding.png') no-repeat center left;
  background-size: contain;
  width: 100%;
  max-width: 200px;
  min-height: 200px;
  background-size: contain;
  color: #000;
}
.dp-wrapper.theme-business-writing.home .dp-header-title {
  grid-area: kl_banner_right;
  align-self: self-end;
  margin-left:0;
  line-height:1.1;
  font-size: var(--text-3xl);
  padding: var(--s-0) 0 var(--s-5) var(--s-6); 
  box-sizing: border-box;
  color: #222;
}
.dp-wrapper.theme-business-writing.home .dp-header-pre {
  grid-area: kl_banner_left;
  align-self: self-start;
  padding-bottom: 0;
  margin-left:0;

  bottom:0;
  left:0;
  margin-top:0 !important;
}
/* Hide Subtitle + Logo to Description */
.dp-wrapper.theme-business-writing.home .dp-header .dp-header-subtitle {
  display: none;
}
.dp-wrapper.theme-business-writing.home .dp-header-description {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
/* Module banner */
.dp-wrapper.theme-business-writing .dp-header h2 {
  color: #000;
  gap:0;
  min-height: var(--s-20);
  background-size: var(--s-16);
}
.dp-wrapper.theme-business-writing:not(.home) .dp-header-title {
  margin-left: var(--s-16);
  padding: var(--s-0) var(--s-5);
  width: 100%; /* field is stacked*/
  line-height: 1.1;
  color: #222;
}
.dp-wrapper.theme-business-writing:not(.home) .dp-header-pre {
  background-color: #fff;
  margin-left: var(--s-16);
  padding: var(--s-0) var(--s-5);
  font-weight:normal;
  color: #000;
}
.dp-wrapper.theme-business-writing .dp-header .dp-header-subtitle {
  display: none;
}
.dp-wrapper.theme-business-writing:not(.home) .dp-header-description,
.dp-wrapper.theme-business-writing:not(.home) .dp-header-subtitle {
  display:block;
  order: -1;
  width: 100%;
  padding: var(--s-1) 0;
  margin: var(--s-3) 0 var(--s-3) 0;
  border-bottom: 1px solid #C7CDD1;
  color:#000;
  font-size: var(--text-sm);
  text-transform: uppercase;
}
/* Mobile Styles */
@media screen and (max-width:500px) {

  .dp-wrapper.theme-business-writing .dp-header h2 {
    display:flex; 
    flex-direction: column;
  }

  .dp-wrapper.theme-business-writing.home .dp-header-title {
    align-self:auto; 
    padding: var(--s-4) var(--s-2);
  }

  .dp-wrapper.theme-business-writing.home .dp-header-pre{
    align-self:auto; 
    position:static;
    margin:0 !important;
    width:auto;
  }
}
/***** Career Center *****/
/* === Theme Notes ===
@theme-type: cdil-managed
@banner-style: v2-topbar 
*/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-career-center { 

  /* Base Colors */
  --dt-color-primary: #5B1415;
  --dt-color-secondary: #726158;
  --dt-color-accent: #8a100b;
  --bs-link-color: #5B1415;
    
  /* Banner Background */
  --home-banner-bg: #5B1415;
  --home-h2-bg: var(--gradient-bg-2), url('https://cte.bc.edu/canvas/themes/career-center/bc-career-bg.jpg') no-repeat center;
  --home-banner-gap: 0;
  --home-banner-padding: var(--s-4) 0 0 0;
  --homepage-title-padding: var(--s-16) var(--s-6) var(--s-8)  var(--s-6);

  /* Homepage Logo */
  --logo-bg: url('https://cte.bc.edu/canvas/themes/career-center/bc-career-center-logo.png') no-repeat left center;
  --logo-padding: 0 var(--s-4) var(--s-4) var(--s-4);
  
  /* Homepage Course Title */
  --course-title-style: uppercase;
  --course-title-size: var(--text-2xl);
  --course-title-text-shadow: var(--text-shadow-1);
  
  /* Banner Font */
  --banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  /* Position Description field to top right */ 
  --home-description-position: auto;

  /* @info-bar: v2-transparent (#kl_banner_left) */
  --course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
  --course-info-bar-bg: none;
  
  /*Module Banner Background */
  --module-banner-bg: var(--dt-color-primary);

  /* Show banner image if present (hidden by default in most program themes */  
  --banner-image-visibility: block;   

/* Home Description Padding */ 
--home-description-padding: 0 var(--s-5); 

}
/* === Custom Theme Styles === */
/*****  CDIL Theme  *****/
/* === Theme Notes ===
@theme-type: Internal CDIL
@banner-style: v3-bc-basic
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-cdil {
  --dt-color-primary: #003856;
  --dt-color-secondary:#726158;
  --dt-color-accent: #0d5e93; 
  --dt-color-primary-dark-text: #003957; /* should have accessible contrast on white background */
  --dt-color-primary-contrast: #fff; /* should have accessible contrast over primary color */
  --dt-color-secondary-contrast: #fff; /* should have accessible contrast over secondary color */
  --dt-neutral-dark: #726158; 
  --dt-neutral-medium: #656565; /* should have accessible contrast on white background */
  --dt-neutral-light: #ccc;
  --bs-link-color: #003856 !important;
  --bs-link-hover-color: #0d5e93!important;


/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/cdil/cdil-bg-module.jpg') no-repeat left top;
--homepage-title-padding: var(--s-3) var(--s-5) var(--s-1)  0;
--home-banner-gap: 0;

/* Logo */
--logo-visibility: none; /* Logo hidden */

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-5) var(--s-6);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

/* Banner Font-Family */
--banner-font-family: "Lato Black", "Lato", sans-serif;

/* Course Title - General */
--course-title-style: uppercase;
--course-title-ltr-sp: 2px;

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/cdil/cdil-bg-module.jpg') no-repeat left top;
--module-bg-size: cover;

/* Show banner image if present (hidden by default in most program themes */
--banner-image-visibility: block; 

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-cdil.home .dp-header-description {
  margin-top:0;
  padding-top: var(--s-3);
  margin-bottom: calc(var(--s-1) * -1); /* reduce the space between subtitle and page title */
}
.dp-wrapper.theme-cdil .dp-header-subtitle {
  /* Show hidden field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  color: #eee;
  order: -4;
  text-transform: uppercase;
  margin-top: calc(var(--s-6) * -1);
  font-size: var(--text-xsm);
  background: #222;
  padding: var(--s-2) var(--s-6) var(--s-1) var(--s-6);
  width: 100%;
  /* account for header padding */
  position: relative;
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12)*-1) !important;
}
.dp-wrapper.theme-cdil:not(.home) .dp-header-subtitle {
  margin-top: calc(var(--s-4) * -1);
}
/***** Core Curriclum *****/
/* === Theme Notes ===
@theme-type: cdil-managed
@banner-style: v2-topbar 
*/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-core { 

  /* Base Colors */
  --dt-color-primary: #5B1415;
  --dt-color-secondary: #726158;
  --dt-color-accent: #8a100b;
  --bs-link-color: #5B1415;
    
  /* Banner Background */
  --home-banner-bg: url('https://cte.bc.edu/canvas/themes/core/bc-core-bg.jpg') no-repeat left center;
  --homepage-title-padding: var(--s-5) 0 var(--s-5) var(--s-1);

  /* Homepage Logo */
  --logo-bg: url('https://cte.bc.edu/canvas/themes/core/bc-core-logo.png') no-repeat left center;
  --logo-padding: var(--s-3) var(--s-4) 0 var(--s-1);

  /* Homepage Course Title */
  --course-title-style: uppercase;
  --course-title-size: var(--text-2xl);
  --course-title-text-shadow: var(--text-shadow-1);
  
  
  /* Banner Font */
  --banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  /* Position Description field to top right */ 
  --home-description-position: auto;
  
  /*Module Banner Background */
  --module-banner-bg: var(--dt-color-primary);
  }
/* === Custom Theme Styles === */
.dp-wrapper.theme-core.home .dp-header:before {
    min-height: 60px;
  }
/*****  CSOM General *****/
.dp-wrapper.theme-csom-general {
  
/* Base Colors */
--dt-color-primary: #5B1415;
--dt-color-secondary: #524543;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--dt-color-primary-dark-text: #5B1415;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
 --home-banner-bg: var(--gradient-bg-1), url('https://cte.bc.edu/canvas/themes/csom/csom-general-bg-1.jpg') no-repeat left 50%;
 
/* Homepage Logo */
 --logo-bg: url('https://cte.bc.edu/canvas/themes/csom/csom-logo-gold.png') no-repeat left center;

/* Module Banner Background */
 --module-banner-bg: var(--dt-color-primary);
 
 /* Course Title - General */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-ltr-sp: 1px;
--course-title-text-shadow: var(--text-shadow-1);

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-csom-general.home .dp-header .dp-header-description {
  text-transform: uppercase;
}
/***** BC Data Science Theme *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-data-science { 

/* Base Colors */
--dt-color-primary: #0C2D44;
--dt-color-primary-contrast: #fff;
--dt-color-primary-dark-text: #0C2D44;
--dt-color-secondary: #adbabc;
--dt-color-secondary-contrast: #0C1F2D;
--dt-color-accent: #FEE58E;
--bs-link-color: #0C2D44;
  
/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
--home-h2-bg: url('https://cte.bc.edu/canvas/themes/data-science/data-science-bg.jpg') no-repeat left 55%;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-1);
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/data-science/data-science-logo.png') no-repeat left center;

--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Field Position */
--home-description-position: auto; /* field aligns to the right */

/* @info-bar: v2-transparent (.dp-header-pre) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

/*Module Banner */  
--module-banner-bg: var(--dt-color-primary);

/* Home Description Padding */ 
--home-description-padding: 0 var(--s-5); 

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-data-science.home .dp-header-title {
    margin: var(--s-10) var(--s-6) var(--s-6)  var(--s-6);
    background: linear-gradient(121deg, rgba(12,31,45,.3),rgba(12,31,45,.6) 60%,rgba(12,31,45,.8) 100%);;
    flex-grow: 0;
    border-radius: var(--radius-2);
}
/***** Doctorate of Nursing V2 *****/
/* === Theme Notes ===
@theme-type: cdil-managed
@banner-style: v2-topbar 
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-dnp {
/* Base Colors */
--dt-color-primary: #003856;
--dt-color-secondary: #edefef;
--dt-color-accent: #9EB3BF;
--dt-neutral-dark: #524543;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;
--bs-link-color: #003856;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #000;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
--home-h2-bg:#fff url('https://cte.bc.edu/canvas/themes/dnp/dnp-background-4.png') no-repeat right top;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-12) var(--s-6) var(--s-8) var(--s-6);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/dnp/bc-cson-logo-white.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Banner Font-Family */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Field Positions */
--home-description-position: auto; /* field is position to the right inline */

/* Home Description Padding */ 
--home-description-padding: 0 var(--s-5); 

/* @info-bar  (dp-header-pre) */
--course-info-bar-padding: 0 var(--s-6) var(--s-8) var(--s-12);
--course-info-bar-bg: transparent;
--course-info-bar-color: #000;

/*Module Banner */
--module-banner-padding: 0;
--module-banner-bg: var(--dt-color-primary);
--module-h2-bg: #fff url('https://cte.bc.edu/canvas/themes/dnp/dpn-background-interior.png') no-repeat right top;
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-dnp.home .dp-header  {
  border: 1px solid #979797;
}
.dp-wrapper.theme-dnp:not(.home) .dp-header {
  padding:0;
}
.dp-wrapper.theme-dnp .dp-header h2 {
  color: var(--dt-color-secondary-contrast) !important;
  background-size: contain;
}
.dp-wrapper.theme-dnp:not(.home) .dp-header-title {
  padding: var(--s-6) var(--s-4);
  font-weight: bold;
  color: #333;
}
.dp-wrapper.theme-dnp.home .dp-header-title {
  font-weight: 900;
  color: #333;
  text-shadow: none;
}
.dp-wrapper.theme-dnp .dp-header-description {
  background: var( --dt-color-secondary);
  color: var(--dt-color-secondary-contrast) !important;
  padding: var(--s-1) var(--s-4);
  margin-top: 0; /* clearing defaults to fit in bottom bar style */
}
/* Logo to Description */
.dp-wrapper.theme-dnp.home .dp-header-description {
  background: none;
  color: var(--dt-color-primary-contrast) !important;
}
.dp-wrapper.theme-dnp:not(.home) .dp-header-pre {
  color: #000;
}
.dp-wrapper.theme-dnp:not(.home) .dp-header-subtitle {
  margin-bottom:0; /* clearing defaults to fit in narrow top bar style */
  padding-top: var(--s-0-5); /* clearing defaults to fit in narrow top bar style */
  padding-left: var(--s-6);
}
/*****   GLOBAL ENGEMENT THEME THEME *****/
/*
THEME NOTES
@banner-style: banner-topbar
@infobar: infobar-transparent
@description-position: left
@banner-logo: true
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-global-engagement {
--dt-color-primary: #8A100B;
--dt-color-secondary: #726158ff;
--dt-color-accent: #b30000; 
--dt-color-primary-dark-text: #56060F; /* should have accessible contrast on white background */
--dt-color-primary-contrast: #fff; /* should have accessible contrast over primary color */
--dt-color-secondary-contrast: #fff; /* should have accessible contrast over secondary color */
--dt-neutral-dark: #555; 
--dt-neutral-medium: #656565; /* should have accessible contrast on white background */
--dt-neutral-light: #ccc;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary);
--home-banner-gap: 0;

/* Homepage Logo */
--logo-bg: url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/global-engagement/global-engagement-logo.png?raw=true') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/*Module Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/global-engagement/global-engagement-bg.png?raw=true') no-repeat right 25px;
--home-banner-bg-size: auto;

/* Homepage Course Title */
--homepage-title-padding: var(--s-1) 0;
--homepage-title-margin: var(--s-5);
--course-title-text-shadow: var(--text-shadow-2);
--course-title-bg: var(--dt-color-primary);

/* Adjustments for @banner-style: banner-topbar */
--home-banner-gap: var(--s-3);
--home-banner-padding: var(--s-4) 0 0 0;

/* @infobar: infobar-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);
--course-info-bar-style: uppercase;

/* Field Positions */
--home-description-position: var(--inline-field);

/* Home Description Padding */
--home-description-padding: 0 var(--s-5); 
--home-description-background: var(--dt-color-primary);

/*Module Banner */
--module-banner-bg: var(--dt-color-primary) url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/global-engagement/global-engagement-bg.png?raw=true') no-repeat right 30px; 
--module-bg-size: 200px;
}
/***** [DEV] GLOBAL PERSPECTIVES PROGRAM THEME V2 *****/
/* === Theme Notes ===
Dev theme - not in production
@banner-style: v2-topbar
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-global-perspectives {

/* Base Colors */
--dt-color-primary: #801D16;
--dt-color-secondary: #501315;
--dt-color-accent: #b30000;
--bs-link-color: #501315;
    
/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
--home-h2-bg: var(--gradient-bg-3), url('https://cte.bc.edu/canvas/themes/global-perspectives/gp-banner-v2.jpg') no-repeat center top;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-10) var(--s-6) var(--s-6)  var(--s-6);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/higher-ed-doctorate/bc-logo-lsoe.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

--home-description-position: auto; /* field aligns to the right */

/* @info-bar: v2-transparent (.dp-header-pre) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* Home Description Padding */ 
--home-description-padding: 0 var(--s-5); 

}
/* === Additional Theme Styles === */
@media screen and (min-width:1140px) {

    .dp-wrapper.theme-global-perspectives.home .dp-header-description {
        max-width: 340px;
        text-align: center;
        font-size: 1rem;
        line-height: 1.2;
    }

}
/***** MHA Theme  *****/
/* === Theme Notes ===
@banner-style: v2-topbar
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-healthcare-admin {
  /* Base Colors */
  --dt-color-primary: #445976;
  --dt-color-secondary: #ddd;
  --dt-color-accent: #749cd3;
  --dt-neutral-dark: #524543;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #f6faff;
  --bs-link-color: #445976;
  --dt-color-primary-contrast: #fff;
  --dt-color-secondary-contrast: #000;

  /* Home Banner */
  --home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
  --home-h2-bg: var(--dt-neutral-light) url("https://cte.bc.edu/canvas/themes/mha/mha-home-bg.png") no-repeat 88% 0;
  --home-banner-gap: var(--s-3);
  --home-banner-padding: var(--s-4) 0 0 0;
  --homepage-title-padding: var(--s-10) var(--s-6) var(--s-10) var(--s-6);
  --home-h2-bg-size: contain; 

  /* Banner Font */
  --banner-font-family:
    "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Homepage Logo */
  --logo-bg: url("https://cte.bc.edu/canvas/themes/mha/mha-bc-logo.png")
    no-repeat left center;
  --logo-padding: 0 var(--s-4) 0 var(--s-4);

  /* Field Positions */
  --home-description-position: auto; /* field is position to the right inline */

  /* Home Description Padding */
  --home-description-padding: 0 var(--s-5);
  --home-description-max-width: 245px;

  /* @info-bar: v2-transparent (.dp-header-pre) */
  --course-info-bar-padding: var(--s-1) var(--s-6) var(--s-10) var(--s-12);
  --course-info-bar-bg: transparent;

  /*Module Banner */
  --module-banner-padding: 0;
  --module-banner-bg: var(--dt-color-primary);
  --module-h2-bg: #fff
    url("https://cte.bc.edu/canvas/themes/mha/mha-module-bg.png") no-repeat
    right top;
--module-drop-shadow: 0;
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-healthcare-admin .dp-header {
  border: 1px solid #ddd;
}
/* Text color switch to Black */
.dp-wrapper.theme-healthcare-admin .dp-header .dp-header-title,
.dp-wrapper.theme-healthcare-admin .dp-header .dp-header-pre {
  color: var(--dt-color-secondary-contrast) !important;
}
.dp-wrapper.theme-healthcare-admin .dp-header h2 {
  background-size: contain;
}
.dp-wrapper.theme-healthcare-admin:not(.home) .dp-header {
  padding: 0;
}
.dp-wrapper.theme-healthcare-admin:not(.home) .dp-header-title {
  padding: var(--s-5) var(--s-6);
}
.dp-wrapper.theme-healthcare-admin:not(.home) .dp-header-subtitle {
  margin-bottom: 0; /* clearing defaults to fit in narrow top bar style */
  padding-top: var(
    --s-0-5
  ); /* clearing defaults to fit in narrow top bar style */
  padding-left: var(--s-6);
}
.dp-wrapper.theme-healthcare-admin:not(.home) .dp-header-description {
  background: var(--dt-color-secondary);
  color: var(--dt-color-secondary-contrast) !important;
  padding: var(--s-1) var(--s-6);
  margin-top: 0; /* clearing defaults to fit in bottom bar style */
}
/***** [DEV] Higher Education Doctorate Theme - V2 *****/
/* === Theme Notes ===
Dev theme - not in production
@theme-type: cdil-managed
@banner-style: v2-topbar 
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-higher-ed-doc {

/* Base Colors */
--dt-color-primary: #8A100B;
--dt-color-secondary: #524543;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #524543;
--dt-color-primary-dark-text: #501315;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
--home-h2-bg: var(--gradient-bg-1), url('https://cte.bc.edu/canvas/themes/higher-ed-doctorate/higher-ed-doc-bg.jpg') no-repeat right top;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-12) var(--s-6) var(--s-8)  var(--s-6);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/higher-ed-doctorate/bc-logo-lsoe.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Field Position */
--home-description-position: auto; /* field aligns to the right */

/* @info-bar: v2-transparent (.dp-header-pre) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

/*Module Banner */
--module-banner-bg: var(--dt-color-primary);

/* Home Description Padding */ 
--home-description-padding: 0 var(--s-5); 

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-higher-ed-doc.home .dp-header-description {
  color: #CAB57E;
  font-family: Georgia, 'Times New Roman', Times, serif; 
  font-size: var(--text-base);
  align-self:flex-end; /* align to the bottom */
  margin-bottom: var(--s-1);
}
/*****  HIGHER ED LEADERSHIP PROGRAM THEME *****/
/* === Theme Notes ===w
@banner-style: v2-topbar 
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-higher-ed-leadership {
--dt-color-primary: #2A4B44;
 --dt-color-secondary: #182C28;
--dt-color-accent: #501315;
 --bs-link-color: #294B44;
/* should have accessible contrast on white background */
--dt-color-primary-contrast: #fff;
/* should have accessible contrast over primary color */
--dt-color-secondary-contrast: #fff;
/* should have accessible contrast over secondary color */
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
/* should have accessible contrast on white background */
--dt-neutral-light: #ccc;

 /* Banner Background */
 --home-banner-bg: var(--dt-color-primary); 

 --home-h2-bg: var(--dt-color-primary); 
  
/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/higher-ed-doctorate/bc-logo-lsoe.png') no-repeat left center;

--home-description-position: var(--inline-field);
    
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-higher-ed-leadership.home .dp-header-pre {
    background: var( --dt-color-secondary);
}
.dp-wrapper.theme-higher-ed-leadership.home .dp-header-description {
    align-self: flex-end;
    margin-bottom: 5px;
}
/*****   INTERNATIONAL HIGHER ED PROGRAM THEME DT-V2 *****/
/* === Theme Notes ===
@banner-style: v2-topbar 
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-ihe {
--dt-color-primary: #56060F;
  --dt-color-secondary: #6C2A29;
--dt-color-accent: #b30000; 
--dt-color-primary-dark-text: #56060F; /* should have accessible contrast on white background */
--dt-color-primary-contrast: #fff; /* should have accessible contrast over primary color */
--dt-color-secondary-contrast: #fff; /* should have accessible contrast over secondary color */
--dt-neutral-dark: #555; 
--dt-neutral-medium: #656565; /* should have accessible contrast on white background */
--dt-neutral-light: #ccc;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary);
--home-banner-gap: 0;

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/school-counseling/lsoe-branding.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* Homepage Course Title */
--homepage-title-padding: var(--s-9) var(--s-6) var(--s-9) var(--s-6);

/* Adjustments for @banner-style: v2-topbar */
--home-h2-bg:#EDEDED  url('https://cte.bc.edu/canvas/themes/ihe/ihe-banner.jpg') no-repeat center top; 
--home-banner-gap: var(--s-3);
--home-banner-padding: var(--s-4) 0 0 0;

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

/* Field Positions */
--home-description-position: var(--inline-field);

/* Home Description Padding */
--home-description-padding: 0 var(--s-5); 

/*Module Banner */
--module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/ihe/ihe-banner.jpg') no-repeat center top; 
--module-bg-size: cover;
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-ihe .dp-header-title {
  font-variant: small-caps; 
}
.dp-wrapper.theme-ihe .dp-header-description {
  text-transform: uppercase;
  font-size: var(--text-sm)
}
/*#region ***** Law School Theme ******************************** */
.dp-wrapper.theme-law {

/* Base Colors */
  --dt-color-primary: #5B1415;
  --dt-color-secondary: #8a100b;
  --dt-color-accent:#8a100b;
  --dt-neutral-dark: #555;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #ccc;

/* Accessible Color Contrast */
  --dt-color-primary-dark-text: #5B1415;
  --dt-color-primary-contrast: #fff;
  --dt-color-secondary-contrast: #fff;
  
/* Banner Background */
  --home-banner-bg: var(--gradient-bg-1), url('https://cte.bc.edu/canvas/themes/law/law-home-bg.jpg') no-repeat left center;
  --course-title-style: uppercase;
 
/* Homepage Logo */
 --logo-bg: url('https://cte.bc.edu/canvas/themes/law/law-bc-logo.png') no-repeat left center;
 --logo-padding: 0 var(--s-4) 0 0;

 --homepage-title-padding: var(--s-7) var(--s-10) var(--s-7) 0;


/*Module Banner*/
  --module-banner-bg: var(--dt-color-primary);
  --module-course-title-style: uppercase;
}
.dp-wrapper.theme-law.law-v2 {
--home-banner-bg: var(--gradient-bg-3), url('/assets/law/law-banner-2.jpg') no-repeat left top;
}
/*#region ***** Law School Theme ******************************** */
.dp-wrapper.theme-messina {

/* Base Colors */
  --dt-color-primary: #5B1415;
  --dt-color-secondary: #8a100b;
  --dt-color-accent:#8a100b;
  --dt-neutral-dark: #555;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #ccc;

/* Accessible Color Contrast */
  --dt-color-primary-dark-text: #5B1415;
  --dt-color-primary-contrast: #fff;
  --dt-color-secondary-contrast: #fff;
  
/* Banner Background */
  --home-banner-bg: var(--gradient-bg-2), url('https://cte.bc.edu/canvas/themes/messina/messina-bg.jpg') no-repeat left bottom;
  --course-title-text-shadow: var(--text-shadow-2);
 
/* Homepage Logo */
 --logo-bg: url('https://cte.bc.edu/canvas/themes/messina/messina-logo.png') no-repeat left center;
 --logo-padding: 0 var(--s-4) 0 0;

 --homepage-title-padding: var(--s-10) var(--s-5) var(--s-10) 0;

 /* Description field home - alight to right */
--home-description-position: var(--inline-field); 

/*Module Banner*/
  --module-banner-bg: var(--dt-color-primary);
}
/*#region ***** Midwives Theme ******************************** */
/*
THEME NOTES
@banner-style: banner-full-bg
@infobar: infobar-transparent
@description-position: left
@banner-logo: true
*/
.dp-wrapper.theme-midwives {

/* Base Colors */
  --dt-color-primary: #AA3460;
  --dt-color-secondary: #501315;
  --dt-color-accent: #501315;
  --dt-neutral-dark: #555;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #ccc;

/* Accessible Color Contrast */
  --dt-color-primary-dark-text: #AA3460;
  --dt-color-primary-contrast: #fff;
  --dt-color-secondary-contrast: #fff;
  
/* Homepage Background */
  --home-banner-bg: var(--dt-color-primary) url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/midwives/midwives-bg.jpg?raw=true') no-repeat 20% bottom;

/* Homepage Logo */
 --logo-bg: url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/midwives/midwives-logo.png?raw=true') no-repeat left center;
 --logo-padding: 0 var(--s-4) 0 0;
  
/* Homepage Course Title */
--course-title-text-shadow: var(--text-shadow-2);
--course-title-color: var(--dt-color-secondary);
--course-title-text-shadow: none;
--course-title-size: var(--text-2xl);

/* Homepage Course Title */
--homepage-title-padding: var(--s-2) var(--s-5) var(--s-8) 0;
--homepage-title-width: 22ch;

 /* Description field home - align to right */
--home-description-position: var(--inline-field); 
--home-description-color: #000;
--home-description-background: #fff;

 /* Course Info Bar */
--course-info-bar-bg: var(--dt-color-primary);
--course-info-bar-style: uppercase;
--course-info-bar-size: var(--text-base);
--course-info-bar-padding: 0 var(--s-6) var(--s-2) var(--s-6);

/*Module Banner*/
--module-banner-bg: var(--dt-color-primary);
--module-title-color: var(--dt-color-primary-contrast);
}
/***** Master of Science in Applied Analytics (MSAA) Theme  *****/
/* === Theme Notes ===
@banner-style: v1-full-bg
@info-bar: v1-primary-bg
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-msaa {

/* Base Colors */
--dt-color-primary: #5B1415;
 --dt-color-secondary: #8A100B;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;
--bs-link-color: #5B1415;

/* Home Banner */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/msaa/msaa-bg.png') no-repeat center top;
--home-banner-gap: var(--s-2);
   
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/msaa/bc-logo.png') no-repeat left center;

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary);
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-msaa.home .dp-header {
  justify-content: flex-start;
}
.dp-wrapper.theme-msaa.home .dp-header:before {
  width: 168px;
  margin-top: calc(var(--s-3) * -1);
  margin-right: var(--s-3);
}
/* Accommodates two stacked program names, if present */
.dp-wrapper.theme-msaa.home .dp-header-description {
  display: flex;
  font-size: var(--text-md);
  line-height: 1.3;
  text-transform: uppercase;
  padding: 0 0 0 var(--s-5);
  border-left: 1px solid #fff;
  width: 28ch;
  color: #fff;
  min-height: 40px;
  align-items: center;
  letter-spacing: 1px;
  margin-top: var(--s-1);
}
@media screen and (max-width:520px) {
  
  .dp-wrapper.theme-msaa.home .dp-header {
    justify-content: center !important;
  }

  .dp-wrapper.theme-msaa.home .dp-header-description {
    border-left:none !important;
  }
  
}
/*****  MSL Masters of Science in Leadership - V2  *****/
/* === Theme Notes ===
@banner-style: v2-topbar 
*/
.dp-wrapper.theme-msl {

/* Base Colors */
--dt-color-primary: #501315;
--dt-color-secondary: #524543;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #524543;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
 --bs-link-color: #501315;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/msl/msl-logo.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Homepage Banner (with Adjustments for @banner-style: v2-topbar) */
--module-banner-bg: var(--dt-color-primary);
--home-h2-bg: url('https://cte.bc.edu/canvas/themes/msl/msl-bg.jpg') no-repeat center top;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-1) var(--s-2);
--course-title-text-shadow: var(--text-shadow-2);

/*Module Banner */

/* @info-bar: v2-transparent (.dp-header-pre) */
--course-info-bar-padding: var(--s-2) var(--s-4);
--course-info-bar-bg: var(--gradient-bg-2);

/* Field Positions */
--home-description-position: var(--inline-field);
--home-description-padding: 0 var(--s-5); 

}
/* === Custom Theme Styles === */
/* Make sure .dp-header-title and .dp-header-pre are are always stacked 
 - when there are background tints, the fields are not full width, so it changes the behavior
 - TODO: maybe this should be column by default
*/
.dp-wrapper.theme-msl.home .dp-header h2 {
    align-items: flex-start;
    flex-direction: column;
}
/* Add background for contrast */
.dp-wrapper.theme-msl.home .dp-header-title {
    margin: var(--s-14) var(--s-6) var(--s-8) var(--s-6);
    background: var(--gradient-bg-2);
    flex-grow: 0;
}
/* Add background for contrast */
.dp-wrapper.theme-msl.home .dp-header-pre {
    margin: 0 0 var(--s-6) var(--s-6) !important;
    bottom: auto !important;
    left: auto;
    width: auto !important;
    text-shadow: var(--text-shadow-2);
}
.dp-wrapper.theme-msl.home .dp-header-description {
    align-self:center; 
    font-size: 1.1rem;
    line-height:1.1;
}
@media screen and (min-width: 1310px) {
    .dp-wrapper.theme-msl.home .dp-header-description {
        max-width: 200px;
        text-align: center;
        padding: 0 var(--s-5) 0 0; 
    }
    
}
/***** Master of Science in Leadership Administration (MSLA) Theme  *****/
/* === Theme Notes ===
@banner-style: v1-full-bg
@info-bar: v1-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-msla {

/* Base Colors */
--dt-color-primary: #8A100B;
 --dt-color-secondary: #5B1415;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;
 --bs-link-color: #8A100B;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/msla/msla-banner-home.jpg') no-repeat center top;
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/msla/woods-logo.png') no-repeat left center;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-msla.home .dp-header .dp-header-description {
  text-transform: uppercase;
  font-size: var(--text-md);
  font-weight:bold;
  letter-spacing: 1px;
}
/***** Masters of Sports Science Administration  *****/
/* === Theme Notes ===
@banner-style: v1-full-bg
@info-bar: v1-primary-bg 
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-mssa {

/* Base Colors */
--dt-color-primary: #8A100B;
--dt-color-secondary: #D3CBB3;
--dt-color-accent: #8a100b;
--bs-link-color: #8A100B;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #000;

/* Banner */
--home-banner-bg: var(--dt-color-primary);  
--home-banner-gap: 0;
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/mssa/mssa-logo.png') no-repeat left top;
--logo-padding: 0 var(--s-4) 0 0;

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/mssa/mssa-logo.png') no-repeat var(--s-4) var(--s-3) ;

/* Course Title - General */
--course-title-text-shadow: var(--text-shadow-1);
  
/* Homepage Course Title */
--homepage-title-padding: var(--s-8) var(--s-6) var(--s-4) 0;

/* @info-bar: v1-primary-bg */
--course-info-bar-bg: var( --dt-color-secondary);

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-mssa.home .dp-header:before {
  min-height: 90px;
  position:absolute;
  top: auto;
  right: auto;
}
.dp-wrapper.theme-mssa:not(.home) .dp-header:before {
  min-height: 50px;
  margin-right: var(--s-3);
}
.dp-wrapper.theme-mssa.home .dp-header-description {
  order:-2;
  padding-left: var(--s-28);
  font-size: var(--text-md);
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  margin-top: var(--s-5);
  text-shadow: var(--text-shadow-1);
}
.dp-wrapper.theme-mssa.home .dp-header-subtitle {
  /* show subtitle field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  padding-left: var(--s-28);
  font-size: 1.21rem;
  letter-spacing: 1px;
  text-shadow: var(--text-shadow-1);
}
.dp-wrapper.theme-mssa.home .dp-header-pre {
  color: var(--dt-color-secondary-contrast);
}
/* Module banner */
.dp-wrapper.theme-mssa:not(.home) .dp-header  {
  background-size: 65px 65px;
  padding-left: var(--s-24) !important;
  min-height: 87px;
}
/* Mobile Styles */
@media screen and (max-width:500px) {

  .dp-wrapper.kl_mssa.home .dp-header-description{
    margin-top: var(--s-28);
    padding-left: 0;
  }

  .dp-wrapper.kl_mssa.home .dp-header-subtitle {
    padding-left:0;
  }

}
/*#region ***** Nursing CE (Clinical Aesthetics) Theme ******************************** */
/*
THEME NOTES
@banner-style: top-bar
@info-bar: v1-primary
@description-position: center
@banner-logo: true
@category: BC School Themes
@design-features: white top bar with background image pattern, professional healthcare styling
@mockup-source: Clinical Aesthetics course banner design - top bar style
*/
.dp-wrapper.theme-nursing-ce {

/* Base Colors */
  --dt-color-primary: #430000;
  --dt-color-secondary: #EADFC1;
  --dt-color-accent: #430000;
  --bs-link-color: #5B1415;
  --dt-neutral-dark: #555;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #ccc;
  
/* Accessible Color Contrast */
  --dt-color-primary-dark-text: #430000;;
  --dt-color-primary-contrast: #fff;
  --dt-color-secondary-contrast: #000;

/* Home Banner */
--home-banner-bg: #fff;
--home-banner-bg-size: cover;
--home-banner-padding: var(--s-4) 0 0 0;
--home-banner-gap: 0;
--homepage-title-padding: var(--s-28) var(--s-6) var(--s-5)  var(--s-6);
--module-drop-shadow: none;

/* Home Banner H2 */
--home-h2-bg:  var(--dt-color-primary) url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/nursing-ce/nursing-ce-banner.png?raw=true') no-repeat center 0px;
--home-h2-bg-size: 90%; 

/* Homepage Logo */
--logo-bg: url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/nursing-ce/nursing-ce-logo.png?raw=true') no-repeat left center;
--logo-padding: 0 var(--s-4) var(--s-4) 0;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-text-shadow: none;
--homepage-title-alignment: center; 
--homepage-title-radius: var(--radius-2);

/* Show banner image if present (hidden by default in most program themes */  
--banner-image-visibility: block;   

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Position Description field to top right */ 
--home-description-position: auto;
--home-description-color: #000; 

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* @info-bar: v2-transparent (.dp-header-pre) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-6);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-base);
--course-info-bar-alignment: center;

/* Description */
--home-description-max-width: 254px; 
--home-description-v-align: flex-start; 
}
/***** NURSING-NANDA PROGRAM THEME *****/
/* === Theme Notes ===
@banner-style: non-standard
@h3header-style: line-behind
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-nursing-nanda {

/* Base Colors */
--dt-color-primary: #8f2343;
--dt-color-secondary: #395c6e;
--dt-color-accent: #501315;
--dt-neutral-dark: #9c8c7f;
--dt-neutral-medium: #bfb3a9;
--dt-neutral-light: #e6e1de;    

/* Accessible Color Contrast */
 --bs-link-color: #8f2343;

/* Home Banner */
--home-banner-bg: #fff;
--home-banner-padding: var(--s-5) 0;
   
/* Homepage Logo */
--logo-bg: #fff url('https://bcweb.bc.edu/canvas/cte/canvas/themes/nursing-nanda/nanda-logo.jpg') no-repeat left center;
  
/*Module Banner Background */
--module-banner-bg: #fff;
--module-banner-padding: var(--s-4) 0;

/* Banner Font-Family */
--banner-font-family: rockwell, "arvo", "Lato", sans-serif; 

/* Course Title - General */
--course-title-text-shadow: var(--text-shadow-1);

/* Hide Navigation Block */
--navigation-visibility: none; 

/* Hide Banner Image Block */
--banner-image-visibility: none; 
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-nursing-nanda .dp-header {
    box-shadow:none;
    gap: var(--home-banner-gap);
}
.dp-wrapper.theme-nursing-nanda .dp-header:before {
    content:'';
    background: var(--logo-bg);
    background-size: contain;
    max-width: 260px;
    min-height: 90px;
    order: -3;
    width: 100%;
    margin-left: 0;
    margin-right: var(--s-5);
}
/* Matching Home Banner */
.dp-wrapper.theme-nursing-nanda .dp-header:after {
    content: "";
    background: url('https://bcweb.bc.edu/canvas/cte/canvas/themes/nursing-nanda/bclogo.png') no-repeat left center;
    width: 100%;
    max-width: 300px;
    min-height: 90px;
    background-size: contain; 
    order: -1;
}
.dp-wrapper.theme-nursing-nanda .dp-header h2 {
    gap:0;
}
/* Custom course title style */
.dp-wrapper.theme-nursing-nanda .dp-header-title {
    font-size: var(--text-xl);
    background: var(--dt-color-primary);
    color: #fff;
    font-weight: normal;
    letter-spacing: 1px;
    width:100%;
    padding: var(--s-4) var(--s-4) var(--s-2) var(--s-4);
    border-radius: var(--radius-2);
}
/* Hiding unused fields for this theme */
.dp-wrapper.theme-nursing-nanda .dp-header-description,
.dp-wrapper.theme-nursing-nanda .dp-header-subtitle,
.dp-wrapper.theme-nursing-nanda .dp-header-pre {
    display:none !important
}
/* H3 with Line Behind  */
.dp-wrapper.theme-nursing-nanda h3,
.dp-wrapper.theme-nursing-nanda >div>h3:not(.ui-state-default) {
  font-family: var(--banner-font-family);
}
/***** BC Nursing General Theme *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-nursing { 

/* Base Colors */
--dt-color-primary: #5B1415;
--dt-color-secondary: #726158;
--dt-color-accent: #8a100b;
--bs-link-color: #5B1415;
  
/* Banner */
--home-banner-bg: var(--gradient-bg-05), url('https://cte.bc.edu/canvas/themes/nursing/nursing-banner.jpg') no-repeat left center;
--home-banner-gap: var(--s-2);
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/nursing/cson-logo.png') no-repeat left center;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-text-shadow: var(--text-shadow-1);

--home-description-position: auto; /* field aligns to the right */

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

 /*Module Banner Background */
 --module-banner-bg: var(--dt-color-primary);
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-bc.home .dp-header-description {
  color: #dccaa0;
  font-weight: bold;
  font-size: var(--text-md);
  text-shadow: var(--text-shadow-1);
}
/***** BC Roche Center Theme *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-roche-center { 

/* Base Colors */
--dt-color-primary: #06426B;
--dt-color-secondary: #726158;
--dt-color-accent: #8a100b;
--bs-link-color: #5B1415;
  
/* Banner Background */
--home-banner-bg: #fff;
--home-h2-bg: var(--dt-color-primary); 
--home-banner-padding: var(--s-4) 0 0 0;
--home-banner-gap: 0;
--homepage-title-padding: var(--s-5) var(--s-6) var(--s-5)  var(--s-6);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/roche-center/bc-roche-logo.png') no-repeat left center;
--logo-padding: 0 var(--s-4) var(--s-4) 0;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-text-shadow: none;

  /* Show banner image if present (hidden by default in most program themes */  
  --banner-image-visibility: block;   

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Position Description field to top right */ 
--home-description-position: auto;

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* @info-bar: v2-transparent (.dp-header-pre) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-6);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-base);

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-roche-center.home .dp-header {
    box-shadow: none;
}
.dp-wrapper.theme-roche-center.home .dp-header h2 {
    background: var(--home-h2-bg);
    color: var(--dt-color-secondary-contrast) !important;
    gap: 0;
    text-align:center;
    border-radius: var(--radius-2);
}
.dp-wrapper.theme-roche-center.home .dp-header-pre {
    justify-content: center;
}
.dp-wrapper.theme-roche-center.home .dp-header-description {
    color: #000;
    /* max-width: 196px; */
    /* margin-top: -26px; */
    font-weight: normal;
    font-size: var(--text-sm);

    /* Hide text and replace with logo */
    align-self: flex-start;
    background: url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/roche-center/healey-foundation-logo.png?raw=true') no-repeat left center;
    background-size: contain;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    height: 50px;
    width: 165px;
    margin-bottom: .5rem;
    margin-top: -.25rem;
}
.dp-wrapper.theme-roche-center.home.default .dp-header-description {
    color: #000;
    max-width: 196px; 
    margin-top: -26px;
    font-weight: bold;
    font-size: var(--text-sm);

    /* Hide text and replace with logo */
    align-self: center;
    background: none;
    overflow:visible;
    text-indent: 0;
    white-space: normal;
    height: auto;
    width: auto;
    margin:none;
   
}
/***** School Counseling Theme *****/
/* === Theme Notes ===
@banner-style: v2-topbar
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-school-counseling {

/* Theme Colors */
--dt-color-primary: #c23148;
--dt-color-secondary: #524543;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #524543;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;
--dt-color-primary-dark-text: #501315;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/school-counseling/lsoe-branding.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* Adjustments for @banner-style: v2-topbar */
--home-h2-bg:#EDEDED url('https://cte.bc.edu/canvas/themes/school-counseling/school-counseling-bg.png') no-repeat right top;
--home-banner-padding: var(--s-5) 0 0 0;
--home-banner-gap: var(--s-4);
--homepage-title-padding: var(--s-10) var(--s-6) var(--s-6)  var(--s-6);

/* Homepage Course Info Bar (dp-header-pre) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-color: #000;

/* Banner Font-Family */
--banner-font-family: Georgia, serif;

/* Field Positions*/
--home-description-position: auto; /* field is position to the right inline */

/* Home Description Padding */ 
--home-description-padding: 0 var(--s-5); 

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-school-counseling.home .dp-header h2 {
  background-size: contain;
  color: #000;
}
.dp-wrapper.theme-school-counseling.home .dp-header-title {
  color: #000;
  max-inline-size: 22ch;
}
/***** SFL Theme *****/
/* === Theme Notes ===
@banner-style: V3
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-sfl {

/* Theme Colors */
--dt-color-primary: #234673;
--dt-color-secondary: #003957;
--dt-color-accent: #0d5e93;
--bs-link-color: #003957;

/* Banner */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/sfl/brisk-banner.jpeg') no-repeat left top;
--home-banner-gap:  var(--s-2);
--homepage-title-padding: var(--s-2) 0 var(--s-8) 0;
 --course-title-size: var(--text-2xl);

 /* Homepage Logo */
--logo-bg: url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/sfl/bc-roche-logo-white.png?raw=true') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 0;

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* Homepage Course Info Bar (#kl_banner_left) */
--course-info-bar-padding: var(--s-3) var(--s-5);
--course-info-bar-bg: none;

/* Show banner image if present (hidden by default in most program themes */
--banner-image-visibility: block;

/* show navigation block (hidden by default for most program themes) */
--navigation-visibility: block;

/* Field Positions */
--home-description-position: auto; /* field is not stacked */

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-sfl.home .dp-header {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.dp-wrapper.theme-sfl .dp-header {
  border-top: 6px solid var( --dt-color-secondary);
  margin-bottom:0;
}
.dp-wrapper.theme-sfl .dp-banner-image {
  position: relative;
  z-index: 1;
  top: -0.25rem;
  margin-bottom: -0.25rem;
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
  }
.dp-wrapper.theme-sfl .dp-banner-image img {
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
}
/*#region ***** SSW General and ICHA ******************************** */
.dp-wrapper.theme-ssw {

/* Base Colors */
--dt-color-primary: #5B1415;
 --dt-color-secondary: #5B1415;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--bs-link-color: #5B1415;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/ssw/ssw-banner-bg.jpg') no-repeat left top;

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/ssw/bc-logo-ssw.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 0;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-text-shadow: var(--text-shadow-1);

/* Banner Font-Family */
--banner-font-family: var(--open-sans);

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

}
/* === ICHA SUB-THEME === */
.dp-wrapper.theme-ssw.icha {
  --home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/ssw/icha-banner-bg.jpg') no-repeat left top;
  --module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/ssw/icha-module-banner.jpg') no-repeat center top;
}
/* Home / Program Title (field: description) */
.dp-wrapper.theme-ssw.home .dp-header .dp-header-description {
  font-weight:bold;
  text-transform: uppercase;
  text-shadow: var(--text-shadow-2);
}
/* Module Banner */
.dp-wrapper.theme-ssw.icha:not(.home) .dp-header {
  background-size: cover;
}
.dp-wrapper.theme-ssw.icha:not(.home) .dp-header .dp-header-pre {
  background-color: var(--translucent-bg-5);
}
.dp-wrapper.theme-ssw.icha:not(.home) .dp-header .dp-header-subtitle {
  background: var(--dt-color-primary);
  padding: var(--s-2) var(--s-5) var(--s-1) var(--s-5);
  margin-bottom:0; /* clearing defaults to fit in narrow top bar style */
  /* account for header padding */
  position: relative;
  top: calc(var(--s-4) * -1); 
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12) * -1) !important;
  margin-bottom: calc(var(--s-1) * -1) !important;
}
/***** STM CROSSROADS THEME  *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-stm-crossroads { 

  /* Base Colors */
  --dt-color-primary: #705E52;
  --dt-color-secondary: #C7322C;
  --dt-color-accent: #8a100b;
  --bs-link-color: #5B1415;
    
  /* Banner Background */
  --home-banner-bg: #fff;
  --home-h2-bg: var(--dt-color-primary); 
  --home-banner-padding: var(--s-4) 0 0 0;
  --home-banner-gap: 0;
  --homepage-title-padding: var(--s-5) var(--s-6) var(--s-5)  var(--s-6);
  
  /* Homepage Logo */
  --logo-bg: url('https://cte.bc.edu/canvas/themes/stm-crossroads/bc-stm-crossroads-logo.jpg') no-repeat left center;
  --logo-padding: 0 var(--s-4) var(--s-4) 0;
  
  /* Homepage Course Title */
  --course-title-style: uppercase;
  --course-title-size: var(--text-xl);
  --course-title-text-shadow: none;
  
    /* Show banner image if present (hidden by default in most program themes */  
    --banner-image-visibility: block;   
  
  /* Position Description field to top right */ 
  --home-description-position: auto;
  
  /*Module Banner Background */
  --module-banner-bg: var(--dt-color-primary);
  
  /* @info-bar: v2-transparent (.dp-header-pre) */
  --course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-6);
  --course-info-bar-bg: none;
  --course-info-bar-size: var(--text-base);
  
  
  }
/* === Custom Theme Styles === */
.dp-wrapper.theme-stm-crossroads.home .dp-header {
      box-shadow: none;
  }
.dp-wrapper.theme-stm-crossroads.home .dp-header h2 {
      color: var(--dt-color-secondary-contrast) !important;
      gap: 0;
      text-align:center;
      border-radius: var(--radius-2);
  }
.dp-wrapper.theme-stm-crossroads.home .dp-header-pre {
      justify-content: center;
  }
.dp-wrapper.theme-stm-crossroads.home .dp-header-description {
      color: #000;
  }
/***** STM PROGRAM THEME  *****/
/* === Theme Notes ===
@banner-style: non-standard
@info-bar: v1-primary
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-stm {

/* Base Colors */
--dt-color-primary: #726158;
--dt-color-secondary: #501315;
--dt-color-accent: #501315;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #DFDDCF;

/* Accessible Color Contrast */
--dt-color-primary-dark-text: #501315;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Home Banner */
--home-banner-padding: 0 0 0 0;

/* Banner Background */
 --home-banner-bg: var(--dt-neutral-light);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/stm/stm-banner.jpg') no-repeat center top;

/* Module Banner */
--module-banner-padding: 0 var(--s-6) var(--s-5) var(--s-6);
--module-banner-bg: var(--dt-color-primary);

/* Banner Font */
--banner-font-family: "PT Serif", Georgia, serif;

/* @info-bar  */
--course-info-bar-padding: var(--s-1) var(--s-6) var(--s-6) var(--s-12);

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-stm.home .dp-header {
padding: 0;
gap: 0;
}
/* Home banner background */
.dp-wrapper.theme-stm.home .dp-header:before {
  background: var(--logo-bg);
  order: -2;
  content:'';
  width: 100%;
  max-width: 100%;
  min-height: 92px;
  background-size: cover;
  margin: var(--s-0) var(--s-0);
}
/* applying background image to h2 content + setting height */
.dp-wrapper.theme-stm.home .dp-header h2 {
    background-color: var(--dt-neutral-light);
    gap: var(--s-0);
    justify-content: center;
}
.dp-wrapper.theme-stm.home .dp-header-title {
  color: var( --dt-color-secondary);
  padding: var(--s-5) var(--s-2) var(--s-5) var(--s-2);
  text-align: center;
}
/* Switches description to Courseinfo level */
.dp-wrapper.theme-stm.home .dp-header-description {
  order: 0; /* used for course info */
  width: var(--home-description-position);
  background: var(--dt-color-primary);
  padding: var(--s-1) var(--s-6);
  margin-left: var(--s-0);
  text-align: center;
  display:none; /* Hides Banner Left */
}
/* Unhide Subtitle and add logo */
.dp-wrapper.theme-stm.home .dp-header .dp-header-subtitle {
  /* show subitle field */
  position: static;
  width: auto;
  height: auto;
  padding: 0 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;
  /* Styles */
  text-indent: -99999em;
  Order: -3;
  background: var(--dt-color-primary) url(https://cte.bc.edu/canvas/themes/stm/BC-Program-Logo.png) no-repeat center 7px;
  background: var(--dt-color-primary) url(https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/stm/BC-Program-Logo.png?raw=true) no-repeat center 7px;
  background-size: 500px 23px;
  width: 100%;
  height: 35px;
  display: block;
}
.dp-wrapper.theme-stm.home .dp-header-pre {
   background: var(--dt-color-primary);
   justify-content: center;
}
/* Modules Pages */
.dp-wrapper.theme-stm:not(.home) .dp-header {
  background-color: var(--dt-neutral-light);
  color: var( --dt-color-secondary);
  border-top: 5px solid var(--dt-color-primary);
}
.dp-wrapper.theme-stm:not(.home) .dp-header-pre {
  color: #000;
}
.dp-wrapper:not(.home).theme-stm .dp-header-title {
  color: var( --dt-color-secondary);
}
.dp-wrapper.theme-stm .dp-header-description:not(.home) {
  margin-top:0;
}
.dp-wrapper:not(.home).theme-stm .dp-header-subtitle {
  color: #fff;
  font-weight: normal;
  background-color: #56060F;
  background-color: var(--dt-color-primary);
  order: -1;
  margin: -3px 0 var(--s-3) 0;
  font-size: .8rem;
  /* account for header padding */
  position: relative;
  left: calc(var(--s-6) * -1);
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12) * -1) !important;
  padding: var(--s-1) var(--s-6);
}
/* COMPONENT: Icon Progress Bar */
/* #kl_wrapper_3.kl_stm .kl_progress_icons li.kl_pending .kl_colored_bar,
.dp-wrapper.theme-stm {
  background-color: var(--dt-color-primary);
  border-top: 2px solid var(--neutral-dark);
  border-bottom: 2px solid var(--neutral-dark);
}

#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_pending a,
.dp-wrapper.theme-stm {
  background: var(--dt-color-primary) !important;
}

#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_pending i,
.dp-wrapper.theme-stm {
  color: #fff;
}

#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_complete .kl_colored_bar,
#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_current .kl_colored_bar,
.dp-wrapper.theme-stm,
.dp-wrapper.theme-stm {
  border: 2px solid var( --dt-color-secondary) !important;
  background: var( --dt-color-secondary) !important;
}

#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_current a,
#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_complete a,
.dp-wrapper.theme-stm,
.dp-wrapper.theme-stm {
  border: 3px solid var( --dt-color-secondary) !important;
  background: var( --dt-color-secondary) !important;
} */
/* Mobile Adjustments */
@media screen and (max-width:520px) {

/* Top Logo */
#kl_wrapper_3.kl_stm.home #kl_banner .kl_subtitle,
.dp-wrapper.theme-stm .dp-header .dp-header-subtitle {
background-size: 90%;
}

}
/***** BC TSOL Theme *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-tsol { 

/* Base Colors */
--dt-color-primary: #5B1415;
--dt-color-secondary: #726158;
--dt-color-accent: #8a100b;
--bs-link-color: #5B1415;
  
/* Banner Background */
/* --home-banner-bg: linear-gradient(121deg, rgba(0,0,0, .3) 0%, rgba(0,0,0,0.3) 25%, rgba(0,0,0,.2) 90%), url('https://cte.bc.edu/canvas/themes/bc-general/bc-bg-home.jpg') no-repeat left 55%; */
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/school-counseling/lsoe-branding.png') no-repeat left center;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-text-shadow: var(--text-shadow-1);

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

 /*Module Banner Background */
 --module-banner-bg: var(--dt-color-primary);
}
/* === Custom Theme Styles === */
.dp-wrapper.theme-bc.home .dp-header-description {
  color: #dccaa0;
  font-weight: bold;
  font-size: var(--text-md);
  text-shadow: var(--text-shadow-1);
}
/***** BC VTT Theme *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
.dp-wrapper.theme-vtt { 

/* Base Colors */
--dt-color-primary: #225578;
--dt-color-secondary: #726158;
--dt-color-accent: #C57244;
--bs-link-color: #225578;
  
/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/vtt/vtt-banner-bg.jpg?raw=true') no-repeat center -25px;
--course-title-text-shadow: var(--text-shadow-2);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/ssw/bc-logo-ssw.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 0;

/* Homepage Course Title */
--course-title-size: var(--text-2xl);
--homepage-title-padding: var(--s-1) var(--s-2) var(--s-2-5) var(--s-2);
--course-title-text-shadow: var(--text-shadow-2);

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* @info-bar: v1-primary-bg */
--course-info-bar-bg: var(--dt-color-primary);

 /*Module Banner Background */
 --module-banner-bg: var(--dt-color-primary);
}
/* === Custom Theme Styles === */
/* Add background for contrast */
.dp-wrapper.theme-vtt.home .dp-header-title {
    margin: var(--s-16) 0 var(--s-8) 0;
    background: var(--gradient-bg-2);
    flex-grow: 0;
    border-radius: var(--radius-1);
    font-size: 2.2rem;
}
.dp-wrapper.theme-vtt.home .dp-header:before {
    min-height: 80px;
}
/***** Writing and the Human Condition Theme *****/
/* === Core Theme Settings === */
.dp-wrapper.theme-whc { 

/* Base Colors */
--dt-color-primary: #501315;
--dt-color-secondary: #524543;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #524543;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--bs-link-color: #501315;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;
  
/* Banner Background */
--home-banner-bg: #fff;
--home-banner-padding: var(--s-4) 0 0 0;
--home-banner-gap: 0;
--home-banner-margin: var(--s-8) 0 var(--s-4) 0;

/* Homepage Logo */
--logo-bg: url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/whc/whc-logo.png?raw=true') no-repeat left center;
--logo-padding: var(--s-2) 0  var(--s-2) 0;

/* Homepage Course Title */
--course-title-size: var(--text-2xl);
--course-title-text-shadow: none;
/* Adding percentage top padding on site title to make the height respond to mobile screen width */ 
--homepage-title-padding: 25% var(--s-6) var(--s-3)  var(--s-6);
--home-h2-bg:  var(--dt-color-primary) url('https://github.com/cdil-bc/canvas-theme-assets/blob/main/themes/whc/whc-banner.jpg?raw=true') no-repeat center 0px;
--home-h2-gap: var(--s-1);
--home-h2-bg-size: 100%; 
--home-h2-margin: var(--s-3) 0 0 0;

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Position Description field to top right */ 
--home-description-position: auto;
--home-description-color: #000;
--home-description-padding: 0 0 var(--s-3) 0; 
--home-description-v-align: end;

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* @info-bar: v2-transparent (.dp-header-pre) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-base);

}
/*****  Woods College General Theme - V2  *****/
/* === Theme Notes ===
@banner-style: v2-topbar 
*/
.dp-wrapper.theme-woods {

/* Base Colors */
--dt-color-primary: #501315;
--dt-color-secondary: #524543;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #524543;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
 --bs-link-color: #501315;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/woods/woods-logo.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Homepage Banner (with Adjustments for @banner-style: v2-topbar) */
--module-banner-bg: var(--dt-color-primary);
--home-h2-bg: var(--gradient-bg-2), url('https://cte.bc.edu/canvas/themes/woods/woods-bg-home.jpg') no-repeat 100% 100%;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-8) var(--s-6) var(--s-4)  var(--s-6);
--course-title-text-shadow: var(--text-shadow-1);


/*Module Banner */
--module-banner-padding: 0;
--module-h2-bg: url('https://cte.bc.edu/canvas/themes/woods/woods-bg-interior.jpg') no-repeat 100% 100%;

/* @info-bar: v2-transparent (.dp-header-pre) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;

/* Field Positions */
--home-description-position: var(--inline-field);

/* Home Description Padding */ 
--home-description-padding: 0 var(--s-5); 

}
/* === Custom Theme Styles === */
.dp-wrapper.theme-woods:not(.home) h2.dp-heading {
    background-size: cover;
    padding: var(--s-3) var(--s-6) var(--s-5) var(--s-6);
}
.dp-wrapper.theme-woods:not(.home) .dp-header-subtitle {
    text-transform:uppercase;
    padding: var(--s-1) var(--s-6);
    font-size: var(--text-sm);
    margin-top:0; 
}
.dp-wrapper.theme-woods:not(.home) .dp-header-description {
    padding: var(--s-1) var(--s-6);
    background: var(--dt-neutral-light);
    color: #000;
    text-transform: none;
 }
/***** Formación Continua Online *****/
/* === Theme Notes ===
@theme-type: general use
@banner-style: v1-full-bg
@info-bar: v1-primary-bg 
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_formacion,
.dp-wrapper.theme-formacion {

/* Base Colors */
--dt-color-primary: #0974adf2;
--dt-color-secondary: #726158;
--dt-color-accent: #8a100b;
--bs-link-color: #0974adf2;
  
/* Banner Background */
--home-banner-bg: #0974adf2;
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/formacion/formacion-logo.png') no-repeat left center;

 /*Module Banner Background */
 --module-banner-bg: var(--dt-color-primary);

 /* Desription field position to right */
 --home-description-position: auto; 

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-6) var(--s-6);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

}
/***** JESUIT INSTITUTE THEME THEME *****/
/* === Theme Notes ===
@banner-style: non-standard 
This theme is a bit of hack - not really following usual conventions but haven't had enough time/reason to revise it
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_jesuit-institute,
.dp-wrapper.theme-jesuit-institute {

/* Base Colors */
--dt-color-primary: #8B0028;
--dt-color-secondary: #C4C4C4;
--dt-color-accent: #8A100B;
--dt-neutral-dark: #555; 
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--dt-color-primary-dark-text: #56060F;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #000;

/* Banner Background */
--home-banner-bg:  var(--dt-color-primary);
 
/* Homepage Logo */
--logo-bg: none;

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/iajs/iajs-logo-white-bg.png') no-repeat left bottom;

/* Banner Image Visibility */
--banner-image-visibility: block; 
--banner-image-radius: 0;

--navigation-visibility: block;

}
/* Remove formatting on banner since we're not using it except for screen reader text  */
#kl_wrapper_3.kl_jesuit-institute #kl_banner,
.dp-wrapper.theme-jesuit-institute .dp-header {
  padding-left: 130px !important;
  background-position: 25px bottom;
}
#kl_wrapper_3.kl_jesuit-institute.home #kl_banner,
.dp-wrapper.theme-jesuit-institute.home .dp-header {
  background: none;
  box-shadow: none;
  padding: 0 !important;
  margin: var(--s-4) 0 0 0;
  height: 0;
}
/* Visually hide course title and subitle on homepage */
#kl_wrapper_3.kl_jesuit-institute.home #kl_banner h2,
.dp-wrapper.theme-jesuit-institute.home .dp-header h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0; 
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
/***** [DEPRECATED] BC General - Editable Image *****/
/* === Theme Notes ===
This theme has been deprecated. Just keeping it around so legacy pages don't break. 
It was meant provide banner where the background image could be edited, but it was hacky and fragile. 
*/
#kl_wrapper_3.kl_bc_editable {
  --dt-color-primary: #5B1415;
   --dt-color-secondary: #555;
  --dt-color-accent: #8a100b;
 --dt-color-primary-dark-text: #5B1415;
  /* should have accessible contrast on white background */
  --dt-color-primary-contrast: #fff;
  /* should have accessible contrast over primary color */
  --dt-color-secondary-contrast: #fff;
  /* should have accessible contrast over secondary color */
  --dt-neutral-dark: #555;
  --dt-neutral-medium: #656565;
  /* should have accessible contrast on white background */
  --dt-neutral-light: #ccc;

/* Hide banner image if present */
--banner-image-visibility: block; 

max-width: 840px;

}
#kl_wrapper_3.kl_bc_editable #kl_banner {
  position:relative;
  z-index: 1;
  overflow:visible;
}
/* Hide these fields since they throw off the display; navigation not being used  */
#kl_wrapper_3.kl_bc_editable .kl_subtitle, 
#kl_wrapper_3.kl_bc_editable #kl_description,
#kl_wrapper_3.kl_bc_editable #kl_navigation {
  display:none;
}
#kl_wrapper_3.kl_bc_editable #kl_banner h2 {
  font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: 2.3rem;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
  background-color: rgba(0, 0, 0, 0.2);
  padding: .0 .75rem;
  display: inline-block;
  font-weight: bold;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 2px;
  line-height: 1.2
}
#kl_wrapper_3.kl_bc_editable #kl_banner_image {
  position:relative;
  margin-top: .5rem;
  margin-bottom: 1rem;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  min-height: 175px;
}
#kl_wrapper_3.kl_bc_editable #kl_banner_image:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(263.6deg, rgba(0, 0, 0, 0) 2.37%, rgba(0, 0, 0, 0.569642) 70.37%, rgba(0, 0, 0, 0.626229) 84.77%, rgba(0, 0, 0, 0.6) 97.68%);
  height: 100%;
}
#kl_wrapper_3.kl_bc_editable #kl_banner_image:after {
  content: " ";
  display: block;
  position: absolute;
  bottom: 30px;
  left: 30px;
  background-image: url('https://cte.bc.edu/canvas/themes/bc-general/bc-logo.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-color: transparent;
  height: 53px;
  width: 175px;
}
.edit #kl_wrapper_3.kl_bc_editable #kl_banner {
  position:relative;
}
.edit #kl_wrapper_3.kl_bc_editable #kl_banner:after {
  content:"You can replace this banner. Minimum height: 175px. ";
  position: absolute;
  top: 0;
  right:0; 
  display:block;
  width: 152px;
  font-size: 14px;
  margin: 0;
  background: #b45f06;
  font-size: 12px;
  padding: 4px 5px;
  color: #fff;
  z-index: 1;
}
#kl_wrapper_3.kl_bc_editable #kl_banner_image + p, 
#kl_wrapper_3.kl_bc_editable + p {
  background: var(--dt-color-primary);
  color: #fff;
  margin: 0 0 20px 0;
  padding: .5rem .5rem .5rem 30px;
  max-width: 840px;
  box-sizing: border-box;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
/* Neutral Variation */
#kl_wrapper_3.kl_bc_editable.neutral-color #kl_banner_image + p, 
#kl_wrapper_3.kl_bc_editable.neutral-color + p {
  background: #333;
}
/*#endregion*/
/***** BC Red Advanced *****/
/* === Theme Notes ===
@banner-style: v1-full-bg
@info-bar: v2-transparent
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_bc { 

/* Base Colors */
--dt-color-primary: #5B1415;
 --dt-color-secondary: #726158;
--dt-color-accent: #8a100b;
--bs-link-color: #5B1415;
  
/* Banner Background */
--home-banner-bg: linear-gradient(121deg, rgba(0,0,0, .3) 0%, rgba(0,0,0,0.3) 25%, rgba(0,0,0,.2) 90%), url('https://cte.bc.edu/canvas/themes/bc-general/bc-bg-home.jpg') no-repeat left 55%;
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/bc-general/bc-logo.png') no-repeat left center;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-text-shadow: var(--text-shadow-1);

/* Homepage Course Title */
--homepage-title-padding: var(--s-5) 0 var(--s-5) 0;

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

 /*Module Banner Background */
 --module-banner-bg: var(--dt-color-primary);
}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_bc.home #kl_description {
  color: #dccaa0;
  font-weight: bold;
  font-size: var(--text-md);
  text-shadow: var(--text-shadow-1);
}
/*****  CDIL Theme  *****/
/* === Theme Notes ===
@theme-type: Internal CDIL
@banner-style: v3-bc-basic
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_cdil {
  --dt-color-primary: #003856;
  --dt-color-secondary:#726158;
  --dt-color-accent: #0d5e93; 
  --dt-color-primary-dark-text: #003957; /* should have accessible contrast on white background */
  --dt-color-primary-contrast: #fff; /* should have accessible contrast over primary color */
  --dt-color-secondary-contrast: #fff; /* should have accessible contrast over secondary color */
  --dt-neutral-dark: #726158; 
  --dt-neutral-medium: #656565; /* should have accessible contrast on white background */
  --dt-neutral-light: #ccc;
  --bs-link-color: #003856 !important;
  --bs-link-hover-color: #0d5e93 !important;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/cdil/cdil-bg.jpg') no-repeat left top;
--homepage-title-padding: var(--s-3) var(--s-5) var(--s-1)  0;
--home-banner-gap: 0;

/* Logo */
--logo-visibility: none; /* Logo hidden */

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-5) var(--s-6);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

/* Banner Font-Family */
--banner-font-family: "Lato Black", "Lato", sans-serif;

/* Course Title - General */
--course-title-style: uppercase;
--course-title-ltr-sp: 2px;

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/cdil/cdil-bg-module.jpg') no-repeat left top;
--module-bg-size: cover;

/* Show banner image if present (hidden by default in most program themes */
--banner-image-visibility: block; 

}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_cdil.home #kl_description {
  margin-top:0;
  padding-top: var(--s-3);
  margin-bottom: calc(var(--s-1) * -1); /* reduce the space between subtitle and page title */
}
#kl_wrapper_3.kl_cdil .kl_subtitle {
  /* Show hidden field */
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  color: #eee;
  order: -4;
  text-transform: uppercase;

  font-size: var(--text-xsm);
  background: #222;
  padding: var(--s-2) var(--s-6) var(--s-1) var(--s-6);
  width: 100%;
  /* account for header padding */
  position: relative;
  top: calc(var(--s-4) * -1);
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12)*-1) !important;
  margin-bottom: calc(var(--s-4)*-1);
}
#kl_wrapper_3.kl_cdil.home .kl_subtitle {
  top: calc(var(--s-6) * -1);
}
/***** BC Basic Theme *****/
/* === Theme Notes ===
@banner-style: v3-bc-basic
@info-bar: N/A

- Close to default Design Plus
- Provides color options by adding an addition class

*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_colored_headings {

--dt-color-primary: #56060F;
--dt-color-primary-contrast: white;
--dt-color-primary-dark-text: #56060F;
--dt-color-secondary: #8A100B;
--dt-color-secondary-contrast: #fff;
  
/* Banner Background */
--home-banner-bg: var(--dt-color-primary);
--home-banner-padding: var(--s-4) var(--s-5);

/* Homepage Logo */
--logo-bg: none;
--logo-visibility: none;

/*Module Banner */
--module-banner-padding: var(--s-4) var(--s-5);
--module-banner-bg: var(--dt-color-primary);

/* Banner Field Order - Home */
--home-description-order: 0; /* default: field used for program info */
--home-subitle-position: 100%; /* field is stacked*/
--bannerleft-position: auto; /* field aligns to the right */

/* Show banner image if present (hidden by default in most program themes */
--banner-image-visibility: block; 

/* show navigation block (hidden by default for most program themes) */
--navigation-visibility: block; 

}
/* Custom Theme Styles  */
#kl_wrapper_3.kl_colored_headings>div {
  /* Reset from DT Theme */
  border: none;
  padding:0;
}
#kl_wrapper_3.kl_colored_headings #kl_banner {
  background: var(--module-banner-bg);
  color: var(--dt-color-primary-contrast);
  padding: var(--s-4) var(--s-0);
  border:none;
}
#kl_wrapper_3.kl_colored_headings.home #kl_banner {
  padding: var(--s-3) var(--s-0);
  gap:0;

  background: var(--home-banner-bg);
  background-size: cover;
}
#kl_wrapper_3.kl_colored_headings #kl_banner h2 {
    text-align: unset;
    text-transform: unset;
    gap: var(--s-4);
    margin: 0; 
}
#kl_wrapper_3.kl_colored_headings.home #kl_banner h2 {
  gap:0;
}
#kl_wrapper_3.kl_colored_headings #kl_banner #kl_banner_right {
  font-size: var(--text-2xl) !important; /* override media query from dt theme */
  padding: var(--s-1) 0;
}
#kl_wrapper_3.kl_colored_headings.home #kl_banner #kl_banner_right {
  font-size: var(--text-2xl);
}
#kl_wrapper_3.kl_colored_headings #kl_banner #kl_banner_left {
 /* Reset from DT Theme */
  background-color: transparent !important;
  color: var(--dt-color-primary-contrast) !important;
  font-size: unset;
  line-height: unset;
  margin: unset;
  padding: unset;

  order: 1;
  font-size: 1rem;
  padding: var(--s-1) var(--s-2);
  margin-left: var(--s-4);
  margin-right: var(--s-4) !important;
  border: 1px solid var(--dt-color-primary-contrast) !important;
  border-radius: var(--radius-2);
  width: var(--bannerleft-position);
  text-transform: var(--course-info-bar-style);
  font-size: var(--course-info-bar-size);
  font-weight:bold;
  letter-spacing: 1px;
}
#kl_wrapper_3.kl_colored_headings.home #kl_banner #kl_banner_left {
  bottom: 0 !important;
  margin: 0 !important;
  left: 0 !important;
}
#kl_wrapper_3.kl_colored_headings #kl_banner .kl_subtitle { 
  /* Reset from DT Theme */
  line-height: unset;
  text-align: unset;
  border-top: none;
  border-bottom: none;
  padding: unset;

  /* show hidden field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  padding-right: var(--s-5);
  text-transform: uppercase;
  font-size: var(--text-sm);
  align-self: center;
  background-color: transparent;
}
#kl_wrapper_3.kl_colored_headings.home #kl_banner .kl_subtitle {
  /* show subtitle since it's not used for logo */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;
  
  text-transform: uppercase;
  background: none;
  color: var(--dt-color-primary-contrast);
  font-size: var(--text-base);
}
#kl_wrapper_3.kl_colored_headings #kl_banner #kl_description {
  /* Reset from DT Theme */ 
  background-color: transparent;
  color: unset;
  padding: unset;

  padding: 0;
}
#kl_wrapper_3.kl_colored_headings.home #kl_banner #kl_description {
  padding: var(--s-1) 0;  
}
/* Banner Image */
#kl_wrapper_3.kl_colored_headings #kl_banner_image {
  position: relative;
  z-index: 1;
  top: -2px;
  border-bottom-right-radius: var(--radius-2);
  border-bottom-left-radius: var(--radius-2);
  margin-bottom: -1px;
}
/* Navigation (copy of default component*/
#kl_wrapper_3.kl_colored_headings #kl_navigation {
  position: relative;
  z-index: 2;
  top: -.2rem;
  border-bottom-right-radius: var(--radius-3);
  border-bottom-left-radius: var(--radius-3);
  padding-left: 0;
  padding-right: 0;
}
#kl_wrapper_3.kl_colored_headings #kl_navigation ul,
#kl_wrapper_3.kl_colored_headings #kl_navigation ul.kl_nav_list_1 {
  background: var(--dt-color-primary);
  margin: 0;
  padding-bottom: var(--s-2-5) !important;
  padding-right: var(--s-2-5) !important;
}
#kl_wrapper_3.kl_colored_headings #kl_navigation li a,
#kl_wrapper_3.kl_colored_headings #kl_navigation li a:visited {
  display:block;
  border: none;
  text-decoration: none;
  padding: var(--s-0-5) var(--s-0-5) var(--s-0-5) var(--s-1);
  margin: var(--s-2-5) 0 0 var(--s-2-5);
  box-shadow: inset 0 0 3px #999;
  border-radius: var(--radius-2);
  background: var( --dt-color-secondary);
  color: var(--dt-color-secondary-contrast);
}
#kl_wrapper_3.kl_colored_headings #kl_navigation i {
  color: #fff;
  border-bottom-width: 0;
  border-radius: var(--radius-2);
  padding: var(--s-1-5) 0 var(--s-1);
  margin-right: var(--s-1);
  width: var(--s-6);
  background: none;
}
/* H3 Text */
#kl_wrapper_3.kl_colored_headings h3,
#kl_wrapper_3.kl_colored_headings >div>h3:not(.ui-state-default) {
    /* !important overrides of default dt .kl_colored_headings theme */
  border-top: 0px solid transparent !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  background:none !important;
  display: inline-block !important;
  font-size: var(--text-xl) !important;
  font-weight: bold !important;
  color: #000 !important;
  border-bottom: 2px solid var(--dt-color-primary) !important;
  margin: var(--s-7) 0 var(--s-3) 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
    font-family: "Lato Extended","Lato","Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
/* H3 Icon */
#kl_wrapper_3.kl_colored_headings h3 i,
#kl_wrapper_3.kl_colored_headings >div>h3:not(.ui-state-default) i,
#kl_wrapper_3.kl_colored_headings #kl_modules h3:not(.ui-state-default) i {
  /* !important overrides of default dt .kl_colored_headings theme */
  background: var(--dt-color-primary) !important;
  margin-right: var(--s-2) !important;
  border-top-left-radius: var(--radius-2) !important;
  border-top-right-radius: var(--radius-2) !important;
  color: var(--dt-color-primary-contrast) !important;
  border-bottom: none !important;
  position: relative !important;
  top: 1px !important;
  left: 0 !important;
  display: inline-block !important;
  height: var(--s-9) !important;
  width: var(--s-9) !important;
  line-height: var(--s-9) !important;
  text-align: center !important;
  font-size: var(--text-md) !important;
}
/* === H4 === */
#kl_wrapper_3.kl_colored_headings h4 {
  /* DT resets */
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  min-height: 0;

  margin: var(--s-4) 0 var(--s-4) 0;
  font-size: var(--text-lg);
  font-weight:bold;
}
/* H4 w/ Icon */
#kl_wrapper_3.kl_colored_headings h4 i {
    border-bottom: none;
    position: relative;
    display: inline-block;
    margin-right: var(--s-2);
    border-radius: var(--radius-2);
    background: var( --dt-color-secondary);
    color: var(--dt-color-secondary-contrast);
    font-size: var(--text-md);
    height: var(--s-8);
    width: var(--s-8);
    line-height: var(--s-8);
    text-align: center;
    top: -5px;
}
/* Callouts */
#kl_wrapper_3.kl_colored_headings>div .kl_message_block .kl_message_heading, 
.kl_message_block.kl_colored_headings .kl_message_heading {
  margin: 0 !important;
  border: none !important;
}
#kl_wrapper_3.kl_colored_headings #kl_modules h3:not(.ui-state-default) i, 
#kl_wrapper_3.kl_colored_headings h3 i {
  top: -2px!important;
  border-bottom: none!important;
  border-radius: var(--radius-2)!important;
}
/***** BC Basic Blue *****/
#kl_wrapper_3.kl_colored_headings.variation_2 {
--dt-color-primary: #003957;
--dt-color-secondary:#234673;
--dt-color-accent: #0d5e93; 
--dt-color-primary-dark-text: #003957;
}
#kl_wrapper_3.kl_colored_headings_box_left.variation_2 #kl_banner .kl_subtitle, 
#kl_wrapper_3.kl_colored_headings.variation_2 #kl_banner .kl_subtitle {
  background-color: inherit !important;
  color: #fff !important  ;
}
/***** BC Basic White *****/
#kl_wrapper_3.kl_colored_headings.variation_white {
--dt-color-primary: #555;
--dt-color-secondary: #FFF;
--dt-color-accent: #000;
--dt-color-primary-dark-text: #000;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #000;
--dt-neutral-dark: #555;
--dt-neutral-medium: #ddd;
--dt-neutral-light: #eee;

--navigation-visibility: block; 

/* Banner Background */
--home-banner-bg: var(--dt-color-secondary);

/* Module Banner */
--module-banner-bg: var(--dt-color-secondary);

}
#kl_wrapper_3.kl_colored_headings.variation_white #kl_banner {
  padding-left: 0 !important;
  box-shadow: none;
}
#kl_wrapper_3.kl_colored_headings.variation_white #kl_banner,
#kl_wrapper_3.kl_colored_headings.variation_white #kl_banner #kl_banner_right,
#kl_wrapper_3.kl_colored_headings.variation_white #kl_banner #kl_banner_left,
#kl_wrapper_3.kl_colored_headings.variation_white #kl_banner .kl_subtitle {
  color: var(--dt-color-secondary-contrast) !important;
}
#kl_wrapper_3.kl_colored_headings.variation_white #kl_banner #kl_banner_left {
  padding:0;
}
#kl_wrapper_3.kl_colored_headings.variation_white #kl_modules h3:not(.ui-state-default) i, 
#kl_wrapper_3.kl_colored_headings.variation_white h3 i, 
#kl_wrapper_3.kl_colored_headings.variation_white>div>h3:not(.ui-state-default) i {
  color: var(--dt-color-primary-contrast) !important;
}
#kl_wrapper_3.kl_colored_headings.variation_white #kl_navigation li a, 
#kl_wrapper_3.kl_colored_headings.variation_white #kl_navigation li a:visited {
  background: var(--dt-color-primary);
}
/***** BC Basic Orange *****/
#kl_wrapper_3.kl_colored_headings.variation_orange {
--dt-color-primary: #A95A13;
--dt-color-secondary:#000;
--dt-color-accent: #A95A13; 
--dt-color-primary-dark-text: #A95A13; 
}
/***** BC Basic Yellow *****/
#kl_wrapper_3.kl_colored_headings.variation_yellow {
--dt-color-primary: #f6cd4c;
--dt-color-secondary:#000;
--dt-color-accent: #f6cd4c; 
--dt-color-primary-contrast: #000;
--dt-color-secondary-contrast: #000;
--dt-color-primary-dark-text: #f6cd4c; /* should have accessible contrast on white background */
}
/* SFL tweak until we update theme */
#kl_wrapper_3.kl_colored_headings #kl_banner h2 > a {
  order: 1;
  color: #fff;
}
/*****  CSOM General *****/
#kl_wrapper_3.kl_csom_general {
  
/* Base Colors */
--dt-color-primary: #5B1415;
--dt-color-secondary: #524543;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--dt-color-primary-dark-text: #5B1415;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--gradient-bg-1), var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/csom/csom-general-bg-1.jpg') no-repeat left 50%;
 
/* Homepage Logo */
 --logo-bg: url('https://cte.bc.edu/canvas/themes/csom/csom-logo-gold.png') no-repeat left center;

/* Module Banner Background */
 --module-banner-bg: var(--dt-color-primary);
 
 /* Course Title - General */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-ltr-sp: 1px;
--course-title-text-shadow: var(--text-shadow-1);

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_csom_general.home #kl_banner #kl_description {
  text-transform: uppercase;
}
/*****  CSOM BUSINESS WRITING THEME  *****/
/* === Theme Notes ===
@banner-style: non-standard
This theme is only used for Rita Owens's courses
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_csom {

/* Base Colors */
  --dt-color-primary: #0d5e93;
   --dt-color-secondary: #234673;
  --dt-color-accent: #666;
  --dt-neutral-dark: #666;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #ccc;

/* Accessible Color Contrast */
 --dt-color-primary-dark-text: #666;
  --dt-color-primary-contrast: #fff;
  --dt-color-secondary-contrast: #fff;

/* Banner Background */
  --home-banner-bg: #fff;
 
/* Homepage Logo */
  --logo-bg: #fff url('https://cte.bc.edu/canvas/themes/csom/bc-logo-csom.png') no-repeat left center;

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Adjustments for @banner-style: v2-topbar */
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-10) var(--s-6) var(--s-6)  var(--s-6);

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-6) var(--s-6);
--course-info-bar-bg: none;
--course-info-bar-color: #000;
--course-info-bar-size: var(--text-md);

/*Module Banner */
--module-banner-padding: 0;
--module-banner-bg: none;
--module-h2-bg: #fff url('https://cte.bc.edu/canvas/themes/csom/csom-writing-branding-module.png') no-repeat top .5rem left;  

}
#kl_wrapper_3.kl_csom #kl_banner {
  box-shadow: none;
}
#kl_wrapper_3.kl_csom.home #kl_banner {
  padding: var(--s-1) 0 0 0;
}
#kl_wrapper_3.kl_csom.home #kl_banner:before {
  margin-left:0;
}
#kl_wrapper_3.kl_csom.home #kl_banner h2 {
  display:grid; 
  grid-template-columns: var(--s-52) 1fr;
  grid-template-areas:
  "logo kl_banner_right"
  "logo kl_banner_left";
  color: #000;
  gap: 0;
  border-top: 1px solid #C7CDD1;
  padding: var(--s-5) 0;
}
/* Add background as pseudo element to make it a flex child */
#kl_wrapper_3.kl_csom.home #kl_banner h2:before {
  grid-area: logo;
  content:'';
  background:#fff url('https://cte.bc.edu/canvas/themes/csom/csom-writing-branding.png') no-repeat center left;
  background-size: contain;
  width: 100%;
  max-width: 200px;
  min-height: 200px;
  background-size: contain;
  color: #000;
}
#kl_wrapper_3.kl_csom.home #kl_banner_right {
  grid-area: kl_banner_right;
  align-self: self-end;
  margin-left:0;
  line-height:1.1;
  font-size: var(--text-3xl);
  padding: var(--s-0) 0 var(--s-5) var(--s-6);
  box-sizing: border-box;
  color: #222;
}
#kl_wrapper_3.kl_csom.home #kl_banner_left {
  grid-area: kl_banner_left;
  align-self: self-start;
  padding-bottom: 0;
  margin-left:0;

  bottom:0;
  left:0;
  margin-top:0 !important;
}
/* Hide Subtitle + Logo to Description */
#kl_wrapper_3.kl_csom.home #kl_banner .kl_subtitle {
  display: none;
}
#kl_wrapper_3.kl_csom.home #kl_description {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
/* Module banner */
#kl_wrapper_3.kl_csom #kl_banner h2 {
  color: #000;
  gap:0;
  min-height: var(--s-20);
  background-size: var(--s-16);
}
#kl_wrapper_3.kl_csom:not(.home) #kl_banner_right {
  margin-left: var(--s-16);
  padding: var(--s-0) var(--s-5);
  width: 100%; /* field is stacked*/
  line-height: 1.1;
  color: #222;
}
#kl_wrapper_3.kl_csom:not(.home) #kl_banner_left {
  align-self: self-start;
  background-color: #fff;
  margin: 0 var(--s-4) 0 var(--s-16);
  padding: var(--s-0) var(--s-5);
  font-weight:normal;
  color: #000;
}
#kl_wrapper_3.kl_csom #kl_banner .kl_subtitle {
  display: none;
}
#kl_wrapper_3.kl_csom:not(.home) #kl_description {
  order: -1;
  width: 100%;
  padding: var(--s-1) 0;
  margin: var(--s-3) 0 var(--s-3) 0;
  border-bottom: 1px solid #C7CDD1;
  color:#000;
  font-size: var(--text-sm);
  text-transform: uppercase;
}
/* Mobile Styles */
@media screen and (max-width:500px) {

  #kl_wrapper_3.kl_csom.home #kl_banner h2 {
    display:flex; 
    flex-direction: column;
  }

  #kl_wrapper_3.kl_csom.home #kl_banner_right {
    align-self:auto; 
    padding: var(--s-4) var(--s-2);
  }

  #kl_wrapper_3.kl_csom.home #kl_banner_left {
    align-self:auto; 
    position:static;
    margin:0 !important;
    width:auto;
  }
}
/***** Doctorate of Nursing  *****/
/* === Theme Notes ===
@banner-style: v2-topbar 
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_dnp {

/* Base Colors */
--dt-color-primary: #003856;
--dt-color-secondary: #edefef;
--dt-color-accent: #9EB3BF;
--dt-neutral-dark: #524543;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;
--bs-link-color: #003856;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #000;

/* Home Banner  */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
--home-h2-bg:#fff url('https://cte.bc.edu/canvas/themes/dnp/dnp-background-4.png') no-repeat right top;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-12) var(--s-6) var(--s-8) var(--s-6);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/dnp/bc-cson-logo-white.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Banner Font-Family */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* @info-bar  */
--course-info-bar-padding: var(--s-1) var(--s-6) var(--s-6) var(--s-12);
--course-info-bar-bg: var( --dt-color-secondary);
--course-info-bar-color: #000;

/* Field Positions*/
--home-description-position: auto; /* field is position to the right inline */
--home-subitle-position: auto; /* field is position to the right inline */

/*Module Banner */
--module-banner-padding: 0;
--module-banner-bg: var(--dt-color-primary);
--module-h2-bg: #fff url('https://cte.bc.edu/canvas/themes/dnp/dpn-background-interior.png') no-repeat right top;
}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_dnp #kl_banner {
  border: 1px solid #979797;
}
#kl_wrapper_3.kl_dnp #kl_banner h2 {
  color: var(--dt-color-secondary-contrast) !important;
  background-size: contain;
}
#kl_wrapper_3.kl_dnp.home  #kl_banner_right {
  font-weight: 900;
  color: #333;
  text-shadow: none;
}
/* Logo to Description */
#kl_wrapper_3.kl_dnp.home #kl_description {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
#kl_wrapper_3.kl_dnp.home #kl_banner .kl_subtitle {
  align-self: center;
  /* show subitle field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  text-transform:uppercase;
  padding-right: var(--s-6);
}
/* Module banner */
#kl_wrapper_3.kl_dnp:not(.home) #kl_banner  {
  padding:0;
}
#kl_wrapper_3.kl_dnp:not(.home)  #kl_banner_right {
  padding: var(--s-6) var(--s-4);
  font-weight: bold;
  color: #333;
}
#kl_wrapper_3.kl_dnp:not(.home)  #kl_banner_left{
  color: #000;
}
#kl_wrapper_3.kl_dnp #kl_description {
  background: var( --dt-color-secondary);
  color: var(--dt-color-secondary-contrast) !important;
  padding: var(--s-1) var(--s-4);
  margin-top: 0; /* clearing defaults to fit in bottom bar style */
}
#kl_wrapper_3.kl_dnp:not(.home) .kl_subtitle {
  margin-bottom:0; /* clearing defaults to fit in narrow top bar style */
  padding-top: var(--s-0-5); /* clearing defaults to fit in narrow top bar style */
  padding-left: var(--s-6);
}
/*****   GLOBAL PERSPECTIVES PROGRAM THEME  *****/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_global_perspectives {

/* Base Colors */
    --dp-color-primary: #801D16;
    --dp-color-secondary: #501315;
    --dp-color-accent: #b30000;
    --dp-neutral-dark: #555;
    --dp-neutral-medium: #656565;
    --dp-neutral-light: #ccc;

/* Accessible Color Contrast */ 
    --dp-color-primary-dark-text: #501315;
    --dp-color-primary-contrast: #fff;
    --dp-contrast-on-secondary: #fff;

/* Banner Background */
--home-banner-bg: var(--gradient-bg-1), url('https://cte.bc.edu/canvas/themes/global-perspectives/gp-banner.jpg') no-repeat left top;
 
/* Homepage Logo */
 --logo-bg: none;

 /*Module Banner Background */
 --module-banner-bg: var(--dp-color-primary);
}
/* === Custom Theme Styles === */
/* Banner height */
#kl_wrapper_3.kl_global_perspectives.home #kl_banner {
    justify-content: center;
    align-items:center;
    gap:.5rem;
    background-size: cover;
    padding-block-start: 3rem;
    padding-bottom: 0;
    min-height: 195px;
    position:relative;
    border-top: 10px solid var( --dp-color-secondary);
}
#kl_wrapper_3.kl_global_perspectives.home #kl_banner h2 {
    justify-content: center;
    text-align:center;
    font-size: var(--text-3xl);
    text-shadow: 0 2px 0 rgb(0 0 0 / 50%);
    margin-right: 160px;
}
/* Hide Logo */
#kl_wrapper_3.kl_global_perspectives.home #kl_banner:before {
    content:none;
}
#kl_wrapper_3.kl_global_perspectives.home #kl_banner #kl_banner_left {
    background: var(--dp-color-primary) url('https://cte.bc.edu/canvas/themes/global-perspectives/gp-program.png') no-repeat center center;
    background-size: contain;
    padding: 0;
    position: absolute;
    right: 3rem;
    top: 1.25rem;
    width: 170px;
    height: 100%;
    left: auto; 
}
/* Visually Hide Subtitle Field Text */
#kl_wrapper_3.kl_global_perspectives.home #kl_banner #kl_banner_left .kl_mod_text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0 var(--s-6);
    position: absolute;
}
#kl_wrapper_3.kl_global_perspectives.home .kl_subtitle {
    /* show subitle field */
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path:none;
    white-space: normal;
        
    margin-right: 160px;
    width:auto;
    border-radius: var(--radius-1);
    background-color: rgba(0, 0, 0, 0.5);
    padding:0 var(--s-2);
    align-self:flex-end;

}
/* Field not used on homepage */
#kl_wrapper_3.kl_global_perspectives.home #kl_description {
    display:none;
}
/* Module banner Description and Subtitle position (Non-Standard)*/
#kl_wrapper_3.kl_global_perspectives:not(.home) #kl_description {
    order: -1;
    margin-top: 0; /* clearing defaults to fit in bottom bar style */
    Text-transform: uppercase;
}
#kl_wrapper_3.kl_global_perspectives:not(.home) .kl_subtitle {
    order: 1;
    margin-bottom:0; /* clearing defaults to fit in narrow top bar style */
    text-transform: none    ;
    }
/* Mobile Styles */
@media screen and (max-width:500px) {

    #kl_wrapper_3.kl_global_perspectives.home #kl_banner h2,
    #kl_wrapper_3.kl_global_perspectives.home .kl_subtitle {
        margin-right: 0;
    }

    #kl_wrapper_3.kl_global_perspectives.home #kl_banner #kl_banner_left {
        position: static;
    }
  
  }
/***** MHA Theme - V2 *****/
/* === Theme Notes ===
@banner-style: v2-topbar 
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_healthcare_admin {

/* Base Colors */
--dt-color-primary: #445976;
 --dt-color-secondary: #ddd;
--dt-color-accent: #749CD3;
--dt-neutral-dark: #524543;
--dt-neutral-medium: #656565;
--dt-neutral-light: #F6FAFF;
 --bs-link-color: #445976;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #000;

/* Home Banner */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
--home-h2-bg: var(--dt-neutral-light) url('https://cte.bc.edu/canvas/themes/mha/mha-home-bg.png') no-repeat 88% 0;
--home-banner-gap: var(--s-3);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-10) var(--s-6) var(--s-10) var(--s-6);

/* Banner Font */
--banner-font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/mha/mha-bc-logo.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Field Positions */
--home-description-position: auto; /* field is position to the right inline */

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: var(--s-1) var(--s-6) var(--s-6) var(--s-12);
--course-info-bar-bg: var( --dt-color-secondary);

/* Module Banner */
--module-banner-padding: 0 ;
--module-banner-bg: var(--dt-color-primary);
--module-h2-bg: #fff url('https://cte.bc.edu/canvas/themes/mha/mha-module-bg.png') no-repeat right center;

}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_healthcare_admin #kl_banner h2 {
  background-size: contain;
  min-height: 90px;
}
#kl_wrapper_3.kl_healthcare_admin #kl_banner_right {
  padding-left: var(--s-6);
}
#kl_wrapper_3.kl_healthcare_admin #kl_banner_right, 
#kl_wrapper_3.kl_healthcare_admin #kl_banner_left{
  color: var(--dt-color-secondary-contrast) !important;
  text-shadow: none;
}
/* Hide Description - Used for Logo in past versions */
#kl_wrapper_3.kl_healthcare_admin.home #kl_description {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
#kl_wrapper_3.kl_healthcare_admin.home #kl_banner .kl_subtitle {
  /* show subitle field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  padding: var(--s-1) var(--s-5);
  align-self:flex-end; /* align to the bottom */
}
#kl_wrapper_3.kl_healthcare_admin:not(.home) #kl_banner  {
  padding:0;
}
/* Banner left background */
#kl_wrapper_3.kl_healthcare_admin:not(.home) #kl_banner_left {
  padding: var(--s-5) var(--s-6);
}
#kl_wrapper_3.kl_healthcare_admin:not(.home) .kl_subtitle {
  margin-bottom:0; /* clearing defaults to fit in narrow top bar style */
  padding-top: var(--s-0-5); /* clearing defaults to fit in narrow top bar style */
  padding-left: var(--s-6);
}
#kl_wrapper_3.kl_healthcare_admin:not(.home) #kl_description {
  background: var( --dt-color-secondary);
  color: var(--dt-color-secondary-contrast) !important;
  padding: var(--s-1) var(--s-6);
  margin-top: 0; /* clearing defaults to fit in bottom bar style */
}
/***** Higher Education Doctorate Theme *****/
/* === Theme Notes ===w
@banner-style: v2-topbar 
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_higher_ed_doc {

/* Base Colors */
  --dt-color-primary: #8A100B;
   --dt-color-secondary: #524543;
  --dt-color-accent: #8a100b;
  --dt-neutral-dark: #524543;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #ccc;

/* Accessible Color Contrast */
 --dt-color-primary-dark-text: #501315;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
--home-h2-bg:var(--gradient-bg-1), url('https://cte.bc.edu/canvas/themes/higher-ed-doctorate/higher-ed-doc-bg.jpg') no-repeat right top;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-10) var(--s-6) var(--s-6)  var(--s-6);

/* Course Title - General */
--course-title-size: var(--text-4xl);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/higher-ed-doctorate/bc-logo-lsoe.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Field Position */
--home-description-position: auto; /* field aligns to the right */

/* Home Description Padding */ 
--home-description-padding: 0 var(--s-5); 

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

}
/* === Custom Theme Styles === */
/* Logo to Description */
#kl_wrapper_3.kl_higher_ed_doc.home #kl_description {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
#kl_wrapper_3.kl_higher_ed_doc.home #kl_banner .kl_subtitle {
  /* show subitle field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  width: var(--inline-field);
  display: flex;
  align-items: center;
  color: #CAB57E;
  font-family: Georgia, 'Times New Roman', Times, serif; 
  font-size: var(--text-base);
  align-self:flex-end; /* align to the bottom */
  margin-bottom: var(--s-1);
  padding-right: var(--s-5); 
}
/*********************************************************************/
/*****   HIGHER ED LEADERSHIP PROGRAM THEME  *************************/
/* @banner-style: v2-topbar*/
#kl_wrapper_3.kl_higher_ed_leadership {

/* Theme Colors */
  --dt-color-primary: #2A4B44;
   --dt-color-secondary: #182C28;
  --dt-color-accent: #501315;
 --dt-color-primary-dark-text: #294B44;
  /* should have accessible contrast on white background */
  --dt-color-primary-contrast: #fff;
  /* should have accessible contrast over primary color */
  --dt-color-secondary-contrast: #fff;
  /* should have accessible contrast over secondary color */
  --dt-neutral-dark: #555;
  --dt-neutral-medium: #656565;
  /* should have accessible contrast on white background */
  --dt-neutral-light: #ccc;

/* Home Banner  */
--home-banner-bg: var(--dt-color-primary); 
--logo-bg: url('https://cte.bc.edu/canvas/themes/higher-ed-leadership/bc-logo-updated.png') no-repeat left center;


/* Module Banner */
--module-banner-padding: 0 var(--s-6) 0 var(--s-6);
--module-banner-bg: var(--dt-color-primary);
  
}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_higher_ed_leadership.home #kl_banner {
  position:relative;
}
#kl_wrapper_3.kl_higher_ed_leadership.home #kl_banner:before {
  order:1;
  max-width: 140px;
  position:absolute;
  bottom:1rem;
  right:0;
}
#kl_wrapper_3.kl_higher_ed_leadership #kl_description {
  color: #eee;
  order: -2;
  text-transform: uppercase;
  margin-top: calc(var(--s-5) * -1);
  font-size: var(--text-xsm);
  background: var( --dt-color-secondary);
  padding: var(--s-1) var(--s-6);
  width: 100%;
}
#kl_wrapper_3.kl_higher_ed_leadership.home #kl_description {
  /* account for header padding */
  position: relative;
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12)*-1) !important;
}
#kl_wrapper_3.kl_higher_ed_leadership.home .kl_subtitle {
  /* show subitle field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;  

  background: var(--dt-color-accent);
  padding: var(--s-1) var(--s-3);
  border-radius: 2px;
  order:1;
  font-size: var(--text-base);
}
/* Hidding unused fields for this theme */
#kl_wrapper_3.kl_higher_ed_leadership.home #kl_banner_left {
    display:none;
}
/* Module banner Description and Subtitle position */
#kl_wrapper_3.kl_higher_ed_leadership:not(.home) #kl_description {
  order: -1;
  margin-top: 0; /* clearing defaults to fit in bottom bar style */
  /* account for header padding */
  position: relative;
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12)*-1) !important;
}
#kl_wrapper_3.kl_higher_ed_leadership:not(.home) .kl_subtitle {
order: 1;
  margin-bottom:0; /* clearing defaults to fit in narrow top bar style */
  padding: 0 var(--s-5) var(--s-4) 0;
}
/***** IHE INTERNATIONAL HIGHER ED PROGRAM THEME *****/
/* === Theme Notes ===
@banner-style: 
*/
/* === Core Theme Settings === */
/* Theme Colors */
#kl_wrapper_3.kl_ihe {
--dt-color-primary: #56060F;
--dt-color-secondary: #6C2A29;
--dt-color-accent: #b30000; 
--dt-color-primary-dark-text: #56060F; /* should have accessible contrast on white background */

/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/ihe/ihe-banner.jpg') no-repeat center top; /* switching background image to just h2 content */

/* Logo */
--logo-visibility: none; /* Logo hidden */

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/ihe/ihe-banner.jpg') no-repeat center top;
--module-bg-size: cover; 

/* Field Positions */
--home-description-position: var(--inline-field);
}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_ihe.home #kl_banner {
  padding: var(--s-4) 0 0 0;
}
/* Hide logo */
#kl_wrapper_3.kl_ihe #kl_banner::before {
  content:none;
}
#kl_wrapper_3.kl_ihe.home #kl_banner h2 {
  justify-content: center;
  gap:0;
}
#kl_wrapper_3.kl_ihe #kl_banner_right {
  font-variant: small-caps; 
}
#kl_wrapper_3.kl_ihe.home #kl_banner_right {
  text-align:center;
  padding: var(--s-4) var(--s-5) var(--s-4)  var(--s-5);
}
#kl_wrapper_3.kl_ihe.home #kl_banner_left {
  background: none;
  padding: var(--s-1) var(--s-6) var(--s-4) var(--s-6);
  text-align:center;
}
#kl_wrapper_3.kl_ihe.home .kl_subtitle {
  /* Show hidden field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  color: #eee;
  order: -4;
  text-transform: uppercase;
  font-size: var(--text-xsm);
  background: #222;
  padding: var(--s-1) var(--s-6);
  text-align:center;

  position: relative;
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12)*-1) !important;
  margin-top: calc(var(--s-5) * -1);
  padding: var(--s-2) var(--s-6) var(--s-1) var(--s-6);
}
#kl_wrapper_3.kl_ihe.home #kl_description {
  display:none;
}
#kl_wrapper_3.kl_ihe .kl_subtitle {
  color: #eee;
  order: -4;
  text-transform: uppercase;
  font-size: var(--text-xsm);
  background: #222;
  padding: var(--s-1) var(--s-6);

  position: relative;
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12)*-1) !important;
  margin-top: calc(var(--s-3) * -1);
  padding: var(--s-1) var(--s-6);
}
/*#region ***** Law School Theme ******************************** */
#kl_wrapper_3.kl_law {

/* Base Colors */
  --dt-color-primary: #5B1415;
  --dt-color-secondary: #8a100b;
  --dt-color-accent:#8a100b;
  --dt-neutral-dark: #555;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #ccc;

/* Accessible Color Contrast */
  --dt-color-primary-dark-text: #5B1415;
  --dt-color-primary-contrast: #fff;
  --dt-color-secondary-contrast: #fff;
  
/* Banner */
 --home-banner-bg: var(--gradient-bg-1), url('https://cte.bc.edu/canvas/themes/law/law-home-bg.jpg') no-repeat left center;
 --course-title-style: uppercase;
 
/* Homepage Logo */
 --logo-bg: url('https://cte.bc.edu/canvas/themes/law/law-bc-logo.png') no-repeat left center;
 --logo-padding: 0 var(--s-4) 0 0;

 --homepage-title-padding: var(--s-7) var(--s-10) var(--s-7) 0;


/*Module Banner Background */
 --module-banner-bg: var(--dt-color-primary);
 --module-course-title-style: uppercase;
}
#kl_wrapper_3.kl_law.law-v2 {
--home-banner-bg: var(--gradient-bg-3), url('/assets/law/law-banner-2.jpg') no-repeat left top;

}
/***** Master of Science in Applied Analytics (MSAA) Theme  *****/
/* === Theme Notes ===
@banner-style: v1-full-bg
@info-bar: v1-primary-bg
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_msaa {

/* Base Colors */
--dt-color-primary: #5B1415;
 --dt-color-secondary: #8A100B;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;
--bs-link-color: #5B1415;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/msaa/msaa-bg.png') no-repeat center top;
   
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/msaa/bc-logo.png') no-repeat left center;

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary);
}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_msaa.home #kl_banner {
  justify-content: flex-start;
}
#kl_wrapper_3.kl_msaa.home #kl_banner:before {
  width: 168px;
  margin-right: var(--s-3);
}
#kl_wrapper_3.kl_msaa.home .kl_subtitle {
  /* show subitle field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  display: flex;
  font-size: var(--text-md);
  line-height: 1.3;
  text-transform: uppercase;
  padding: 0 0 0 var(--s-5);
  border-left: 1px solid #fff;
  width: 28ch;
  color: #fff;
  min-height: 40px;
  align-items: center;
  letter-spacing: 1px;
}
#kl_wrapper_3.kl_msaa.home #kl_description {
  /* hide field text if present */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0 var(--s-7);
  position: absolute;
}
@media screen and (max-width:520px) {
  
  #kl_wrapper_3.kl_msaa.home #kl_banner {
    justify-content: center !important;
  }

  #kl_wrapper_3.kl_msaa.home .kl_subtitle {
    border-left:none !important;
    width: auto !important;
  }
  
}
/***** Master of Science in Leadership Administration (MSLA) Theme  *****/
/* === Theme Notes ===
@banner-style: v1-full-bg
@info-bar: v1-transparent
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_msla {

/* Base Colors */
--dt-color-primary: #8A100B;
 --dt-color-secondary: #5B1415;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;
 --bs-link-color: #8A100B;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/msla/msla-banner-home.jpg') no-repeat right bottom;
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/msla/woods-logo.png') no-repeat left center;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/msla/msla-banner-module.jpg') no-repeat right top;
 
}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_msla.home #kl_banner #kl_description {
  text-transform: uppercase;
  font-size: var(--text-md);
  font-weight:bold;
  letter-spacing: 1px;
}
/***** Masters of Sports Science Administration  *****/
/* === Theme Notes ===
@banner-style: v1-full-bg
@info-bar: v1-primary-bg 
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_mssa {

/* Base Colors */
--dt-color-primary: #8A100B;
--dt-color-secondary: #D3CBB3;
--dt-color-accent: #8a100b;
--bs-link-color: #8A100B;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #000;

/* Banner */
--home-banner-bg: var(--dt-color-primary);  
--home-banner-gap: 0;
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/mssa/mssa-logo.png') no-repeat left top;
--logo-padding: 0 var(--s-4) 0 0;

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/mssa/mssa-logo.png') no-repeat var(--s-5) var(--s-4);

/* Course Title - General */
--course-title-text-shadow: var(--text-shadow-1);
  
/* Homepage Course Title */
--homepage-title-padding: var(--s-8) var(--s-6) var(--s-4) 0;

/* @info-bar: v1-primary-bg */
--course-info-bar-bg: var( --dt-color-secondary);

}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_mssa.home #kl_banner:before {
  min-height: 90px;
  position:absolute;
}
#kl_wrapper_3.kl_msaa:not(.home) #kl_banner:before {
  min-height: 50px;
  margin-right: var(--s-3);
}
#kl_wrapper_3.kl_mssa.home #kl_description {
  order:-2;
  padding-left: var(--s-28);
  font-size: var(--text-md);
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  margin-top: var(--s-5);
  text-shadow: var(--text-shadow-1);
}
#kl_wrapper_3.kl_mssa.home .kl_subtitle {
  /* show subtitle field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  padding-left: var(--s-28);
  font-size: 1.21rem;
  letter-spacing: 1px;
  text-shadow: var(--text-shadow-1);
}
#kl_wrapper_3.kl_mssa.home #kl_banner_left {
  color: var(--dt-color-secondary-contrast);
}
/* Module banner */
#kl_wrapper_3.kl_mssa:not(.home) #kl_banner {
  background-size: 60px 60px;
  padding-left: var(--s-24)!important;
  min-height: 90px;
}
/* Mobile Styles */
@media screen and (max-width:500px) {

  #kl_wrapper_3.kl_mssa.home #kl_description {
    margin-top: var(--s-28);
    padding-left: 0;
  }

  #kl_wrapper_3.kl_mssa.home .kl_subtitle {
    padding-left:0;
  }

}
/***** NURSING-NANDA PROGRAM THEME *****/
/* === Theme Notes ===
@banner-style: non-standard
@h3header-style: line-behind
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_nursing_nanda {

/* Base Colors */
--dt-color-primary: #8f2343;
--dt-color-secondary: #395c6e;
--dt-color-accent: #501315;
--dt-neutral-dark: #9c8c7f;
--dt-neutral-medium: #bfb3a9;
--dt-neutral-light: #e6e1de;    

/* Accessible Color Contrast */
--bs-link-color: #8f2343;

/* Home Banner */
--home-banner-bg: #fff;
--home-banner-padding: var(--s-5) 0;

/* Homepage Logo */
--logo-bg: #fff url('https://bcweb.bc.edu/canvas/cte/canvas/themes/nursing-nanda/nanda-logo.jpg') no-repeat left center;
  
/*Module Banner Background */
--module-banner-bg: #fff;
--module-banner-padding: var(--s-4) 0;

/* Banner Font-Family */
--banner-font-family: rockwell, "arvo", "Lato", sans-serif; 

/* Course Title - General */
--course-title-text-shadow: var(--text-shadow-1);

/* Hide Navigation Block */
--navigation-visibility: none; 

/* Hide Banner Image Block */
--banner-image-visibility: none; 
}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_nursing_nanda #kl_banner {
    box-shadow:none;
    gap: var(--home-banner-gap);
}
#kl_wrapper_3.kl_nursing_nanda #kl_banner:before {
    content:'';
    background: var(--logo-bg);
    background-size: contain;
    max-width: 260px;
    min-height: 90px;
    order: -3;
    width: 100%;
    margin-left: 0;
    margin-right: var(--s-5);
}
/* Matching Home Banner */
#kl_wrapper_3.kl_nursing_nanda #kl_banner:after {
    content: "";
    background: url('https://bcweb.bc.edu/canvas/cte/canvas/themes/nursing-nanda/bclogo.png') no-repeat left center;
    width: 100%;
    max-width: 300px;
    min-height: 90px;
    background-size: contain; 
    order: -1;
}
#kl_wrapper_3.kl_nursing_nanda #kl_banner h2 {
    gap:0;
}
/* Custom course title style */
#kl_wrapper_3.kl_nursing_nanda #kl_banner_right {
    font-size: var(--text-xl);
    background: var(--dt-color-primary);
    color: #fff;
    font-weight: normal;
    letter-spacing: 1px;
    width:100%;
    padding: var(--s-4) var(--s-4) var(--s-2) var(--s-4);
    border-radius: var(--radius-2);
}
/* Hiding unused fields for this theme */
#kl_wrapper_3.kl_nursing_nanda #kl_description,
#kl_wrapper_3.kl_nursing_nanda .kl_subtitle,
#kl_wrapper_3.kl_nursing_nanda #kl_banner_left {
    display:none !important
}
/*#region ***** Pine Manor Theme ******************************** */
#kl_wrapper_3.kl_pine_manor {

/* Base Colors */
  --dt-color-primary: #10582C;
   --dt-color-secondary: #333;
  --dt-color-accent: #10582C;
  --dt-neutral-dark: #555;
  --dt-neutral-medium: #656565;
  --dt-neutral-light: #ccc;

/* Accessible Color Contrast */
 --dt-color-primary-dark-text: #10582C;
  --dt-color-primary-contrast: #fff;
  --dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--gradient-bg-2), url('https://cte.bc.edu/canvas/themes/pinemanor/pine-manor-bg.jpg') no-repeat left top;
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/pinemanor/pmc-logo.png') no-repeat left center;

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* Course info Bar  */
--course-info-bar-bg:  var(--dt-color-primary);

}
#kl_wrapper_3.kl_pine_manor.home #kl_banner:before, 
.dp-wrapper.kl_pine_manor.home .dp-header:before {
  min-height: 70px;
  background-position-x: -13px;
}
/***** School Counseling Theme *****/
/* === Theme Notes ===
@banner-style: v2-topbar
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_school_counseling {

/* Theme Colors */
--dt-color-primary: #c23148;
--dt-color-secondary: #524543;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #524543;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;
--dt-color-primary-dark-text: #501315;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */
--course-title-size: var(--text-2xl);

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/school-counseling/lsoe-branding.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* Adjustments for @banner-style: v2-topbar */
--home-h2-bg:#EDEDED url('https://cte.bc.edu/canvas/themes/school-counseling/school-counseling-bg.png') no-repeat right top;
--home-banner-padding: var(--s-5) 0 0 0;
--home-banner-gap: var(--s-4);
--homepage-title-padding: var(--s-10) var(--s-6) var(--s-6)  var(--s-6);

/* Homepage Course Info Bar (#kl_banner_left */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-color: #000;

/* Banner Font-Family */
--banner-font-family: Georgia, serif;

/* Field Positions*/
--home-description-position: auto /* field is position to the right inline */

}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_school_counseling.home #kl_banner h2 {
  background-size: contain;
  color: #000;
  min-height: 175px;
}
#kl_wrapper_3.kl_school_counseling.home #kl_banner_right {
  color: #000;
  background: rgba(237,237,237, 0.7);
  max-inline-size: 22ch;
}
/* Logo to Description */
#kl_wrapper_3.kl_school_counseling.home #kl_description {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
#kl_wrapper_3.kl_school_counseling.home #kl_banner .kl_subtitle {
  /* show subitle field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  width: var(--inline-field);
  display: flex;
  align-items: center;
  color: #CAB57E;
  font-family: Georgia, 'Times New Roman', Times, serif; 
  font-size: var(--text-base);
  align-self:flex-end; /* align to the bottom */
  margin-bottom: var(--s-1);

  padding-right: var(--s-6);
}
/***** SFL Theme *****/
/* === Theme Notes ===
@banner-style: V3
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_sfl {

/* Theme Colors */
--dt-color-primary: #234673;
--dt-color-secondary: #003957;
--dt-color-accent: #0d5e93;
--bs-link-color: #003957;

/* Logo */
--logo-visibility: none; /* Logo hidden */

/* Banner Background */
--home-banner-bg: var(--dt-color-primary); 
--home-banner-gap: 0;

/* Homepage Course Title */
--homepage-title-padding: 0 0 var(--s-2) 0;

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

/* Homepage Course Info Bar (#kl_banner_left) */
--course-info-bar-padding: var(--s-3) var(--s-5);
--course-info-bar-bg: none;

/* Show banner image if present (hidden by default in most program themes */
--banner-image-visibility: block; 

/* show navigation block (hidden by default for most program themes) */
--navigation-visibility: block; 

}
#kl_wrapper_3.kl_sfl #kl_banner {
  border-top: 6px solid var( --dt-color-secondary);
}
#kl_wrapper_3.kl_sfl.home #kl_banner {
  gap:0;
  padding-top: var(--s-2);
  padding-bottom: var(--s-3);
}
#kl_wrapper_3.kl_sfl.home h2 {
  gap:0;
}
#kl_wrapper_3.kl_sfl.home #kl_banner_right {
  font-size: var(--text-lg);  
  font-weight:bold;
  text-transform: uppercase;
}
#kl_wrapper_3.kl_sfl.home .kl_subtitle {
  /* Show hidden field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  text-transform: uppercase;
  font-size: var(--md);
  padding: 0 var(--s-5) var(--s-2) 0;
  order:0;
}
#kl_wrapper_3.kl_sfl.home #kl_description {
  order:0;
  display:none;
}
#kl_wrapper_3.kl_sfl #kl_banner #kl_banner_left { 
   order: 1;
   font-size: 1rem;
   padding: var(--s-1) var(--s-2);
   border:1px solid var(--dt-color-primary-contrast);
   background: transparent;
   border-radius: var(--radius-2);
   background: var( --dt-color-secondary);
   letter-spacing: 1px;
   font-weight:normal;
 }
/*#region ***** SSW General and ICHA ******************************** */
#kl_wrapper_3.kl_ssw {

/* Base Colors */
--dt-color-primary: #5B1415;
 --dt-color-secondary: #5B1415;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--bs-link-color: #5B1415;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--gradient-bg-1), url('https://cte.bc.edu/canvas/themes/ssw/ssw-banner-bg.jpg') no-repeat left top;

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/ssw/bc-logo-ssw.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 0;

/* Homepage Course Title */
--course-title-style: uppercase;
--course-title-size: var(--text-2xl);
--course-title-text-shadow: var(--text-shadow-1);

/* Banner Font-Family */
--banner-font-family: var(--open-sans);

/* Module Banner Background */
--module-banner-bg: var(--dt-color-primary);

}
/* === ICHA SUB-THEME === */
#kl_wrapper_3.kl_ssw.icha {
  --home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/ssw/icha-banner-bg.jpg') no-repeat left top;
  --module-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/ssw/icha-module-banner.jpg') no-repeat center top;
}
/* Home / Program Title (field: description) */
#kl_wrapper_3.kl_ssw.home #kl_banner #kl_description {
  font-weight:bold;
  text-transform: uppercase;
  text-shadow: var(--text-shadow-2);
}
/* Module Banner */
#kl_wrapper_3.kl_ssw.icha:not(.home) #kl_banner {
  background-size: cover;
}
#kl_wrapper_3.kl_ssw.icha:not(.home) #kl_banner #kl_banner_left {
  background-color: var(--translucent-bg-5);
}
#kl_wrapper_3.kl_ssw.icha:not(.home) #kl_banner .kl_subtitle {
  background: var(--dt-color-primary);
  padding: var(--s-2) var(--s-5) var(--s-1) var(--s-5);
  margin-bottom:0; /* clearing defaults to fit in narrow top bar style */
  /* account for header padding */
  position: relative;
  top: calc(var(--s-4) * -1); 
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12) * -1) !important;
  margin-bottom: calc(var(--s-1) * -1) !important;
}
/***** STM PROGRAM THEME  *****/
/* === Theme Notes ===
@theme-type: cdil-managed
@banner-style: non-standard
@info-bar: v1-primary
*/
/* === Core Theme Settings === */
#kl_wrapper_3.kl_stm {

/* Base Colors */
--dt-color-primary: #726158;
--dt-color-secondary: #501315;
--dt-color-accent: #501315;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #DFDDCF;

/* Accessible Color Contrast */
--dt-color-primary-dark-text: #501315;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Home Banner */
--home-banner-padding: 0 0 0 0; 

/* Banner Background */
--home-banner-bg: var(--dt-neutral-light);
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/stm/stm-banner.jpg') no-repeat center top;
 
/* Module Banner */
--module-banner-padding: 0 var(--s-6) var(--s-5) var(--s-6);
--module-banner-bg: var(--dt-color-primary);

/* Banner Font */
--banner-font-family: "PT Serif", Georgia, serif; 

}
/* === Custom Theme Styles === */
#kl_wrapper_3.kl_stm.home #kl_banner {
  padding: 0;
  gap: 0;
}
/* Home banner background */
#kl_wrapper_3.kl_stm.home #kl_banner:before {
    background: var(--logo-bg);
    order: -2;
    content:'';
    width: 100%;
    max-width: 100%;
    min-height: 92px;
    background-size: cover;
    margin: var(--s-0) var(--s-0);
  }
/* applying background image to h2 content + setting height */
#kl_wrapper_3.kl_stm.home #kl_banner {
    background-color: var(--dt-neutral-light);
    gap: var(--s-0);
    justify-content: center;
  }
#kl_wrapper_3.kl_stm.home #kl_banner h2  {
  justify-content: center;
}
#kl_wrapper_3.kl_stm.home #kl_banner_right {
  color: var( --dt-color-secondary);
  padding: var(--s-5) var(--s-2) var(--s-5) var(--s-2);
}
/* Switches description to Courseinfo level */
#kl_wrapper_3.kl_stm.home #kl_description {
  order: 0; /* used for course info */
  width: var(--home-description-position);
  background: var(--dt-color-primary);
  padding: var(--s-1) var(--s-6);
  margin-left: var(--s-0);
  text-align: center;
}
/* Unhide Subtitle and add logo */
#kl_wrapper_3.kl_stm.home #kl_banner .kl_subtitle {
  /* show subitle field */
  position: static;
  width: auto;
  height: auto;
  padding: 0 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;
  /* Styles */
  text-indent: -99999em;
  Order: -3;
  background: var(--dt-color-primary) url(https://cte.bc.edu/canvas/themes/stm/BC-Program-Logo.png) no-repeat center 9px;
  background-size: 432px 19px;
  width: 100%;
  height: 35px;
  display: block;
}
/* Hides Banner Left */
#kl_wrapper_3.kl_stm.home #kl_banner_left {
    display: none;
  }
/* Modules Pages */
#kl_wrapper_3.kl_stm:not(.home) #kl_banner {
  background-color: var(--dt-neutral-light);
  color: var( --dt-color-secondary);
  border-top: 5px solid var(--dt-color-primary);
}
#kl_wrapper_3:not(.home).kl_stm #kl_banner_right {
  color: var( --dt-color-secondary);
}
#kl_wrapper_3.kl_stm #kl_description:not(.home) {
  margin-top:0; 
}
#kl_wrapper_3:not(.home).kl_stm .kl_subtitle {
  color: #fff;
  font-weight: normal;
  background-color: #56060F;
  background-color: var(--dt-color-primary);
  order: -1;
  margin: -3px 0 var(--s-3) 0;
  font-size: .8rem;
  /* account for header padding */
  position: relative;
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12) * -1) !important;
  padding: var(--s-1) var(--s-6);
}
#kl_wrapper_3.kl_stm:not(.home) #kl_banner_left {
  color: #000
}
#kl_wrapper_3.kl_stm>div>h3 i, 
#kl_wrapper_3.kl_stm>div>h3:not(.ui-state-default) i {
  background: var( --dt-color-secondary);
}
/* COMPONENT: Icon Progress Bar */
#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_pending .kl_colored_bar {
  background-color: var(--dt-color-primary);
  border-top: 2px solid var(--neutral-dark);
  border-bottom: 2px solid var(--neutral-dark);
}
#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_pending a {
  background: var(--dt-color-primary) !important;
}
#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_pending i {
  color: #fff;
}
#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_complete .kl_colored_bar,
#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_current .kl_colored_bar{
  border: 2px solid var(--dt-color-secondary) !important;
  background: var(--dt-color-secondary) !important;
}
#kl_wrapper_3.kl_stm .kl_progress_icons li.kl_complete a {
  border: 3px solid var(--dt-color-secondary) !important;
  background: var(--dt-color-secondary) !important;
}
/* Mobile Adjustments */
@media screen and (max-width:520px) {

  /* Top Logo */
  #kl_wrapper_3.kl_stm.home #kl_banner .kl_subtitle {
  background-size: 90%;
  }
    
}
/* Temporary fixes for Crossroads since James Burasten is using non-home theme on the homepage */
#kl_wrapper_3.kl_stm:not(.home) #kl_banner {
  padding-top:0;
}
/* Keeps banner image from showing up */
#kl_wrapper_3.kl_stm:not(.home) #kl_banner:before {
  background: none;
  content: none;
}
.home #kl_wrapper_3.kl_stm #kl_banner_left {
  width: auto;
  background: var(--course-info-bar-bg);
  color: #fff;
  padding: 0.4rem 0.5rem 0.2rem 0.5rem;
  border-radius: 2px;
  margin-right: 1rem;
}
/****** BC Blue Advanced ***** */
/* === Theme Notes ===
@banner-style: v1-full-bg
@info-bar: Looks like v1-primary-bg but is using description

*/
#kl_wrapper_3.kl_summer,
.dp-wrapper.theme-summer {
 
/* Base Colors */ 
--dt-color-primary: #003856;
--dt-color-secondary: #45423F;
--dt-color-accent: #003856;
--dt-neutral-dark: #555;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--dt-color-primary-dark-text: #003856;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary) url('https://cte.bc.edu/canvas/themes/summer/summer-background.jpg') no-repeat left 50%;
--home-banner-gap: var(--s-2);
 
/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/summer/bc-summer-logo.png') no-repeat left top;

/*Module Banner Background */
--module-banner-bg: var(--dt-color-primary);
}
/* === Custom Theme Styles === */
/* Trim old "Summer" language from image */
#kl_wrapper_3.kl_summer.home #kl_banner:before, 
.dp-wrapper.theme-summer.home .dp-header:before {
  width: 230px;
  height: 68px;
  background-size: 100%;
}
/* Switches description to Courseinfo  */
#kl_wrapper_3.kl_summer.home #kl_description {
  order: 0;
  width: var(--home-description-position);
  background: var(--dt-color-primary);
  padding: var(--s-1) var(--s-6);
  /* account for header padding */
  position: relative;
  bottom: calc(var(--s-5) * -1); 
  left: calc(var(--s-6) * -1); 
  width: calc(120% + var(--s-6));
  margin-right: calc(var(--s-12) * -1) !important;
  margin-top: calc(var(--s-5) * -1) !important; 
}
/* Hides Banner Left - not currently used in this theme */
#kl_wrapper_3.kl_summer.home #kl_banner_left {
  display: none;
}
/*********************************************************************/
/*****    Woods College General Theme  ************************************/
/* === Theme Notes ===
@banner-style: v2-topbar
@info-bar: v2-transparent
*/
#kl_wrapper_3.kl_woods {

/* Base Colors */
--dt-color-primary: #501315;
--dt-color-secondary: #524543;
--dt-color-accent: #8a100b;
--dt-neutral-dark: #524543;
--dt-neutral-medium: #656565;
--dt-neutral-light: #ccc;

/* Accessible Color Contrast */
--bs-link-color: #501315;
--dt-color-primary-contrast: #fff;
--dt-color-secondary-contrast: #fff;

/* Banner Background */
--home-banner-bg: var(--dt-color-primary); /* switching background image to just h2 content */

/* Homepage Logo */
--logo-bg: url('https://cte.bc.edu/canvas/themes/woods/woods-logo.png') no-repeat left center;
--logo-padding: 0 var(--s-4) 0 var(--s-4);

/* Homepage Banner (with Adjustments for @banner-style: v2-topbar) */
--module-banner-bg: var(--dt-color-primary);
--home-h2-bg: var(--gradient-bg-2), url('https://cte.bc.edu/canvas/themes/woods/woods-bg-home.jpg') no-repeat 100% 100%;
--home-banner-gap: var(--s-4);
--home-banner-padding: var(--s-4) 0 0 0;
--homepage-title-padding: var(--s-8) var(--s-6) var(--s-4)  var(--s-6);
--course-title-text-shadow: var(--text-shadow-1);

/*Module Banner  */
--module-banner-padding: 0;
--module-banner-bg: var(--dt-color-primary);
--module-h2-bg: url('https://cte.bc.edu/canvas/themes/woods/woods-bg-interior.jpg') no-repeat 100% 100%;

/* @info-bar: v2-transparent (#kl_banner_left) */
--course-info-bar-padding: 0 var(--s-6) var(--s-10) var(--s-12);
--course-info-bar-bg: none;
--course-info-bar-size: var(--text-md);

/* Field Positions */
--home-description-position: var(--inline-field);

}
/* === Custom Theme Styles === */
/* Logo to Description */
#kl_wrapper_3.kl_woods.home #kl_description {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
#kl_wrapper_3.kl_woods.home #kl_banner .kl_subtitle {
  width: var(--inline-field);
  display: flex;
  align-items: center;
  /* show subitle field */
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path:none;
  white-space: normal;

  padding-right: var(--s-6);
}
#kl_wrapper_3.kl_woods:not(.home) #kl_banner {
  padding:0;
  border-top: 5px solid var(--dt-color-primary);
}
#kl_wrapper_3.kl_woods:not(.home) #kl_banner h2 {
  background-size: cover;
  padding:  var(--s-3) var(--s-6) var(--s-5) var(--s-6);
}
/* Module banner Description and Subtitle position (Non-Standard)*/
#kl_wrapper_3.kl_woods:not(.home) #kl_description {
  order: -1;
  text-decoration:none;
  text-transform:uppercase;
  padding-bottom: var(--s-1);
  padding-left: var(--s-6);
  font-size: var(--text-sm);
  margin-top:0; 
  }
#kl_wrapper_3.kl_woods:not(.home) .kl_subtitle {
  order: 1;
  padding-bottom: var(--s-1);
  padding-top: var(--s-1);
  background: var(--dt-neutral-light);
  color: #000;
  text-transform: none;
  margin-bottom:0; /* clearing defaults to fit in bottom bar style */
  margin-top: calc(var(--s-2) * -1); 
  padding-left: var(--s-6);
  }