/* h1 gradient with shadow */


h1 {

background: #333333; /* Fallback solid color */
    background: linear-gradient(45deg, rgba(0,0,0,1) 76%, rgba(230, 0, 91, 1) 100%);
    font-family: Helvetica, sans-serif;    
    padding: 1.74em 0.55em 0.5em;
    font-weight: 600;
    margin: 0px 0 30px;
    border-radius: 6px;
    -webkit-box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075),
        0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075),
        0 16px 16px hsl(0deg 0% 0% / 0.075);
    box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075),
        0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075),
        0 16px 16px hsl(0deg 0% 0% / 0.075);
}

/* time to complete */

p.time-to-complete {
background-color: #e6005b;

}
.time-to-complete {
    -webkit-box-shadow:
    0 1px 1px hsl(0deg 0% 0% / 0.075),
    0 2px 2px hsl(0deg 0% 0% / 0.075),
    0 4px 4px hsl(0deg 0% 0% / 0.075),
    0 8px 8px hsl(0deg 0% 0% / 0.075),
    0 16px 16px hsl(0deg 0% 0% / 0.075);
    box-shadow:
    0 1px 1px hsl(0deg 0% 0% / 0.075),
    0 2px 2px hsl(0deg 0% 0% / 0.075),
    0 4px 4px hsl(0deg 0% 0% / 0.075),
    0 8px 8px hsl(0deg 0% 0% / 0.075),
    0 16px 16px hsl(0deg 0% 0% / 0.075);
}



/*boxes - lists and headings*/
.info ul {
    margin-left: 2em;
}

.panel ul {
    margin-left: 2em;
}

.note ul {
    margin-left: 2em;
}

.info h2,
.panel h2,
.note h2,
.info h3,
.panel h3,  
.note h3 {
    margin: 0.2em 0em 0.5em;
    font-size:1.4em;
    border:0;
    font-weight:400;
}


/* full width images*/

.full-width {
  margin:0 !important;
  max-width:100% !important;
}

/* image with gray border*/

.image-border {
  border: 1px solid rgb(211, 211, 211);
  border-radius: 6px;
  margin-bottom: 0 !important;
}


/* Note grey box with thick pink line on rhs*/

.note {
    background-color: #efefef;
    padding: 0.5em 1em;
    border-radius: 5px;
    border-left: 10px solid #9e043d;
border-right: 0px solid #9e043d;
border-top: 0px solid #9e043d;
border-bottom: 0px solid #9e043d;
box-shadow: 4px 4px 10px rgba(128, 128, 128, 0.5);

}

.note ul {
    list-style-type: disc; /* Or any other list style you prefer */
    padding-left: 20px; /* Adjust the padding as needed */
}

.note li {
    margin-bottom: 1em; /* Adjust the margin to control the spacing between list items */
    line-height: 1.8; /* Adjust the line-height to control the spacing within each list item */

}

/* module icons*/

.outcomes::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0eb";
    font-weight: 900;
    margin: 0 .6em .4em 0;
    font-size: 30px;
    height: 30px;
    vertical-align: middle;
    color: var(--activity-icon);
}

.important::before {
    font-family: "Font Awesome 5 Free";
    content: "\f06a";
    font-weight: 900;
    margin: 0 .6em .4em 0;
    font-size: 30px;
    height: 30px;
    vertical-align: middle;
    color: var(--activity-icon);
}

.activity::before {
    font-family: "Font Awesome 5 Free";
    content: "\f1d8";
    font-weight: 900;
    margin: 0 .6em .4em 0;
    font-size: 30px;
    height: 30px;
    vertical-align: middle;
    color: var(--activity-icon);

}

.reflection::before {
    font-family: "Font Awesome 5 Free";
    content: "\f013";
    font-weight: 900;
    margin: 0 .6em .4em 0;
    font-size: 30px;
    height: 30px;
    vertical-align: middle;
    color: var(--activity-icon);

}

.handshake::before {
    font-family: "Font Awesome 5 Free";
    content: "\f2b5";
    font-weight: 900;
    margin: 0 .6em .4em 0;
    font-size: 30px;
    height: 30px;
    vertical-align: middle;
    color: var(--activity-icon);

}

/*GEMBA styles - to amend*/.think-point::before,
.explore::before,
.journal::before,
.understanding::before {
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    margin:0 .4em .4em 0;
    font-size:30px;
    vertical-align:middle;
    color:var(--activity-icon);
}

div.info h3:first-child,
div.panel h3:first-child,
div.alert h3:first-child {
    margin: 1em 0 0.5em;
}

div.info h3:last-child,
div.panel h3:last-child,
div.alert h3:last-child {
    margin:3em 0 2em;
}

div.info h3,
div.panel h3,
div.alert h3 {
    margin: 3em 0 0.5em;
}

.info,.panel{
    margin:3em 0;
    padding:1.8em 2.6em;
    border-radius:6px;
}

.info{
    border:1px solid var(--info-border);
}

.panel{
    border:1px solid var(--panel-border);
}

.info h3,.panel h3 {
    margin:.2em 0 .5em;
}

.alert {
    padding:2.4em 2.6em;
}

.think-point::before {
    content:"\f0eb";
    height:45px;
}

.task::before {
    content:"\f1d8";
}

.explore::before {
    content:"\f14e";
}

.journal::before {
    height:52px;
    content:"\f12e";
}

.understanding::before {
    content: "\f080";
    height: 60px;
}


.info ul {
    margin-left: 2em;
}

.panel ul {
    margin-left: 2em;
}

.info h2,
.panel h2,
.info h3,
.panel h3 {
    margin: 0.2em 0em 0.5em;
    font-size:1.4em;
    border:0;
    font-weight:400;
}

.highlighter {
    background-color: #EFEFEF; /* Light grey background */
    padding: 0.5em 1em; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    border-left: 5px solid #e6005b; /* Thick pink left border */
}

.log::before {
    font-family: "Font Awesome 5 Free";
    content: "\f46d";
    font-weight: 900;
    margin: 0 .6em .4em 0;
    font-size: 30px;
    height: 30px;
    vertical-align: middle;
    color: var(--activity-icon);
}

/* task grey box with thick pink line on rhs start*/

.task {
    background-color: #efefef;
    padding: 0.5em 1em;
    border-radius: 5px;
    border-left: 10px solid #9e043d;
border-right: 0px solid #9e043d;
border-top: 0px solid #9e043d;
border-bottom: 0px solid #9e043d;
box-shadow: 4px 4px 10px rgba(128, 128, 128, 0.5);

}

.task ul {
    list-style-type: disc; /* Or any other list style you prefer */
    padding-left: 20px; /* Adjust the padding as needed */
}

.task li {
    margin-bottom: 1em; /* Adjust the margin to control the spacing between list items */
    line-height: 1.8; /* Adjust the line-height to control the spacing within each list item */

}