bmd_style.css

/*-----
COLOR STYLES #1676c4
-----*/

:root {
	--rocc_primary: #102535;
	--rocc_secondary:#3B52DB;
	--rocc_secondary_light:#497ad7;
	--rocc_call_out_info:#3B52DB;
	--rocc_call_out_info_light:#ECF1F4;
	--rocc_call_out_key:#EA3434;
	--rocc_call_out_key_light:#F0CDCD;
	--rocc_call_out_highlight:#F89244;
	--rocc_call_out_highlight_light:#FDEEE3;
	--rocc_tertiary: #009DC3;
	--rocc_tertiary_light: #EFF8FB;
	--rocc_tertiary_dark: #327585;
	--domain_cp_color: #2C76BB;
	--domain_hs_color: #F06669;
	--domain_ss_color: #90BD6D;
	--domain_pl_color: #8D6DAF;
	--fbyHH-fontFamily: 'MADE Evolve Sans', "Lato Extended", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif!important;
	--fbyHH-color: var(--rocc_secondary)!important;
	--fbyHH-fontWeight: inherit!important;
}

/*----
TEXT STYLES
----*/

@font-face {
  font-family: 'MADE Evolve Sans';
  src: url(https://mediaproduction.adelaide.edu.au/bmd/fonts/made_evolve_sans_regular.woff);
}

@font-face {
  font-family: 'MADE Evolve Sans';
  src: url(https://mediaproduction.adelaide.edu.au/bmd/fonts/made_evolve_sans_medium.woff);
	font-weight: 500;
}

@font-face {
  font-family: 'MADE Evolve Sans';
  src: url(https://mediaproduction.adelaide.edu.au/bmd/fonts/made_evolve_sans_bold.woff);
	font-weight: bold;
}


/* Fundamental font formatting */

.kl_wrapper {
  	color: var(--rocc_primary);
  	font-size: 1rem;
  	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.4rem;
}
.kl_wrapper p {
	margin: 0px 0px 14px;
}

.kl_wrapper a {
	color:var(--rocc_secondary);
	text-decoration: underline;
}

.kl_wrapper a:hover {
	color:var(--rocc_primary)!important;
}

/* Reset font style for left menu tray */
.navigation-tray-container a.fbyHH_bGBk {font-family:LatoWeb, "Lato Extended", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif!important;color:#005a9c;}

/* Removes the errant underline after Cidilabs Pill links */
.user_content a:not(.btn):not(.Button):not(.ui-button):not(.ui-button.ui-state-hover):not(.ui-button.ui-state-focus):not(.ui-button.ui-state-disabled):not([role=button]), .mceContentBody a:not(.btn):not(.Button):not(.ui-button):not(.ui-button.ui-state-hover):not(.ui-button.ui-state-focus):not(.ui-button.ui-state-disabled):not([role=button]), a.external:hover span, a.external:focus span, a.external:active span {
	text-decoration: none!important;
}

/* Removes the auto-added external link span to stop it from messing up our layouts */
/* Commenting this out temporarily to see if it fixes our external-links-disappearing-on-click issue
.kl_wrapper a.external:active span, .kl_wrapper a.external:focus span {
	display:none;!important;
} */


/* Body text heading styles */

.kl_wrapper h2, .dp-wrapper h2 {
 	color: var(--rocc_primary);
  	font-size: 2rem;
	line-height: 2.4rem;
  	font-weight: bold;
	margin: 0px 0px 15px;
  	padding: 0 !important;
  	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
  	border-bottom: none !important;
}

.kl_wrapper h3, .dp-wrapper h3 {
  	color: var(--rocc_primary);
  	font-size: 1.59375rem;
	line-height: 2rem;
	margin-bottom: 5px;
  	font-weight: bold;
  	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
  	padding: 0 !important;
  	border: none !important; 
}

#kl_wrapper_3.kl_box_left_1 h3:not(.ui-state-default), #kl_wrapper_3.kl_box_left_2 h3:not(.ui-state-default), #kl_wrapper_3.kl_box_left_3 h3:not(.ui-state-default), #kl_wrapper_3.kl_box_left h3:not(.ui-state-default) {
	margin: 0px 0px 6px;}

.kl_wrapper h4, .dp-wrapper h4 {
  	color: var(--rocc_primary);
	font-weight: 500; 
  	font-size: 1.3125rem;
  	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	margin: 0px;
  	padding: 0 !important;
  	border: none !important; 
  	background-color: transparent!important;

}

.kl_wrapper h5, .dp-wrapper h5 {
  	color: #000000;
	font-weight: bold; 
  	font-size: 1.1rem;
  	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	margin: 0px;

}


/* Breadcrumb styling */

#breadcrumbs li, #breadcrumbs li a {color:grey;}


/* Override the icons that Canvas starting including as of mid-2022. */

.external_link_icon, .file_download_btn {display:none!important;}


/* Removes default white background from h3s */

#kl_wrapper_3.kl_box_left_1 h3:not(.ui-state-default), #kl_wrapper_3.kl_box_left_2 h3:not(.ui-state-default), #kl_wrapper_3.kl_box_left_3 h3:not(.ui-state-default), #kl_wrapper_3.kl_box_left h3:not(.ui-state-default) {
	background-color:transparent;
}


/* Hides default Canvas page titles */

.pages.show .page-title {display:none;}


/* Feature headings eg course welcome page header */
.kl_wrapper .rocc_feature_header {
	padding: 40px 20px;
	background-color: var(--rocc_primary);
	margin: 0px;
	text-align: center;
}

.kl_wrapper .rocc_feature_header h1 {
	color: white;
	font-size: 2.5rem;
	font-weight: bold;
	line-height: 3.166rem;
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	padding-left: 1.875rem;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.kl_wrapper .rocc_feature_header h2 {
	color: white;
	font-size: 1.166rem;
	font-weight: normal;
	display:block;
	border-bottom: none !important;
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	padding-left:1.875rem!important;
	text-transform: uppercase;
}

.kl_wrapper .rocc_feature_header p {
	color: white;
	padding: 0; }


/* Major headings eg module intro header */

.kl_wrapper .rocc_major_header {
	background: var(--rocc_primary);
}

@media only screen and (min-width:761px) {
	.kl_wrapper .rocc_major_header img {max-width:2.375rem!important;float:right;margin: 0 0 0 10px;}
	.kl_wrapper .rocc_major_header_icon {
	padding: 1.75rem;
	display: flex;
    	align-items: flex-end;
    	justify-content: flex-end;}
	
	.kl_wrapper .rocc_major_header h1 {
	color: white;
	font-size: 3rem;
	font-weight: bold;
	line-height: 3.5rem;
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	padding-left:1.875rem!important;
	padding-bottom: 1.25rem;
	padding-right: 1.875rem;
}

.kl_wrapper .rocc_major_header h2 {
	color: white;
	font-size: 1.8125rem;
	font-weight: normal;
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	display:block;
	border-bottom: none !important;
	padding-left:1.875rem!important;
	padding-top: 1.25rem!important;
	margin-bottom: .5rem;
}
}

@media only screen and (max-width:760px) {
	.kl_wrapper .rocc_major_header img {max-width:2rem!important;margin: 0 10px 0 0;}
	.kl_wrapper .rocc_major_header_icon {padding:1.25rem 1.25rem 0 1.25rem;}
	.kl_wrapper .rocc_major_header h1 {
	color: white;
	font-size: 1.8125rem;
	font-weight: bold;
	line-height: 2.3rem;
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	padding-left:1.25rem!important;
	padding-bottom: 1.25rem;
	padding-right: 1.875rem;
		margin: 0;
}

.kl_wrapper .rocc_major_header h2 {
	color: white;
	font-size: 1.2rem;
	line-height:1.5rem;
	font-weight: normal;
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	display:block;
	border-bottom: none !important;
	padding-left:1.25rem!important;
	padding-top: 1.25rem!important;
	margin: 0;
}
}

.kl_wrapper .rocc_major_header {
	background: var(--rocc_primary);
}

.kl_wrapper .rocc_major_header .bs-col-sm-9, .kl_wrapper .rocc_major_header .bs-col-sm-10 {
	padding:0!important;
}




/* Headings for headers on standard content pages */

.kl_wrapper .rocc_page_title {
	border-bottom: solid 3px var(--rocc_secondary)!important;
}

.kl_wrapper .rocc_page_title .bs-col-sm-9, .kl_wrapper .rocc_page_title .bs-col-sm-10, .kl_wrapper .rocc_page_title .bs-col-sm-11 {
	padding:0!important;
}

@media only screen and (min-width:761px) {
	.kl_wrapper .rocc_page_title img {max-width:2.375rem!important;float:right;margin: 0 0 0 10px;}
	.kl_wrapper .rocc_page_title_icon {
	padding:0 0.25rem 0.625rem 1.25rem;
	display: flex;
    	align-items: flex-end;
    	justify-content: flex-end;}
	
	.kl_wrapper .rocc_page_title h1 {
	font-size: 2.5rem;
	line-height: 2.916rem;
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	color: var(--rocc_secondary);
    	font-weight: bold;
    	border-bottom: none!important;
	margin-top: 0;
}

.kl_wrapper .rocc_page_title h2 {
	color: var(--rocc_primary);
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
    	border-bottom: none !important;
	margin-bottom:0;
}
}

@media only screen and (max-width:760px) {
	.kl_wrapper .rocc_page_title img {max-width:2rem!important;margin: 0 10px 0 0;}
	.kl_wrapper .rocc_page_title_icon {padding:1.25rem 0;}
	.kl_wrapper .rocc_page_title h1 {
	font-size: 2.5rem;
	line-height: 2.916rem;
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
	color: var(--rocc_secondary);
    	font-weight: bold;
    	border-bottom: none!important;
	margin-bottom:5px;
	margin: 0;
}

.kl_wrapper .rocc_page_title h1 {
	font-size: 1.8125rem;
	font-weight: bold;
	line-height: 2.3rem;
}

.kl_wrapper .rocc_page_title h2 {
	color: var(--rocc_primary);
	font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
    	border-bottom: none !important;
	margin: 0;
	font-size:1.2rem;
	line-height:1.5rem;
}
}



/* Tutor "about" heading styles */

.kl_wrapper .tutor_card .bs-col-md-2, .kl_wrapper .tutor_card .bs-col-md-3, .kl_wrapper .tutor_card .bs-col {
	padding-left:0;
}

.kl_wrapper .tutor_card .rocc_vertical_align img {max-width:120px!important;margin-bottom:11px!important;} /* this helps with mobile devices */

.kl_wrapper .tutor_info {
	border-bottom: solid 3px var(--rocc_secondary);
	margin-top: auto;
	margin-bottom: auto;
}

.kl_wrapper .tutor_info .bs-col-sm-4 {
	margin-bottom:50px;
}
	
.kl_wrapper .tutor_info h2, .tutor_info h4{
	padding: 0;
	margin-bottom: 5px;
	line-height: 1.5rem;
}

.kl_wrapper .tutor_info h3 {
	font-weight:400;
	font-size:1.3125rem;
	margin:15px 0 0 0;
}

.kl_wrapper .tutor_info h4 {
	font-size:1.4rem;
	line-height:1.5rem;
	font-weight:700;
	color:var(--rocc_secondary);
}

/* Canvas Assignment and Quiz Lists */
.accessible-toggler, .accessible-toggler:hover, .accessible-toggler:focus, .item-group-condensed .ig-header h2 {
	color:white!important;
}

/* Canvas Module List */

/* Colour the module Publish dropdown menu */
.module-publish-icon span {background-color:var(--rocc_primary)!important;}
[name="IconMiniArrowDown"] {color:white!important;}

/* Give the points some room */
.points_possible_display, .js-score {margin-left:10px;}

/* Put course titles at top of module list */
.context_module:before {text-transform:uppercase;font-size:18px;font-weight:bold;margin-bottom:14px;display:inline-block;color:var(--rocc_primary)}
#context_module_536170:before {content:'Foundations of Medicine (2022)'}
#context_module_561018:before {content:'Medical Studies 1 (2022)'}
#context_module_567636:before {content:'Medical Studies 2A (SHELL)'}
#context_module_589982:before {content:'Medical Studies 2A (2023)'}
#context_module_503321:before {content:'BMS Program Course'}
#context_module_572167:before {content:'Medical Studies 2B (SHELL)'}
#context_module_578837:before {content:'Foundations of Medicine (2023)'}
#context_module_581257:before {content:'Medical Studies 3 (SHELL)'}
#context_module_581259:before {content:'Transition to Clinical Studies (SHELL)'}
#context_module_581258:before {content:'Research Skills Development (SHELL)'}
#context_module_608324:before {content:'Medical Studies 2B (2023)'}
#context_module_600847:before {content:'Medical Studies 1 (2023)'}

.context_module {
	font-family: 'MADE Evolve Sans', sans-serif;
	letter-spacing: 0.009rem;
}

.ig-header {
	background:var(--rocc_primary)!important;
	padding:12px 14px 8px 8px !important;
}

.ig-header .name {
	font-size:1.5rem!important;
	color:white!important;
	text-shadow: none!important;
}

.ig-header i {
	color:white!important;
}

.ig-header .ig-header-title {
	line-height: 24px;
	padding-left:30px;
}

.ig-header i {margin-left:-20px;}

.ig-header i.icon-plus {margin:0 10px 0 0;}

.ig-list .indent_0 .ig-row a.ig-title, .ig-list .indent_0 .ig-row .locked_title {
	font-size: 1.25rem; 
	color: var(--rocc_primary);}

.ig-list .indent_1 .ig-row a.ig-title, .ig-list .indent_1 .ig-row .locked_title {
	font-size: 1.15rem; 
	font-weight: normal!important;
	color: var(--rocc_primary);
	padding-left:12px;
}

.ig-list .indent_2 .ig-row a.ig-title, .ig-list .indent_2 .ig-row .locked_title {
	font-weight: normal!important;
	font-size: 1.15rem;
	color: var(--rocc_secondary);
}

.ig-list .indent_3 .ig-row a.ig-title, .ig-list .indent_3 .ig-row .locked_title {
	font-weight:normal!important;
	font-size: 1rem;
	color: var(--rocc_secondary);
}




/* Mobile optimisations */
.ig-header-title, .ig-header-title .ellipsis {white-space:normal;} /* Fixes titles not wrapping on small screens */
@media only screen and (max-width:600px) {
	.context_module_item.indent_2 .type_icon {padding-left:2px;}
	.context_module_item.indent_1 .type_icon {padding-left:0;}
	.ig-list .indent_1 .ig-row a.ig-title, .ig-list .indent_1 .ig-row .locked_title {padding-left:0;}
	.ic-Layout-contentMain {padding-left: 3px;padding-right:3px;}
}


/* Remove the annoying square brackets on load */
.ig-details__item:after {display:none;}

div.module-item-title span[title="Science and Scholarship"], div.module-item-title span[title="Science and Scholarship (Nervous System)"], div.module-item-title span[title="Science and Scholarship (Musculoskeletal)"], div.module-item-title span[title="Science and Scholarship (Musculoskeletal System)"], div.module-item-title span[title="Practical"] {
	padding: 10px 32px;
	color: var(--domain_ss_color)!important;
}

div.module-item-title span[title="Science and Scholarship"]:before, div.module-item-title span[title="Science and Scholarship (Nervous System)"]:before, div.module-item-title span[title="Science and Scholarship (Musculoskeletal)"]:before, div.module-item-title span[title="Science and Scholarship (Musculoskeletal System)"]:before, div.module-item-title span[title="Practical"]:before {
	content:'';
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/ss-colour.svg');
	background-size: 20px 29px;
	height: 20px;
	width: 20px;
	padding-top: 5px;
	margin-left: -28px;
	position: absolute;
	background-repeat: no-repeat;
}

div.module-item-title span[title="Health and Society"] {
	padding: 10px 32px;
	color: var(--domain_hs_color)!important;
}

div.module-item-title span[title="Health and Society"]:before {
	content:'';
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/hs-colour.svg');
	background-size: 20px 29px;
	height: 20px;
	width: 20px;
	padding-top: 5px;
	margin-left: -28px;
	position: absolute;
	background-repeat: no-repeat;
}

div.module-item-title span[title="Professionalism and Leadership"] {
	padding: 10px 32px;
	color: var(--domain_pl_color)!important;
}

div.module-item-title span[title="Professionalism and Leadership"]:before {
	content:'';
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/pl-colour.svg');
	background-size: 20px 29px;
	height: 20px;
	width: 20px;
	padding-top: 5px;
	margin-left: -28px;
	position: absolute;
	background-repeat: no-repeat;
}

div.module-item-title span[title="Clinical Practice"] {
	padding: 10px 32px;
	color: var(--domain_cp_color)!important;
}

div.module-item-title span[title="Clinical Practice"]:before {
	content:'';
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/cp-colour.svg');
	background-size: 20px 29px;
	height: 20px;
	width: 20px;
	padding-top: 5px;
	margin-left: -28px;
	position: absolute;
	background-repeat: no-repeat;
}

.requirements_message .pill {
background: var(--rocc_secondary);
color: white;
border: 0!important;
box-shadow: none;
}


/* Module List Hashtag-driven Icons - order priority is #SS #CP #HS #PL */

div.module-item-title a:after { 
	content:'';
	position: absolute;
	margin-top: -3px;
	margin-left: -36px;
	height:30px;
	background-repeat: no-repeat;
	background-color: white!important;
	background-origin: content-box;
}

div.module-item-title a[title*="#SS"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/ss-colour.svg');
	background-size: 27px 29px;
	width: 36px;
	margin-left:-36px;
}

div.module-item-title a[title*="#HS"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/hs-colour.svg');
	background-size: 30px 29px;
	width: 37px;
	margin-left:-37px;
}

div.module-item-title a[title*="#PL"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/pl-colour.svg');
	background-size: 27px 29px;
	width: 37px;
	margin-left:-35px;
}

div.module-item-title a[title*="#CP"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/cp-colour.svg');
	background-size: 27px 29px;
	width: 39px;
	margin-left:-38px;
}

div.module-item-title a[title*="#SS"][title*="#CP"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/ss-cp-colour.svg');
	background-size: 57px 29px;
	width: 80px;
	margin-left: -75px;
}

div.module-item-title a[title*="#SS"][title*="#HS"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/ss-hs-colour.svg');
	background-size: 58px 29px;
	width: 80px;
	margin-left: -75px;
}

div.module-item-title a[title*="#SS"][title*="#PL"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/ss-pl-colour.svg');
	background-size: 57px 29px;
	width: 80px;
	margin-left: -71px;
}

div.module-item-title a[title*="#CP"][title*="#HS"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/cp-hs-colour.svg');
	background-size: 57px 29px;
	width: 80px;
	margin-left: -75px;
}

div.module-item-title a[title*="#CP"][title*="#PL"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/cp-pl-colour.svg');
	background-size: 54px 29px;
	width: 80px;
	margin-left:-75px;
}

div.module-item-title a[title*="#HS"][title*="#PL"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/hs-pl-colour.svg');
	background-size: 57px 29px;
	width: 80px;
	margin-left:-75px;
}

div.module-item-title a[title*="#SS"][title*="#CP"][title*="#HS"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/ss-cp-hs-colour.svg');
	background-size: 97px 29px;
	width: 114px;
	margin-left: -114px;
}

div.module-item-title a[title*="#SS"][title*="#HS"][title*="#PL"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/ss-hs-pl-colour.svg');
	background-size: 97px 29px;
	width: 114px;
	margin-left: -108px;
}

div.module-item-title a[title*="#SS"][title*="#CP"][title*="#PL"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/ss-cp-pl-colour.svg');
	background-size: 97px 29px;
	width: 114px;
	margin-left: -108px;
}

div.module-item-title a[title*="#CP"][title*="#HS"][title*="#PL"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/cp-hs-pl-colour.svg');
	background-size: 97px 29px;
	width: 114px;
	margin-left: -109px;
}

div.module-item-title a[title*="#SS"][title*="#CP"][title*="#HS"][title*="#PL"]:after {
	background-image: url('https://uamediaprod.github.io/bmd/assets/icons/all-colour.svg');
	background-size: 123px 29px;
	width: 146px;
	margin-left: -145px;
}

/* Put the margin back on module titles */
.ig-list .icon-drag-handle {margin:0!important;}
	
/* Remove module list hover highlight to stop the icons looking weird with their white backgrounds */
.ig-list .ig-row:hover {background-color:white!important;}

/* Remove module title padding so the icons wrap in exactly the same way as the characters */
.ig-title {padding-right:0;}

/* Custom lists */
.kl_wrapper ul {
	padding-bottom: 1.2rem;
}

.kl_wrapper dd {
	padding-bottom:.5rem;
	padding-left: 1rem;
}

/* Learning outcomes */

.kl_wrapper .rocc_learning_outcomes_title {
	background-color: var(--rocc_secondary);
	padding: 0.4375rem 1.25rem;
}

.kl_wrapper .rocc_learning_outcomes_title h2 {
	color: white;
    font-size: 25px;
    margin: 0!important;
}

.kl_wrapper .rocc_learning_outcomes {
	background-color: var(--rocc_tertiary_light);
	padding: 1rem 1.25rem;
}

.kl_wrapper .rocc_learning_outcomes h2{ 
	padding: 1rem 1.5rem .5rem 1.5rem;
}
.kl_wrapper .rocc_learning_outcomes p {
	margin: 0;
}

.kl_wrapper .rocc_learning_outcomes ul {
	padding: 0.625rem 0.625rem 0.625rem 0;
}

.kl_wrapper .rocc_learning_outcomes ul li{
	line-height: 1.5rem;
}

.kl_wrapper .rocc_learning_outcomes ul li::marker {
  color: var(--rocc_secondary);
	font-size: 1.5rem;
}

.kl_wrapper .rocc_learning_outcomes ol {
	padding: 0.625rem 0.625rem 0.625rem 2.5rem;
}

.kl_wrapper .rocc_learning_outcomes ol li{
	line-height: 1.5rem;
}

.kl_wrapper .rocc_learning_outcomes ol li::marker {
  color: var(--rocc_secondary);
	font-size: 1.1rem;
	font-weight: bold;
}

/* Custom counter */
.kl_wrapper .rocc_custom_counter {
  counter-reset: my-awesome-counter;
  list-style: none;
}

.kl_wrapper div[id*="kl_custom_block"] > ol.rocc_custom_counter > li {
  margin-bottom: 10px;
  padding-top: 10px;
  counter-increment: my-awesome-counter;
  position: relative;
}

.kl_wrapper div[id*="kl_custom_block"] > ol.rocc_custom_counter > li::before {
  content: counter(my-awesome-counter);
	color: white;
  font-size: 90%;
  font-weight: bold;
  position: absolute;
  left: calc(-1 * var(--size) - 10px);
  line-height: 25px;
  width: var(--size);
--size: 24px;
  height: var(--size);
  top: 0;
  background-color: var(--rocc_tertiary);
  border-radius: 50%;
  text-align: center;
  margin-top: 10px;
}

.kl_wrapper .rocc_custom_counter ul li:before {
	content: none;
}

.kl_wrapper .rocc_custom_counter ul {
	list-style-type: disc!important;
}

.kl_wrapper .rocc_custom_counter ul li {
	margin: 0;
	padding: 0;
}
.kl_wrapper .rocc_custom_counter p {
	margin: 3px 0px 3px 0px;
}
.kl_wrapper .rocc_custom_counter h4 {
	font-size: 1.2rem;
	font-weight: bold;
}


/*----Content Positions----*/
/* Set page width (two selectors to cater for Cidilabs variations) */
.kl_wrapper_parent, #wiki_page_show .show-content {
	max-width: 850px;
	margin: auto;
}

.kl_wrapper .rocc_column-flow-3 {columns: 250px 3;padding: 0 11px;}
.kl_wrapper .rocc_column-flow-2 {columns: 300px 2;padding: 0 11px;}

div[id*="kl_custom_block"], div[id*="kl_content_block_sub"], div[id*="kl_panel_block"] {
  margin: 0 0 3.5rem 0!important;
}

.kl_wrapper .rocc_no_padding_left {padding-left:0!important;}
.kl_wrapper .rocc_no_padding_right {padding-right:0!important;}

/* Figure styling */
figure {margin:0;}


/* Narrower-width centred box eg for divs */

.kl_wrapper .rocc_center_align {
	margin-left: auto!important;
	margin-right: auto!important;
	max-width: 500px;
	text-align: center;
}

/* Vertical align */
.kl_wrapper .rocc_vertical_align {
	margin: auto;
}





/*----Element Styling----*/

.kl_wrapper .rocc_image_caption{
	background-color: #EFEFEF;
	font-size: 0.833rem;
	padding: 10px 4%;
}

.kl_wrapper .rocc_image_with_caption{
	margin-bottom: 0px;
}


.kl_wrapper .rocc_blue_brick {
	background-color: var(--rocc_primary);
	padding: 10px 15px 10px 15px!important;
	color: white;
}

.kl_wrapper .rocc_blue_brick h1, .kl_wrapper .rocc_blue_brick h2, .kl_wrapper.rocc_blue_brick h3, .kl_wrapper .rocc_blue_brick h4, .kl_wrapper .rocc_blue_brick h5, .rocc_blue_brick p {
	color: white;
}


.kl_wrapper .rocc_link_out_box_button_tutor a:hover {
 	background-color: var(--rocc_secondary_light);
	color: white!important;
	text-decoration: none!important;
	text-align:center;
}


/* Table formatting */

.kl_wrapper .rocc_table {
	border:0;
	margin:15px 0;
}

.kl_wrapper .rocc_table tr:nth-child(odd) {
	background: #ecf1f4;
}

.kl_wrapper .rocc_table th {
	background:#C5DCE3;
	text-align:left;
	padding:10px!important;
}

.kl_wrapper .rocc_table td {
	padding:10px!important;
}

/* More condensed table styling */
.kl_wrapper .dense_table p {
	margin:0;
}

.kl_wrapper .dense_table td {
	padding:3px 10px!important;
}


@media only screen and (max-width:480px) {
	.kl_wrapper .rocc_table {
		font-size:0.825rem;
	}
}

/* Second table style */

.kl_wrapper .rocc_table_fancy {
	border:0;
	margin:15px 0;
}

.kl_wrapper .rocc_table_fancy th {
	background:#C5DCE3;
	text-align:left;
	padding:10px!important;
	background: white!important;
	border-left:none;
	border-top:none;
	border-right:none;
	border-bottom: solid 3px var(--rocc_secondary);
}

.kl_wrapper .rocc_table_fancy td {
	padding:7px!important;
	border:1px solid grey;
	text-align:center;
}

.kl_wrapper .rocc_table_fancy td p {
	margin:0!important;
}

@media only screen and (max-width:480px) {
	.kl_wrapper .rocc_table_fancy {
		font-size:0.825rem;
	}
}


#kl_wrapper_3>div {overflow:auto!important;}


/* Popovers */

.tippy-popper, .tippy-tooltip {will-change:initial!important;} /* removing will-change stops the text looking blurry */
.tippy-tooltip.light-theme {box-shadow:none;background:#dadada;padding:18px;}
.tippy-tooltip.light-theme .tippy-arrow {border-top:7px solid #dadada!important;}
.tippy-content ul {font-size:1rem!important;}
.tippy-tooltip {max-width:550px;}

.kl_popover_trigger, .kl_tooltip_trigger, a.kl_popover_trigger, a.kl_tooltip_trigger {
	color: var(--rocc_secondary);
	border-bottom: 1px dashed;
	border-top:none;
	border-left:none;
	border-right:none;
    padding: 1px 0;
    border-radius: 0;
}



/* "Quick Check" styles */

#kl_wrapper_3 .kl_quick_check p {font-size:inherit;}
#kl_wrapper_3 .kl_quick_check {border:none;padding: 25px 46px;background: #e3ecf5;}
#kl_wrapper_3 label {font-size:1rem;}
#kl_wrapper_3 .kl_quick_check p {margin:0!important;}
#kl_wrapper_3 .kl_quick_check_answer {margin-bottom: 12px;}
#kl_wrapper_3 .kl_quick_check .kl_quick_check_field {margin: 3px 10px 10px 0!important;}
#kl_wrapper_3 .kl_quick_check h3 {display:none;}



/*----
CALL OUT/ SECTION STYLES
----*/

/*Lt and Lecture Link boxes*/

.kl_wrapper .rocc_link_out_box {
	background-color: var(--rocc_primary);
	padding: 26px 12px;
}

.kl_wrapper .rocc_link_out_box h2 {
	color: white;
	margin-bottom: 1rem;
}

.kl_wrapper .rocc_link_out_box p {
	color: white;
	margin-top: 0px;
}

.kl_wrapper .rocc_link_out_box_button a {
	color: white;
	font-size: 1rem;
	background-color: var(--rocc_call_out_key) ;
	border: none;
	padding: 10px 20px 10px 20px;
	text-decoration: none !important;
	display: inline-block;
	transition-duration: 0.2s;
	float: right;
	margin-right: 4%;
}

.kl_wrapper .rocc_link_out_box_button a:hover {
 	background-color:#f05b5b;
	color: white!important;
	text-decoration: none!important;
}

.kl_wrapper .rocc_link_out_box_button_tutor a {
	color: white;
	font-size: 1rem;
	background-color: var(--rocc_secondary) ;
	border: none;
	padding: 10px 20px 10px 20px;
	text-decoration: none !important;
	display: inline-block;
	transition-duration: 0.2s;
	float: left;
	margin-right: 4%;
	min-width:150px;
	text-align:center;
}

/* Pull quote box */

.kl_wrapper .rocc_pull_quote{
	background: var(--rocc_primary);
	color:white;
	display: block;
	padding: 5px 15px 5px 15px;
}

.kl_wrapper .rocc_quote_name{
	text-align: right;
	font-style: italic;
	font-size: 0.833rem;
}


/* Call-out bar */

.kl_wrapper .rocc_call_out_line {
	border-left: 7px solid var(--rocc_secondary);
	padding-left: 10px;
}

.kl_wrapper .rocc_call_out_bar_key {
	border-left: 7px solid var(--rocc_call_out_key);
	padding-left: 10px;
	padding: 27px;
    background: var(--rocc_call_out_key_light);
}

.kl_wrapper .rocc_call_out_bar_key i {
	color: var(--rocc_call_out_key);
	font-size:1.5rem;
}

.kl_wrapper .rocc_call_out_bar_highlight {
	border-left: 7px solid var(--rocc_call_out_highlight);
	padding-left: 10px;
	padding: 27px;
    background: var(--rocc_call_out_highlight_light);
}

.kl_wrapper .rocc_call_out_bar_highlight i {
	color: var(--rocc_call_out_highlight);
	font-size:1.5rem;
}

.kl_wrapper .rocc_call_out_bar_info {
	border-left: 7px solid var(--rocc_call_out_info);
	padding-left: 10px;
	padding: 27px;
    background: var(--rocc_call_out_info_light);
}

.kl_wrapper .rocc_call_out_bar_info i {
	color: var(--rocc_call_out_info);
	font-size:1.5rem;
}

.kl_wrapper .rocc_call_out_bar h3 {margin:7px 0 20px 0!important;}


/* Call-out box (and call to action box eg lecture slides) */

.kl_wrapper .rocc_call_out_box, .kl_wrapper .rocc_action_box {
	border: 4px solid var(--rocc_secondary);
	padding: 15px 20px;
}

.kl_wrapper .rocc_call_out_box h3, .kl_wrapper .rocc_action_box h3 {
	margin-top:0;
}

.kl_wrapper .rocc_call_out_box p:last-child, .kl_wrapper .rocc_action_box p:last-child {
	margin-bottom:1px;
}

.kl_wrapper .rocc_call_out_box_center, .kl_wrapper .rocc_action_box_center {
	border: 4px solid var(--rocc_secondary);
	width:60%;
	padding: 5px 15px 5px 15px;
	margin:1.25rem auto;
	
}

/*Discussion Box*/
.kl_wrapper .rocc_page_link_box {
	background-color: var(--rocc_tertiary_light);
	padding: 1rem .5rem;
}
.kl_wrapper .rocc_page_link_box h4 {
	font-weight: bold;
	font-size: 1.2rem;
	margin-bottom:17px;
}
	
.kl_wrapper .rocc_page_link_box h4:after{
    content: "";
    position: relative;
    width: 15%;
    height: 1px;
    display:block;
    bottom: 0;
    left:0;
    top:0;
    border-bottom: 3px solid var(--rocc_tertiary);
}

.kl_wrapper .rocc_page_link_box h3 {
	font-size: 1.59375rem;
	font-weight: bold;
}
.kl_wrapper .rocc_page_link_box .rocc_tertiary_button_container {
	align-content: right;
}
	
@media only screen and (min-width:685px){
	.kl_wrapper .rocc_page_link_box .rocc_tertiary_button_container {
		align-content: left;
		
	}
}


/* Discussion Board */
.fOyUs_UeJS {max-width:1114px!important;}


/*Underline H3*/

.kl_wrapper .rocc_underline_h3 h3:after{
    content: "";
    position: relative;
    width: 15%;
    height: 1px;
    display:block;
    bottom: 0;
    left:0;
    top:0;
    border-bottom: 3px solid var(--rocc_tertiary);
}

	
/* Recommended Readings*/

/* Removes left padding from bootstrap columns */
.kl_wrapper .bs-container .rocc_reading {
	padding-left: 0;
}

.kl_wrapper .rocc_reading h3 {
	margin-top: 0;
}

.kl_wrapper .rocc_reading h4 {
	font-size: 1rem;
	margin: 0;
}

.kl_wrapper .rocc_reading p {
	margin-bottom: 1rem;
}

.kl_wrapper .rocc_right_line {
	border-right: 3px solid var(--rocc_secondary); /* I've just added this into the img so it is applied automatically. Leaving this here for now just in case -Simon */
}
	
.kl_wrapper .rocc_reading img {
	margin:0 0 1rem;
	padding-right:15px;
	border-right: 3px solid var(--rocc_secondary);
	max-width:190px!important; /* fix for mobiles */
}

/*----
BUTTON STYLES
----*/

/*----Feature header buttons----*/

.kl_wrapper .ui-icon, .kl_wrapper li.ui-icon  {
	width: 0;
	height: 0;
	background-image: none;
}

.kl_wrapper a.rocc_feature_header_button {
  color: white;
  font-size: 1.166rem;
  font-weight: bold;
  font-family: 'MADE Evolve Sans', Arial, Helvetica, sans-serif;
  border: solid var(--rocc_secondary) 5px;
  padding: 10px 25px;
  margin-top: 11px;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  transition-duration: 0.4s;
}

.kl_wrapper a.rocc_feature_header_button:hover {
	background-color: var(--rocc_secondary_light);
	border: solid #9DD8CA 5px;
}


/* Secondary colour button ("blue" option for legacy support) */

.kl_wrapper .rocc_secondary_button_container a, .kl_wrapper .rocc_blue_button_container a, .kl_wrapper .rocc_secondary_button_container_view a, .kl_wrapper .rocc_secondary_button_container_download a {
	color: white;
	font-size: 1rem;
	font-weight: bold;
	background-color: var(--rocc_secondary)!important ;
	border: none;
	padding: 10px 20px;
	text-decoration: none !important;
	display: inline-block;
	transition-duration: 0.2s;
	min-width: 180px;
	text-align:center;
}

.kl_wrapper .rocc_secondary_button_container p, .kl_wrapper .rocc_blue_button_container p {margin:0}

.kl_wrapper .rocc_secondary_button_container a:hover, .kl_wrapper .rocc_blue_button_container a:hover, .rocc_secondary_button_container_download a:hover{
  background-color: var(--rocc_secondary_light)!important;
	color: white !important;
}

/* Tertiary colour button */

.kl_wrapper .rocc_tertiary_button_container a {
	color: white;
	font-size: 1.2rem;
	font-weight: bold;
	background-color: var(--rocc_tertiary);
	border: none;
	padding: 10px 20px;
	text-decoration: none !important;
	display: inline-block;
	transition-duration: 0.2s;
	/*border-radius: 20px;*/
	min-width: 180px;
}

.kl_wrapper .rocc_tertiary_button_container p {margin:0}

.kl_wrapper .rocc_tertiary_button_container a:hover {
  background-color: var(--rocc_tertiary_dark);
	color: white !important;
}


/* Highlight colour button */

.kl_wrapper .rocc_highlight_button_container a {
	font-size: 1rem;
	background-color: var(--rocc_call_out_highlight) ;
	border: none;
	padding: 10px 10px;
	text-decoration: none !important;
	display: inline-block;
	transition-duration: 0.2s;
	color:black;
}

.kl_wrapper .rocc_highlight_button_container p {margin:0}

.kl_wrapper .rocc_highlight_button_container a:hover {
  background-color: #f29353;	
}


/* Key colour button */

.kl_wrapper .rocc_key_button_container a {
	font-size: 1rem;
	background-color: var(--rocc_call_out_key);
	border: none;
	padding: 10px 10px;
	text-decoration: none !important;
	display: inline-block;
	transition-duration: 0.2s;
	color:white;
}

.kl_wrapper .rocc_key_button_container p {margin:0}

.kl_wrapper .rocc_key_button_container a:hover {
  background-color: #f05b5b;	
}


/* Grey button styling */
.kl_wrapper .rocc_grey_button_container a, .kl_wrapper .rocc_grey_button_container_download a, .kl_wrapper .rocc_grey_button_container_view a, .kl_wrapper .rocc_video_container a {
	color: var(--rocc_primary);
	font-size: 1rem;
	background-color: #EFEFEF;
	border: none;
	padding: 10px 10px;
	text-decoration: none !important;
	display: inline-block;
	transition-duration: 0.2s;
	margin: 0 3px 8px 0;
}

.kl_wrapper .rocc_grey_button_container a:hover, .kl_wrapper .rocc_video_container a:hover {
	background-color: #D1D1D1 !important;
}

.kl_wrapper .rocc_grey_button_container_download a:before, .kl_wrapper .rocc_grey_button_container_view a:before, .kl_wrapper .rocc_action_box .rocc_secondary_button_container_view a:before, .kl_wrapper .rocc_action_box .rocc_blue_button_container_view a:before, .kl_wrapper .rocc_action_box .rocc_secondary_button_container_download a:before, .kl_wrapper .rocc_action_box .rocc_blue_button_container_download a:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 8px;
}

.kl_wrapper .rocc_grey_button_container_download a:before, .kl_wrapper .rocc_action_box .rocc_secondary_button_container_download a:before, .kl_wrapper .rocc_action_box .rocc_blue_button_container_download a:before {
	content: "\f358";
}

.kl_wrapper .rocc_grey_button_container_view a:before, .kl_wrapper .rocc_action_box .rocc_secondary_button_container_view a:before, .kl_wrapper .rocc_action_box .rocc_blue_button_container_view a:before {
	content: "\f06e";
}


/* Module button styling */

.kl_wrapper .rocc_module_group .bs-col-md, .kl_wrapper .rocc_module_group .bs-col-md-4 {
  padding-left:5px;
  padding-right:5px;
}

.kl_wrapper .rocc_module_button_container {
	height:100%;
	padding:10px 0;
}

.kl_wrapper .rocc_module_button_heading {
	background: #102535;
	height: auto;
	color: white;
	padding: 8px;
	font-weight: bold;
}

.kl_wrapper .rocc_module_button_content {
	padding:10px;
}

.kl_wrapper .rocc_module_button {
	color: var(--rocc_primary);
	margin: 5px 0;
	padding: 10px 10px 10px 10px;
	height:100%;
	min-height:129px;
 	transition: 0.4s;
	border-style: solid;
    	border-color: var(--rocc_primary);
	border-width: 1.875rem 1px 1px 1px;
}

.kl_wrapper .rocc_module_button:hover {
	border-color: var(--rocc_secondary) ;
}

.kl_wrapper .rocc_module_button_container h2 {
	color: var(--rocc_primary);
    	font-size: 1.5rem;
	line-height:1.8rem;
	margin:0 0 4px 0;
	padding-bottom: 5px;
}

.kl_wrapper .rocc_module_button_container h4 {
  	font-size: 1rem;
	line-height: 1.2rem;
}

.kl_wrapper .rocc_module_button p {
	margin: 0px 0 7px 0 !important;
}

@media only screen and (max-width:1200px) {
	.kl_wrapper .rocc_module_button {
	padding: 15px 10px 5px 10px;
 	border-width: 0.937rem 1px 1px 1px;
	min-height:104px;
}
}


/* Sets the span inside the a href to cover the whole button - could be simplified not they aren't animated? */
.kl_wrapper .rocc_module_button span.coverlink {
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}

.kl_wrapper .rocc_module_button span.coverlink a:hover {
text-decoration:none;
}

/* Action box - secondary colour button ("blue" option for legacy support) */

.kl_wrapper .rocc_action_box .rocc_secondary_button_container a, .kl_wrapper .rocc_action_box .rocc_blue_button_container a {
	color: white;
	font-size: 1.2rem;
	background-color: var(--rocc_secondary) ;
	border: none;
	padding: 10px 20px;
	text-decoration: none !important;
	display: inline-block;
	transition-duration: 0.2s;
	min-width: 180px;
	text-align:center;
}

.kl_wrapper .rocc_action_box .rocc_secondary_button_container p, .kl_wrapper .rocc_action_box .rocc_blue_button_container p {margin:0}

.kl_wrapper .rocc_action_box .rocc_secondary_button_container a:hover, .kl_wrapper .rocc_action_box .rocc_secondary_button_container a:hover, .rocc_blue_button_container a:hover {
  background-color: var(--rocc_secondary_light);
	color: white !important;
}

@media only screen and (max-width:986px) {
	.kl_wrapper .rocc_action_box .rocc_secondary_button_container {margin-top:12px;text-align:left!important;}
}



/* Program Level Navigation Styling */

.kl_wrapper .rocc_nav_group .bs-col-md, .kl_wrapper .rocc_nav_group .bs-col-md-4 {
  padding-left:5px;
  padding-right:5px;
}

.kl_wrapper .rocc_nav_group_button_container {
	height:100%;
	padding:10px 0;
}

.kl_wrapper .rocc_nav_group_button_heading {
	background: #102535;
	height: auto;
	color: white;
	padding: 8px;
	font-weight: bold;
}

.kl_wrapper .rocc_nav_group_button_content {
	padding:10px;
}

.kl_wrapper .rocc_nav_group_button {
	color: var(--rocc_primary);
	margin: 5px 0;
	padding: 10px 10px 10px 10px;
	height:100%;
	min-height:129px;
 	transition: 0.4s;
	background-color: #D2D7DC;
}

.kl_wrapper .rocc_nav_group_button:hover {
	border-color: var(--rocc_secondary) ;
}

.kl_wrapper .rocc_nav_group_button_container h2 {
	color: var(--rocc_primary);
    	font-size: 1.5rem;
	margin:0;
	padding-bottom: 5px;
}

.kl_wrapper .rocc_nav_group_button_container h4 {
  	font-size: 1rem;
	line-height: 1.2rem;
}

.kl_wrapper .rocc_nav_group_button p {
	margin: 0px 0 7px 0 !important;
}

@media only screen and (max-width:1200px) {
	.kl_wrapper .rocc_nav_group_button {
	padding: 15px 10px 5px 10px;
 	border-width: 0.937rem 1px 1px 1px;
	min-height:104px;
}
}


/*----Navigation Bar----*/
/*--Note: Nav bar is hidden for now as it has been replaced by Canvas Where Am I--*/

.kl_progress_icons {display:none;}

.mce-content-body.kl_has_style:not(.kl_mce_view_app) .kl_module_progress_bar, .mce-content-body.kl_has_style:not(.kl_mce_view_app) .kl_module_progress_icons, .kl_progress-bar, .kl_progress_icons li.kl_complete .kl_colored_bar, .kl_progress_icons li.kl_current .kl_colored_bar {background-color: none!important;}

.kl_progress_icons li.kl_complete a {background-color:#0000ff!important;}

.kl_progress_icons li .kl_colored_bar {border:0!important;background:#dfdfdf!important;}

.kl_progress_icons li.kl_current a, .kl_progress_icons li a:hover, .kl_progress_icons li.kl_current a:hover {color:white!important;}

.kl_progress_icons li a {background: var(--rocc_primary)!important;border:0!important;color:white;box-shadow:none;}
.kl_progress_icons li.kl_current a {background: var(--rocc_secondary_light)!important;border:0!important;color:white;box-shadow:none;}
.kl_progress_icons li.kl_complete a {background: grey!important;}

.kl_progress_icons ol {margin: 0 0 4px 0!important;padding: 0 0 0 4px!important;}

.kl_basic_navlist {
  max-width: none;
  display: flex;
  justify-content: space-between;
  background-color: var(--rocc_secondary);
}

.kl_progress_icons li {
	height:2rem;
	min-width:2rem;
}

.kl_basic_navlist a, .kl_basic_navlist a:not(.btn):not(.Button):not(.ui-button):not([role='button']), .kl_basic_navlist a.external:hover span {
	text-decoration:none!important;
	color:white;
	width:100%;
}

.kl_wrapper ul.kl_basic_navlist {
	padding:0;
	font-weight:bold;
}

#kl_wrapper_3 #kl_navigation li {
	text-align: center;
    	width: 33.33%;
}

#kl_wrapper_3 #kl_navigation li:hover {
	text-align: center;
    	width: 33.33%;
	background:var(--rocc_secondary_light)!important;
}

a.nav_list {
	color: white; 
	text-decoration:none!important;
}

.kl_basic_navlist li[id*="kl_nav_item"]{
	transition-duration: 0.4s;
}

.kl_basic_navlist li[id*="kl_nav_item"] a:hover {
	background:var(--rocc_secondary_light)!important;
	color:white!important;
}


.kl_wrapper ol.kl_basic_navlist li:after,
.kl_wrapper ul.kl_basic_navlist li:after {
  content: none;
}

@media only screen and (max-width:900px) {
	.kl_wrapper .kl_wrapper ol.kl_basic_navlist li, .kl_wrapper ul.kl_basic_navlist li{
		float:none;
		text-align: center;
		margin-bottom: 10px;
}
	.kl_wrapper .kl_basic_navlist {
		display:block;
		background-color: transparent;
	}
	li[id*="kl_nav_item"]{
		background-color: var(--rocc_secondary);}
	
	.kl_wrapper ul.kl_basic_navlist {
		padding: 0;
	}
	#kl_wrapper_3 #kl_navigation li {
    	width: 100%;
}
	.kl_basic_navlist li[id*="kl_nav_item"] a:hover {
	width:100%;
}
}


/*----Nav bar made 'sticky'----*/
/* Currently targeting only SHELL MS3 course. To apply to all courses, remove the context-course ID */
.context-course_68401 #module_navigation_target {position:sticky;bottom:-2px;}



/*----Video Styling ----*/

.kl_wrapper element.style {
	width: 100%!important;
}
.kl_wrapper .rocc_video {
	background-color:#E4E4E4 ;
	padding: 15px 10px;
}
.kl_wrapper .rocc_video p {
	margin: 0px!important;
}

.kl_wrapper .rocc_video_container iframe {
	width:100%!important;
}

/* Newer, more responsive video styling */

.kl_wrapper .rocc_video_container_16_9 {
	aspect-ratio:16 / 10.1;
}

.kl_wrapper .rocc_video_container_16_9 iframe {
	width:100%!important;
	height:100%!important;
	min-height:319px;
}


/* Make videos full height in the new Cidilabs embed wrapper */
.dp-embed-wrapper {height:100%!important;}

/* Lecture slides link in accordions */
.kl_wrapper .ui-accordion p.rocc-accordion-slides {
	margin: 0;
	text-align: right;
	padding: 0 10px 0 0;
}


/*----Domain Cards----*/

.kl_wrapper .rocc_shadowcard, .kl_wrapper .rocc_connectioncard {
	width: 98%;
	-webkit-box-shadow: 1px 1px 3px 1px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    1px 1px 3px 1px #ccc;  /* Firefox 3.5 - 3.6 */
	box-shadow:         1px 1px 3px 1px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
	margin: 2px;
	position:relative;
}

.kl_wrapper .rocc_shadowcard, .kl_wrapper .rocc_connectioncard_wrapper {
	padding:1.875rem 1.875rem 1.875rem 1.875rem;
}

.kl_wrapper .rocc_connectioncard_topper {background:var(--rocc_primary);color:white;font-size:14px;padding: 5px 17px!important;}

.kl_wrapper .rocc_connectioncard_wrapper iframe.lti-embed {
	aspect-ratio:16 / 9;
}

.kl_wrapper .rocc_connectioncard_wrapper iframe.lti-embed {
	width:100%!important;
	height:100%!important;
	min-height:208px;
}

.kl_wrapper .rocc_shadowcard i {
	font-size: 6.5em;
	line-height: 200px;
}

.kl_wrapper .rocc_shadowcard h2 {
	color: var(--rocc_primary);
	margin: 0 0 1.2rem 0;;
	line-height: 1.8125rem;
}

.kl_wrapper .rocc_shadowcard h3 {
	margin: .4rem 0rem 0rem 0rem;
}

.kl_wrapper .rocc_shadowcard li {
	margin:0 0 13px 0!important;
}

.kl_wrapper .rocc_shadowcard .domain_icon {
	margin-bottom: 0;
}

.kl_wrapper .rocc_shadowcard .bs-col-xs-1 {
	 margin-bottom:4px;
}

.kl_wrapper .rocc_shadowcard .bs-col {
	 padding:0;
}

.kl_wrapper .cp_domain h3 {
	color: var(--domain_cp_color);
}
.kl_wrapper .hs_domain h3 {
	color: var(--domain_hs_color);
}
.kl_wrapper .ss_domain h3 {
	color: var(--domain_ss_color);
}
.kl_wrapper .pl_domain h3 {
	color: var(--domain_pl_color);
}


/* Fix accordion tabs styling */

.ui-accordion-header.ui-state-active a:hover {color:white!important;}

	
/* Image processing */

.kl_wrapper .rocc_crisp img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}


/* Fix Cidilabs interface */

#kl_tools_accordion h4.ui-accordion-header a {
	color: var(--rocc_primary)!important;
}

.kl_wrapper #kl_tools_wrapper .ui-accordion-header a:hover {
	color:white!important;
}


/* Adjust tinymce when editing pages */
#tinymce #kl_wrapper_3 {max-width:885px!important;}


/* Roadmap styling */

.rocc_roadmap .bs-container {
	max-width:554px;	
}

.rocc_roadmap .bs-row {
	margin-left:-55px;	
}

.rocc_roadmap_unit {
	border: 16px solid grey;
    border-radius: 50%;
    width: 100px;
    font-weight: 700;
    font-family: 'MADE Evolve Sans',sans-serif;
    height: 100px;
    padding-top: 14%;
    text-align: center;
    margin: 0 auto;
}

.rocc_roadmap_unit_colour0 {
	border: 16px solid var(--rocc_primary)!important;
}

.rocc_roadmap_unit_colour1 {
	border: 16px solid var(--domain_cp_color)!important;
}

.rocc_roadmap_unit_colour2 {
	border: 16px solid var(--domain_hs_color)!important;
}

.rocc_roadmap_unit_colour3 {
	border: 16px solid var(--domain_ss_color)!important;
}

.rocc_roadmap_unit_colour4 {
	border: 16px solid var(--domain_pl_color)!important;
}

.rocc_roadmap_line {
	height: 100%;
	width: 10px;
	background: var(--rocc_primary);
	position: relative;
	margin: 0 auto;
}

.rocc_roadmap_details {
    padding-bottom:50px;
}

.rocc_roadmap_details h2 {
    font-size: 1.5rem;
    color: var(--rocc_primary);
    border-bottom: 2px solid var(--rocc_primary)!important;
    display: inherit;
}

.rocc_roadmap_details p {
    margin: 0px 0px 10px;
    font-family: 'MADE Evolve Sans';
    font-size: 1.2rem;
	padding-left:40px;
}

.rocc_roadmap_details img {
    width: 30px;
    margin-right: 10px;
    margin-left:-40px;
}


@media only screen and (max-width:826px) {
	
.rocc_roadmap_unit {
	border: none;
    font-weight: 700;
    font-family: 'MADE Evolve Sans',sans-serif;
	text-align: left;
	margin:0;
	padding-top:0;
	height:auto;
}
	
.rocc_roadmap_unit_colour1, .rocc_roadmap_unit_colour2, .rocc_roadmap_unit_colour3, .rocc_roadmap_unit_colour4 {
	border: none!important;
}

.rocc_roadmap_line {
	display:none;
}
	
.rocc_roadmap .bs-row {
	margin-left:-15px;	
}
	
}


/* Big Lightbox (for posters etc) */
.ui-dialog:has(div):has([id*="_content_rocc_zoom"]) {width: 90%!important;left:5%;}
[id*="_content_rocc_zoom"] {width:100%!important;max-width:100%!important;padding:0!important;}
[id*="_content_rocc_zoom"] img {margin:0 auto!important;display:block!important;max-height:90vh;}
a.kl_modal_trigger {display:inline-block;height:100%;margin-top:3px;} /* Fix Firefox link outline on click */


/* Timing estimates (e.g. for Weekly Overview pages) */
.timing-estimates {color:#737373;}


/********************************************************************************
 * START - Styles for sub-modules in lh navigation
*********************************************************************************/
ul.ou-section-tabs-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

a.ou-section-link-sub {
    display: block;
    text-decoration: none;
    color: var(--ic-brand-font-color-dark);
    border-radius: 3px;
    padding: 4px 12px 4px 24px;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
    line-height: 1.3;
}

a.ou-section-link-sub.ou-multiline {
    white-space: normal;
}

a.ou-section-link-sub:hover, a.ou-section-link-sub:focus {
    background:#f2f2f2
}

a.ou-section-link-sub.active{
    /*background-color:var(--ic-brand-primary);*/
    /*font-weight:bold;
    color:#fff*/
    padding-left: 22px;
}
a.ou-section-link-sub.active:focus{
    outline-offset:.0625rem;
    outline-color:var(--ic-link-color)
}
/* a.ou-section-link-sub.active:hover,a.ou-section-link-sub a.active:focus{
    background-color:var(--ic-brand-primary)
}*/

/********************************************************************************
 * END - Styles for sub-modules in lh navigation
*********************************************************************************/


/********************************************************************************
 * START - Styles for progress icons buttons and bar
*********************************************************************************/

.ou-ProgressBar {
  height: 15px;
  border-radius: 3px;
  border: 1px solid #aaa;
  background: #fff;
  overflow: hidden;
}

.ou-ProgressBarBar {
  height: 100%;
  border: 1px solid var(--ic-link-color);
  background-image: linear-gradient(to bottom, var(--ic-link-color), var(--ic-link-color)) !important;
}

div.ou-ColContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.ou-LeftCol, div.ou-RightCol {
    flex:0 0 auto; /* Forces side columns to stay same width */
}

div.ou-CentreCol {
    flex:1 1 auto; /* Lets middle column shrink/grow to available width */
    padding: 0px 1em 0px 1em;
}

.ou-ProgBarContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ou-ProgLeftCol {
    flex:0 0 auto; /* Forces side columns to stay same width */
}

.ou-ProgRightCol {
    flex:1 1 auto; /* Lets middle column shrink/grow to available width */
    padding: 0px 1em 0px 1em;
}

.ou-PreviousTop {
    margin-right: 1em;
}
.ou-NextTop {
    margin-left: 1em;
}

div.ou-progress-icons {
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.ou-progress-items {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li.ou-progress-item {
    float: left;
    margin-left: 6px;
}

li.ou-progress-item.small {
    margin-left: 0px;
}

li.ou-progress-item a {
    color: var(--ic-brand-font-color-dark-lightened-30);
    background-color: #f5f5f5;;
    display: block;
    width: 26px;
    height: 30px;
    padding: 6px 0 0 10px;
    border: 1px solid;
    border-color: #C7CDD1;
    border-radius: 50%;
}
li.ou-progress-item.small a {
    color: var(--ic-brand-font-color-dark-lightened-30);
    background-color: #f5f5f5;;
    width: 100%;
    height: 30px;
    padding: 0px;
    border: 1px solid;
    border-color : rgba(199, 205, 209, 1);
    border-radius: 0%;
}
li.ou-progress-item a:hover {
    background-color: #e8e8e8;
}
li.ou-progress-item a.active {
    color: #fff;
    border: 1px solid var(--ic-brand-primary-darkened-15);
    background-color: var(--ic-brand-primary);
}
li.ou-progress-item a.active:hover {
    background-color: var(--ic-brand-primary-darkened-15);
}

.list-view a.active {
	color:var(--rocc_secondary);
}
	
/********************************************************************************
 * END - Styles for progress icons buttons and bar
*********************************************************************************/



/* Updates since 09-10-23 - to allow easy reconciliation with new stylesheet created by Breeze for new cidilabs */
.kl_wrapper .rocc_major_header.rocc_ahs_header img {
max-width: 11.43rem!important;
float: right;
margin: -1.75rem;
width: calc(100% + 6.75rem);
}

.kl_wrapper .rocc_major_header.rocc_ahs_header .rocc_ahs_banner_sml {display:none;}

@media only screen and (max-width:1069px) {
	.kl_wrapper .rocc_major_header.rocc_ahs_header .rocc_ahs_banner_big {display:none;}
	.kl_wrapper .rocc_major_header.rocc_ahs_header .rocc_ahs_banner_sml {display:inherit;max-width:150px!important;}
}

@media only screen and (max-width:768px) {
	.kl_wrapper .rocc_major_header.rocc_ahs_header .rocc_ahs_banner_big {display:none;}
	.kl_wrapper .rocc_major_header.rocc_ahs_header .rocc_ahs_banner_sml {display:inherit;max-width:90px!important;margin:-1.2rem;}
}