/* IMPORTANT - Always update the timestamp after making any changes
/* Updated on [24/10/2025]

/*********************************************************************/
/****** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION ****************/
/*********************************************************************/

/* Import statements need to be at the top of your CSS file */
/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
    --dt-color-primary: #0374B5;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #0374B5;
    --dt-color-secondary: #575E6B;
    --dt-color-secondary-contrast: #FFFFFF;
    --dt-color-secondary-dark-text: #575E6B;
    --dt-color-accent: #014C8E;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #014C8E;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
}

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



/*****************************************************/
/****** BEGIN Pamoja Custom CSS v2025 ****************/
/*****************************************************/

/* Global CSS */
@media screen and (min-width: 1184px) {
	.pamoja_banner > img {
		mask-image: linear-gradient(to left, rgba(255, 255, 255, 0) 40%, #f6f9fc 100%);
		height: 150px;
		width: 100%;
		object-fit: cover;
	}

	.pamoja_banner_title > h2 {
		text-align: right;
		font-size: 26pt;
	}

	.pamoja_banner_title > p {
		text-align: right;
		font-size: 14pt;
	}

	.enhanceable_content {
		position: relative;
		margin-top: -64px!important;
		z-index: 1;
	}

	.pamoja_container_width {
		width: 75%!important;
		max-width: 900px!important;
	}
}

@media screen and (max-width: 1183px) {
	.pamoja_banner > img {
		mask-image: linear-gradient(to left, rgba(255, 255, 255, 0) 70%, #f6f9fc 125%);
		height: 150px;
		width: 100%;
		object-fit: cover;
	}

	.pamoja_banner_title > h2 {
		text-align: right;
		font-size: 24pt;
	}

	.pamoja_banner_title > p {
		text-align: right;
		font-size: 14pt;
	}

	.enhanceable_content {
		position: relative;
		margin-top: -11px!important;
		z-index: 1;
	}

	.pamoja_container_width {
		width: 100%!important;
		max-width: 1183px!important;
	}
}

@media screen and (max-width: 767px) {
	.pamoja_banner > img {
		mask-image: linear-gradient(to left, rgba(255, 255, 255, 0) 100%, #f6f9fc 100%);
		height: 150px;
		width: 100%;
		object-fit: cover;
	}
	
	.pamoja_banner_title {
		align-items: center;
	}

	.pamoja_banner_title > h2 {
		text-align: center;
		font-size: 22pt;
	}

	.pamoja_banner_title > p {
		text-align: center;
		font-size: 14pt;
	}

	.pamoja_container_width {
		width: 100%!important;
		max-width: 767px!important;
	}
}

.context_module_sub_header > div {
	background: #eef7ff!important;
}

.pamoja_m-b-0 {
	margin-bottom: 0px;
}

.pamoja_p-b-0 {
	padding-bottom: 0px;
}

.pamoja_p-l-8 {
	padding-left: 10px;
}

.pamoja_p-r-8 {
	padding-right: 10px;
}


/* Use for dashboard page */
/* * * * */
#DashboardOptionsMenu_Container {
	display: none!important; /* Hide the 3-dot button for changing the dashboard view */
}

#right-side .Sidebar__TodoListContainer .css-n5p8o3-view {
	display: none!important; /* Hide the Show All button. This will switch the dashboard view from card to list */
}

.ic-DashboardCard__header_hero {
	opacity: 0!important; /* Remove colour overlay */
}

.ic-DashboardCard__header-button-bg {
	opacity: 1!important;
}


/* Use for home page */
/* * * * */
#announcements_on_home_page {
	padding: 0 12px 0 12px; /* Add left/right padding to the "Recent announcements" on the Home Page */
}

#announcements_on_home_page > span > h1 {
	font-size: calc(1.3rem + 0.6vw)!important; /* Change the font-size of the "Recent announcements" on the Home Page */
}

#announcements_on_home_page .ic-announcement-row {
	box-shadow: none!important; /* Remove the horizontal lines of the "Recent announcements" on the Home Page */
}

#course_home_content > #wiki_page_show > .header-bar-outer-container {
	display: none!important; /* Hide the empty container at the top of the Home Page */
}

.header-bar.page-toolbar.as-course-home {
	display: none!important; /* Hide the page title on the Home Page */
}

.pages.show.home .show-content {
    padding: 25px 0 0 0!important; /* Remove the padding on the Home Page */
}

#dp-wrapper, .dp-wrapper {
	max-width: none!important; /* Override the max-width on the Home Page */
}

.pamoja_home-banner_container > img {
	object-fit: cover;
    height: 300px;
}

.pamoja_home_button {
	font-size: 13pt!important; /* Set the font size for course navigation buttons on the Home Page */
}

.pamoja_license_f-10 {
	font-size: 10pt;
}

.pamoja_license_img {
	width: 75px;
	height: auto;
	top: -7px;
	position: relative;
}


/* Use for page banner */
/* * * * */
.pamoja_page_container {
	margin: 0px 12px!important;
}

.pamoja_banner {
	height: 150px;
	background-color: #f6f9fc;
}

.pamoja_home-banner_container > img {
	object-fit: cover;
    height: 300px;
}

.pamoja_banner_container > img {
	object-fit: cover;
    height: 100%;
}

.pamoja_banner_title {
	position: absolute;
	display: flex;
    justify-content: center;
    height: 150px;
	padding: 0!important;
}

.pamoja_banner_title > h2 {
	font-weight: bold;
	padding-bottom: 0px;
	padding-left: 10px;
}

.pamoja_banner_title > p {
	margin-top: 0px;
}


/* Use for student grade page */
/* * * * */
.assignment_score {
	pointer-events: none; /* Remove the "Click to test a different score" function */
}

#student-grades-final {
	display: none;
}


/* Use for tabs */
/* * * * */
.nav-tabs {
	margin-left: 7%!important;
}

.dp-tabs-underline > .nav-tabs > .nav-item {
	background-color: #fff;
	margin-right: 15px!important;
}

 .nav-tabs > li.nav-item > a.dp-panel-heading {
	/*font-size: 1.5em;*/
	font-size: 1.25rem;
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
	padding-top: 13px!important;
	padding-bottom: 10px!important;
	text-decoration: none!important;
}

/* * LEGACY * */
.pamoja_tab_container {
	margin-left: 7%!important;
}

.pamoja_tab_container > li {
	margin-right: 10px!important;
}

.pamoja_tab_container > li > h3 > a {
	padding-bottom: 15px!important;
	text-decoration: none!important;
}


/* Use for Pamoja container and interactives elements */
/* * * * */
.dp-content-block ul {
	margin: .75rem 0 .75rem 1.563rem!important;
}

.tab-content {
	border: 0px!important;
	padding: 30px 8%!important;
}

.tab-content h3, .tab-content h4, .dp-callout.card h4 {
	color: #3598db;
}

.tab-content p, .tab-content p > span, .tab-content ul, .tab-content ol, .tab-content table {
	font-size: 13pt!important; /* Set the font size for span element */
}

figcaption {
	font-size: 12pt!important;
}

.pamoja_container {
	border: 0px!important;
	padding: 30px 8%!important;
}


/* Content box element */
.pamoja_box_container {
  background-color: #f7f7f7;
  padding: 2.5%;
	/*margin-top: 10px;*/
	/*margin-bottom: 10px;*/
	/*padding: 1.5% 2.5%;*/
}

.pamoja_box_container > figure {
	margin-bottom: 0;
}

.pamoja_h5p_container {
  background-color: #fefefe;
  padding: 2.5%;
  border: 1px solid #f6f9fc;
}

/* Interactives elements */
.pamoja_content_container {
	display: flex;
	padding: 20px 0;
	text-align: center;
}

.pamoja_container_logo {
	background-color: #575e6b;
	display: flex;
    justify-content: center;
    align-items: center;
    min-width: 75px;
}

.pamoja_container_header {
	background-color: #f6f9fc;
	padding: 12px 20px;
	margin: 0px;
	text-align: left;
	width: 90%;
}

/* Accoirdion element */
.dp-panels-wrapper > .dp-panel-heading, .dp-accordion-plus > .dp-panel-heading {
	margin-top: 15px!important;
}

.dp-wrapper .dp-tabs-buttons-vertical.dp-tab-flex > .nav-tabs,
.dp-wrapper .dp-tabs-buttons > .nav-tabs {
	margin-left: 0 !important;
}

.dp-wrapper .dp-tabs-buttons-vertical > .nav-tabs li {
	padding-bottom: 15px;
}

.dp-wrapper .dp-tabs-buttons-vertical.dp-tab-flex > .tab-content {
	padding: 5px 0 5px 50px!important;
}

.dp-wrapper .dp-tabs-buttons > .tab-content {
	padding: 5px 0px !important;
}

.dp-wrapper .dp-tabs-buttons > .nav-tabs > .nav-item {
	padding-right: 5px;
}

.dp-panels-wrapper > div.dp-panel-content, .dp-accordion-plus > div.dp-panel-content, .pamoja_details > div, .pamoja_details_checkanswer > div {
	background-color: #ffffff;
	border-right: 1px solid #c7cdd1!important;
	border-left: 1px solid #c7cdd1!important;
	border-bottom: 1px solid #c7cdd1!important;
	padding: 5px 25px!important;
}

.dp-panel-heading > a.dp-panel-toggler, .pamoja_details > summary, .pamoja_details_checkanswer > summary {
	cursor: pointer!important;
	border: 1px solid #c7cdd1!important;
	padding: 15px!important;
}

.pamoja_details > summary > strong > span, .pamoja_details_checkanswer > summary > strong > span {
	margin-left: 10px!important;
}

.pamoja_details > summary {
	background-color: #E8EAEC!important;
}

.pamoja_details_checkanswer > summary {
	background-color: #f6f9fc!important;
}

/* List element */
.dp-wrapper ol, .dp-wrapper ul {
	padding-left: 4px;
}

/* Image element */
.pamoja_img_container {
	display: block;
	/*margin-left: auto;*/
	margin-right: auto;
}

/* Video element */
.pamoja_video_iframe_container {
	/*margin-left: auto;
	margin-right: auto;*/
	width: 100%;
	/* max-width: 1280px;*/
}

.pamoja_video_iframe_container > div.dp-embed-wrapper {
	position: relative!important;
	width: 100%!important;
	overflow: hidden!important;
	padding-top: 56.25%!important;
}

.pamoja_video_iframe_container iframe {
	position: absolute;
	border: none;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 100%px;
}

/* Horizontal line */
hr {
	color: #c7cdd1!important;
}

hr.dp-hr-solid-light {
  margin-bottom: 0!important;
}


/* Blockquote element */
blockquote {
	border-left: 5px solid #575e6b!important;
	margin: 0 0 10px!important;
	padding: 0 0 0 20px!important;

}

blockquote h4 {
	color: #575e6b!important;
}

blockquote p {
	font-weight: normal!important;
}

/* Table element */
.dp-content-block table {
	border: 1px solid #c7cdd1;
	border-collapse: collapse;
	margin-bottom: 15px;
	width: 100%;
	height: 66px!important;
}

.dp-content-block table > thead > tr {
	background-color: #e8eaec;
}

.dp-content-block th.vertical_border, .dp-content-block td.vertical_border {
	border: 1px solid #c7cdd1!important;
}

.dp-content-block th, .dp-content-block td {
	border: 0;
	padding: 15px!important;
	text-align: left;
	border-bottom: 1px solid #c7cdd1;
	height: 33px!important;
}

.dp-content-block table > tbody > tr:hover {
	background-color: #f6f9fc;
}

/* Callout element */
.pamoja_callout {
	border-left: 6px solid!important;
	border-left-color: #575e6b!important;
	padding: 2%;
}

/* Code box element */
.pamoja_box_container code, .pamoja_box_container pre {
	color: #ccc!important;
	background: none!important;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace!important;
	font-size: 1em!important;
	text-align: left!important;
	white-space: pre!important;
	word-spacing: normal!important;
	word-break: normal!important;
	word-wrap: normal!important;
	line-height: 1.5!important;

	-moz-tab-size: 4!important;
	-o-tab-size: 4!important;
	tab-size: 4!important;

	-webkit-hyphens: none!important;
	-moz-hyphens: none!important;
	-ms-hyphens: none!important;
	hyphens: none!important;
}

/* Code blocks */
.pamoja_box_container pre {
	padding: 1em!important;
	margin: .5em 0!important;
	overflow: auto!important;
	max-height: 500px;
}

:not(pre) > .pamoja_box_container code, .pamoja_box_container pre {
	background: #2d2d2d!important;;
}

/*****************************************************/
/************* END Pamoja Custom CSS *****************/
/*****************************************************/