@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body, html {
  font-family: 'Montserrat', sans-serif;
}
h1.course-title, h1.page-title {
  font-family: 'Montserrat', sans-serif;
}
h1.page-title {
  font-size: 2em!important;
}
/**Change color to the module header**/
/*change color to all headers (not possible changing hedaer bcg color for each one)*/
.item-group-condensed .ig-header {
  background-color: transparent;
  border-top: none;
  border-right:none;
}

/*makes the icon of published elements in Modules blue instead of green*/
.ig-published:not(.student-view) .ig-type-icon {
  color: #100976;
}

/* Horizontal Tabs colors*/
.ui-tabs .ui-tabs-nav li {
	font-size: 16px; background-color: #444545; color: #ffffff;
}
.ui-tabs .ui-tabs-nav li a {
	color: #ffffff; 
}
/*Vertical tabs (accordion)*/
summary {
  background-color: #444545;
  color: rgb(255, 255, 255);
  padding: 10px;
  width: max-content;
  border-radius: 3px;
  margin-bottom: 10px;
}
/*Notice box - left or right (valid for all pages)*/
.notice-box-left {
  float:left;
}
.notice-box-right {
  float: right;
}
/*********************MODULES*******************/
/*Module 
Introduction + End*/
#context_module_3, #context_module_16, #context_module_20 {
  background-color: #b6e3ea!important;
}

/**Change the dragging dots for the headr into an icon **/

#context_module_3 .ig-header.header .icon-mini-arrow-down::before, 
#context_module_16 .ig-header.header .icon-mini-arrow-down::before,
#context_module_20 .ig-header.header .icon-mini-arrow-down::before,
#context_module_3 .ig-header.header .icon-mini-arrow-right::before,
#context_module_16 .ig-header.header .icon-mini-arrow-right::before,
#context_module_20 .ig-header.header .icon-mini-arrow-right::before
 {
  content:'';
  background-image: url('/courses/3/files/16/preview');
  background-size: 54px 24px;
  display: inline-block;
  height:24px;
  width: 54px;
}

/**Change color to the lateral thin bar of module list **/
#context_modules #context_module_content_3 .ig-list .icon-mini-arrow-down::before, 
#context_modules #context_module_content_16 .ig-list .icon-mini-arrow-down::before,
#context_modules #context_module_content_20 .ig-list .icon-mini-arrow-down::before {
	background-color: #11465C!important;
}

/*Module 1
Ocean Literacy and Seafood Literacy*/
#context_module_5 {
  background-color: #ffaf87!important;
}
/**Change the dragging dots for the headr into an icon **/

#context_module_5 .ig-header.header .icon-mini-arrow-down::before,
#context_module_5 .ig-header.header .icon-mini-arrow-right::before {
  content:'';
  background-image: url('/courses/3/files/53/preview');
  background-size: 54px 40px;
  display: inline-block;
  height:40px;
  width: 54px;
}
/**Change color to the lateral thin bar of module list **/
#context_modules #context_module_content_5 .ig-list .ig-row.ig-published::before {
	background-color: #FF8E72!important;
}

/*Module 2
Traceability and Seafood Value Chain*/
#context_module_6 {
  background-color: #B7D3F2!important;
}
/**Change the dragging dots for the headr into an icon **/

#context_module_6 .ig-header.header  .icon-mini-arrow-down::before,
#context_module_6 .ig-header.header  .icon-mini-arrow-right::before {
  content:'';
  background-image: url('/courses/3/files/63/preview');
  background-size: 54px 40px;
  display: inline-block;
  height:40px;
  width: 54px;
}
/**Change color to the lateral thin bar of module list **/
#context_modules #context_module_content_6 .ig-list .ig-row.ig-published::before {
	background-color: #AFAFDC!important;
}

/*Module 3
Fisheries*/
#context_module_7 {
  background-color: #64E9EE!important;
}
/**Change the dragging dots for the headr into an icon **/

#context_module_7 .ig-header.header  .icon-mini-arrow-down::before,
#context_module_7 .ig-header.header .icon-mini-arrow-right::before {
  content:'';
  background-image: url('/courses/3/files/62/preview');
  background-size: 54px 40px;
  display: inline-block;
  height:40px;
  width: 54px;
}
#context_modules #context_module_content_7 .ig-list .ig-row.ig-published::before {
	background-color: #093A3E!important;
}

/*Module 4
Aquaculture*/
#context_module_8 {
  background-color: #B4C5E4!important;
}
/**Change the dragging dots for the headr into an icon **/

#context_module_8 .ig-header.header  .icon-mini-arrow-down::before,
#context_module_8 .ig-header.header  .icon-mini-arrow-right::before {
  content:'';
  background-image: url('/courses/3/files/60/preview');
  background-size: 54px 40px;
  display: inline-block;
  height:40px;
  width: 54px;
}
#context_modules #context_module_content_8 .ig-list .ig-row.ig-published::before {
	background-color: #090C9B!important;
}

#context_module_8 .name {
  color:#FFFFFF;
}
#context_module_8 .icon-drag-handle {
  color: #FFFFFF;
}
#context_module_8 .icon-mini-arrow-down {
  color: #FFFFFF;
}
/*Module 5
Responsible consumption and engagement*/
#context_module_9 {
  background-color: #96E8BC!important;
}
/**Change the dragging dots for the headr into an icon **/

#context_module_9 .ig-header.header  .icon-mini-arrow-down::before,
#context_module_9 .ig-header.header  .icon-mini-arrow-right::before {
  content:'';
  background-image: url('/courses/3/files/61/preview');
  background-size: 54px 40px;
  display: inline-block;
  height:40px;
  width: 54px;
}
#context_modules #context_module_content_9 .ig-list .ig-row.ig-published::before {
	background-color: #4B7F52!important;
}


/*****************PAGE HEADERS**************/

/*1. Ocean Literacy*/

/******
*bcg image*
**change course number and image number** 
*******/
.ocean-literacy-bcg {
  background: url('/courses/3/files/53/preview') right top no-repeat , url('/courses/3/files/55/preview'); 
  height: 100%; 
  width: 100%; 
  padding: 100px 10px 30px 10px;
}

.ocean-literacy-heading {
  background-color: #FFAF87; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: xx-large;
  border-radius: 5px; 
  width: max-content;
}
.ocean-literacy-subheading {
  background-color: #FFAF87; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
  width: max-content;
}
span.ocean-literacy-span {
  background-color: #FFAF87; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
}

.ocean-literacy-hr {
  background-color: #FFAF87;
  border: 2px solid #ED6A5E;
  height: 10px; width: 80%; margin: auto;
  border-radius:4px;
  margin-top:20px;
}
.ocean-literacy-notice-container {
  background-color: #ffaf87; 
  width: 400px; 
  height: 450px; 
  margin-right: 50px; 
  border: 1px solid #E8E8E0;
}
.ocean-literacy-notice-container h3 {
  color: #ffffff;
  background-color: #ff8e72; 
  text-align: center; 
  padding: 5px; 
  margin-top: 0px;
}

.ocean-literacy-notice-container .notice-inner-content {
  height: 350px; 
  overflow-x: hidden; 
  overflow-y: auto; 
  padding: 6px 15px; 
  text-align: left;
}

/*Traceability*/

/******
*bcg image*
**change course number and image number** 
*******/
.traceability-bcg {
  background: url('/courses/3/files/63/preview') right top no-repeat , url('/courses/3/files/71/preview'); 
  height: 100%; 
  width: 100%; 
  padding: 100px 10px 30px 10px;
}

.traceability-heading {
  background-color: #B7D3F2; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: xx-large;
  border-radius: 5px; 
  width: max-content;
}
.traceability-subheading {
  background-color: #B7D3F2; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
  width: max-content;
}
span.traceability-span {
  background-color: #B7D3F2; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
}

.traceability-hr {
  background-color: #B7D3F2;
  border: 2px solid #8A84E2;
  height: 10px; width: 80%; margin: auto;
  border-radius:4px;
}

/*Fisheries*/

/******
*bcg image*
**change course number and image number** 
*******/
.fisheries-bcg {
  background: url('/courses/3/files/62/preview') right top no-repeat , url('/courses/3/files/70/preview'); 
  height: 100%; 
  width: 100%; 
  padding: 100px 10px 30px 10px;
}

.fisheries-heading {
  background-color: #3AAFB9; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: xx-large;
  border-radius: 5px; 
  width: max-content;
}
.fisheries-subheading {
  background-color: #3AAFB9; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
  width: max-content;
}
span.fisheries-span {
  background-color: #3AAFB9; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
}

.fisheries-hr {
  background-color: #64E9EE;
  border: 2px solid #093A3E;
  height: 10px; width: 80%; margin: auto;
  border-radius:4px;
}

/*Aquaculture*/

/******
*bcg image*
**change course number and image number** 
*******/
.aquaculture-bcg {
  /*background: url('/courses/3/files/60/preview') right top no-repeat , url('/courses/3/files/68/preview'); */
  background: url('/courses/3/files/60/preview') right top no-repeat , url('/courses/3/files/202/preview');
  height: 100%; 
  width: 100%; 
  padding: 100px 10px 30px 10px;
}

.aquaculture-heading {
  background-color: #B4C5E4; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: xx-large;
  border-radius: 5px; 
  width: max-content;
}
.aquaculture-subheading {
  background-color: #B4C5E4; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
  width: max-content;
}
span.aquaculture-span {
  background-color: #B4C5E4; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
}

.aquaculture-hr {
  background-color: #3D52D5;
  border: 2px solid #090C9B;
  height: 10px; width: 80%; margin: auto;
  border-radius:4px;
}

/*Engagement*/

/******
*bcg image*
**change course number and image number** 
*******/
.engagement-bcg {
  background: url('/courses/3/files/61/preview') right top no-repeat , url('/courses/3/files/69/preview'); 
  height: 100%; 
  width: 100%; 
  padding: 100px 10px 30px 10px;
}

.engagement-heading {
  background-color: #96E8BC; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: xx-large;
  border-radius: 5px; 
  width: max-content;
}
.engagement-subheading {
  background-color: #96E8BC; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
  width: max-content;
}
span.engagement-span {
  background-color: #96E8BC; 
  padding: 10px;
  text-align: left; 
  color: #ffffff; 
  font-size: large;
  border-radius: 5px; 
}

.engagement-hr {
  background-color: #7DD181;
  border: 2px solid #4B7F52;
  height: 10px; width: 80%; margin: auto;
  border-radius:4px;
}