/*
CSS Document for Inclusion Outreach Custom Styles 
Built by Open School BC, November 2021
Base styling is Bootstrap 4.3.1 (CDN hosted) 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
*/
/* || Contents 
1. General Styles - default styling for the site
2. Utilities - applied to multiple elements
3. Sitewide - layout, header, nav etc.
4. Callouts and Tabbed Styles
5. Module-specific Styles
6. Activities and Lists 
7. Media Queries
*/
/* || 1. General Styles */
/* to do remove unneeded pcmp styles */

html {
    --lh: 1.4rem;
    line-height: var(--lh);
    font-size: 16px;
}

/* 
body {
    font-family: "Arial", sans-serif;
    color: #414042;
    font-size: 1rem;
} */

h1,
.h1 {
    /* font-size: 2.25rem;
    font-family: "Arial", sans-serif;
    font-weight: 700; */

    font-size: 200%;
    font-weight: 600;
    color: #FFF;

}

*/ h2,
.h2 {
    font-size: 1.75rem;
    font-family: "Arial", sans-serif;
    font-weight: 700;
    color: var(--main-colour, #414042);
}

h3,
.h3 {
    font-size: 1.5rem;
    font-family: "Arial", sans-serif;
    font-weight: 700;
    color: var(--main-colour, #414042);
}

h4,
.h4 {
    font-size: 1.25rem;
    font-family: "Arial", sans-serif;
    font-weight: 700;
    color: var(--main-colour, #414042);
}

h5,
.h5 {
    font-size: 1.125rem;
    font-family: "Arial", sans-serif;
    font-weight: 700;
}

h6,
.h6 {
    font-size: 1rem;
    font-family: "Arial", sans-serif;
    font-weight: 700;
}

p {
    font-size: 1rem;
}

a {
    color: #0071BC;
    text-decoration: none;
}

a :hover {
    color: #1879bb;
    text-decoration: underline;
}

/*cancel default bootstrap styling for a tags that aren't href */
a:not([href]):not([tabindex]) {
    color: #1879bb;
    text-decoration: none;
    cursor: pointer;
}

a.definition {
    color: #833978;
    font-weight: bold;
    cursor: pointer;
    outline: none;
}

a.definition :hover {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-position: under;
}

.fa,
.fas {
    line-height: inherit;
}

.fa-arrow-right {
    margin-left: 0.5em;
}

.fa-arrow-left {
    margin-right: 0.5em;
}

.fa-2x {
    line-height: 1.15;
}

.popover {
    max-width: 600px;
}

.icon {
    width: 12vw;
    margin-right: 2em;
}

.video-holder {
    width: 80%;
    margin: 2.5rem auto 0 auto;
}

p+ul,
p+ol {
    margin-top: -0.7rem;
}

#bodywrapper li+li {
    margin-top: 0.5rem;
}

.card-text {
    font-size: 0.9em;
}

/* correct issue with Safari stripping button styles */
[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: none;
}

/* || 2. Utilities - applied to multiple elements */
.sm-icon {
    max-width: 8vw;
    min-width: 6vw;
}

.mini-icon {
    width: 2rem;
    margin-right: 0.5em;
}

.btn-block {
    text-align: left;
}

.btn {
    font-size: 0.9rem;
    border-radius: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

.toc {
    display: none;
}

.graphic {
    width: 75%;
    display: block;
    margin: 1.5rem auto;
}

.w-20 {
    width: 20%;
}

.w-16 {
    width: 16%;
}

.border-top-5 {
    border-top: 5px solid;
}

/* || 3. Sitewide - layout, header, nav etc. */
.skip-link {
    background: #004b8d;
    color: #fff;
    font-weight: 700;
    left: 50%;
    padding: 4px;
    position: absolute;
    transform: translateY(-105%);
    transition: transform 0.3s;
}

.skip-link:focus {
    transform: translateY(0%);
}

/* .navbar-toggler {
    margin-left: auto;
}

.navbar {
    padding: 1rem 5%;
    margin-left: 3rem;
    margin-right: 3rem;
}

.navbar-nav .nav-item {
    margin-left: auto;
    margin-right: auto;
}

.nav-item:hover {
    color: #1879bb;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, .6);
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active {
    color: rgba(0, 0, 0, 1);
} */

.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: #666666;
    font-weight: bold;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #0071BC;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.btn.btn-nav {
    background-color: #666666;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.9rem;
    border-color: #666666;
}

.btn.btn-nav:hover,
.btn.btn-nav .nav-title:hover {
    background-color: #a9a9a9;
    border-color: #a9a9a9;
    text-decoration: none;
}

.accordion .card-header.sidenav {
    background-color: var(--tint50);
    color: #000000;
    list-style: none;
    padding: 0.7rem 1rem;
    margin-bottom: 0;
}

.sidebar .card {
    background-color: #ffffff;
}

.btn-sidenav {
    color: #000000;
    display: block;
    width: 100%;
    font-weight: 700;
    text-align: left;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border: 1px solid transparent;
    padding: 0px;
    background-color: transparent;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    --max-lines: 1;
    /*the next lines cut the button off at one line and add ellipsis */
    position: relative;
    max-height: calc(var(--lh) * var(--max-lines));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.btn-sidenav:focus {
    outline: none;
}

li.sidenav.active {
    color: #004b8d;
    font-weight: 700;
}

.sidenav.active a {
    color: #004b8d;
    font-weight: 700;
}

.accordion .card-header.sidenav:focus {
    outline-color: white;
    outline-style: auto;
    outline-width: 1px;
    outline-offset: -4px;
}

li.sidenav.active::before {
    font-family: "Font Awesome 5 Free";
    content: "\f061";
    padding: 0 1rem 0 0;
    margin-left: -2rem;
    color: #004b8d;
}

ul.sidenav {
    padding-left: 30px;
    margin-bottom: 0;
    list-style: none;
    line-height: 1.3;
}

[data-toggle="collapse"] .fas:before {
    font-family: "Font Awesome 5 Free";
    content: "\f068";
}

[data-toggle="collapse"].collapsed .fas:before {
    font-family: "Font Awesome 5 Free";
    content: "\f067";
}

.card-body .sidenav {
    font-size: 0.8rem;
}

.section-wide {
    background-color: #f8f8f8;
    padding: 3rem 10vw;
    margin: 1.5rem 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.section-narrow {
    width: 80vw;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 0;
}

.row {
    margin-bottom: 1rem;
}

.row:last-of-type {
    margin-bottom: 0;
}

#bodywrapper {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

#footer-nav {
    display: inline-block;
    width: 100%;
    padding: 1rem 0;
}

a.prev:before {
    font-family: "Font Awesome 5 Free";
    content: "\f060";
    padding-right: 0.75em;
}

a.next:after {
    font-family: "Font Awesome 5 Free";
    content: "\f061";
    padding-left: 0.75em;
}

#footer {
    width: 100%;
    display: inline-block;
}

footer {
    padding: 1rem;
    background-color: #CCCCCC;
}

#back-to-top {
    position: fixed;
    bottom: 1rem;
    right: 2vw;
    display: none;
    margin: 2rem 0;
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.home {
    border-top: #2EAADF 0.25rem solid;
}

a.back-to-top :hover {
    text-decoration: none;
}

#jumplist {
    position: sticky;
    line-height: 1.1em;
    margin-top: 0;
}

#jumplist .nav-item {
    border-radius: 0.25rem;
    text-align: center;
}

#glossaryList .row:nth-of-type(odd) {
    background-color: var(--tint90);
}

.banner {
    padding: 1.5rem;
    background-image: url(/inclusionoutreach/img/leaf-left.svg), url(/inclusionoutreach/img/leaf-left180.svg);
    background-position: left 4px, right -4px;
    background-color: var(--main-colour);
    text-align: center;
    color: #ffffff;
    background-repeat: no-repeat;
}

.note {
    background-color: yellow;
    padding: 1rem;
}

h2+ol,
h2+ul,
h3+ol,
h3+ul,
h4+ol,
h4+ul {
    margin-top: 1rem;
}

p.quote {
    width: 90%;
    margin: 2rem auto;
    border-left: #333 solid 1px;
    padding-left: 1rem;
}

p.attribution {
    text-align: right;
    margin-top: -1rem;
    font-size: 0.8rem;
    width: 90%;
}

p.attribution::before {
    content: '\2014';
}

table.table-bordered.theme {
    margin: 2rem 0;
    border: 2px solid var(--main-colour);
}

table {
    font-size: 0.9rem;
    line-height: 1.25;
}

table.table-bordered.theme thead {
    background-color: var(--main-colour);
    color: #ffffff;
}

table.table-bordered.theme thead th {
    vertical-align: bottom;
    border-color: #ffffff;
    border-bottom: 2px solid var(--main-colour);
}

table.table-bordered.theme thead th:first-child {
    border-left: none;
}

table.table-bordered.theme thead th:last-child {

    border-right: none;
}

th.rotate,
.rotate {
    writing-mode: vertical-rl;
    -ms-writing-mode: rl-bt;
    -webkit-writing-mode: vertical-rl;
}

table.table-bordered.theme tbody {
    background-color: var(--tint90);
}

table.table-bordered.theme tbody th {
    background-color: var(--tint50);

}

table.table-bordered.theme td,
table.table-bordered.theme th {
    border: 1px solid var(--main-colour);
    padding: 0.5rem;
}

table input,
table .form-check-input {
    margin: 0;
}

table .form-check {
    padding: 0;
    margin: 0;
}

.text-hide {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 1000ms, opacity 1000ms;
}

.text-show {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 1000ms;
}

/* TO DO replace fa-info links with p.info */
p.info::before {
    font-family: "Font Awesome 5 Free";
    content: "\f05a";
    line-height: 1;
    font-size: 1.5rem;
    font-weight: 900;
    margin-left: -2rem;
    display: inline-block;
    margin-right: 0.5rem;
    position: relative;
    top: 3px;
}

p.info {
    margin-left: 2rem;
}

.card img {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img {
    max-width: 100%;
}

p.caption {
    font-size: small;
    margin-top: -0.75rem;
    margin-bottom: 1.25rem;
    text-align: center;
}


caption {
    font-size: 1.5rem;
    font-family: "Arial", sans-serif;
    font-weight: 700;
    color: var(--main-colour, #414042);
    text-align: left;
    caption-side: top;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: right;
    justify-content: right;
    width: 15%;
    color: #fff;
    text-align: center;
    opacity: .5;
    transition: opacity .15s ease;
    margin-right: 2%;
}

.carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: left;
    justify-content: left;
    width: 15%;
    color: #fff;
    text-align: center;
    opacity: .5;
    transition: opacity .15s ease;
    margin-left: 2%;
}

/* || 4. Callouts and Tabbed Styles */
/* callouts also needs .card class to work, include .card-body for padding */
.card p,
.card ol,
.card ul {
    font-size: 0.9rem;
}

.card.thinkabout {
    border-width: 4px;
    border-radius: 20px;
    border-color: #833978;
    padding: 1rem;
    margin: 2rem 0;
    background-color: #ffffff;
    color: #414042;
    flex-direction: row;
}

.card.thinkabout img {
    width: 10vw;
    display: inline;
    margin-right: 2rem;
    align-self: flex-start;
}

.card.thinkabout .btn,
.card.callout .btn {
    background-color: #833978;
    color: #ffffff;
}

.card.callout .card-header {
    background-color: #833978;
    color: #ffffff;
    font-weight: 700;
    border-radius: 0px;
    border: none;
}

.card.callout .card-header h4 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0;
    font-size: 1.15rem;
}

.card.callout {
    border: medium solid #833978;
    background-color: #ffffff;
    color: #414042;
}

.card.callout.theme .card-header {
    background-color: var(--main-colour);
    color: #ffffff;
    font-weight: 700;
    border-radius: 0px;
    border: none;
}

.card.callout.theme .card-header h4 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0;
    font-size: 1.15rem;
}

.card.callout.theme {
    border: medium solid var(--main-colour);
    background-color: #ffffff;
    color: #414042;
}

.card.ofpcallout {
    background-color: #ffffff;
    padding: 2rem;
    margin: 1.5rem 0;
    color: #414042;
}

.card.ofpcallout .btn,
.accordion.main .btn,
.tab-pane .btn {
    background-color: var(--main-colour);
    color: #ffffff;
}

.card.ofpcallout img.icon {
    max-width: 100%;
    display: inline;
    margin-right: 2rem;
    align-self: flex-start;
}

.card p:last-child {
    margin-bottom: 0 !important;
}

.accordion .card-header {
    background-color: var(--tint50);
    color: #000000;
    border-bottom: 0;
}

.accordion.main .card-header {
    background-color: var(--main-colour);
    color: #ffffff;
    border-bottom: 0;
}

.accordion .card-header a {
    color: #000000;
}

.accordion.main .card-header a {
    color: #FFFFFF;
}

.accordion .card-header a:hover {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}

.accordion.main .card-header a:hover {
    color: var(--tint90);
    text-decoration: none;
    cursor: pointer;
}

.accordion .card-title {
    position: relative;
    display: block;
    margin-bottom: 0;
    font-size: 1.25rem;
}

.accordion.main .card-title {
    font-weight: 600;
}

.accordion .card-title[aria-expanded="false"]::before,
.accordion .btn-sidenav[aria-expanded="false"]::before {
    content: "\f067";
    font-family: "FontAwesome";
    float: right;
    margin-left: 0.5rem;
}

.accordion .card-title[aria-expanded="true"]::before,
.accordion .btn-sidenav[aria-expanded="true"]::before {
    content: "\f068";
    font-family: "FontAwesome";
    float: right;
    margin-left: 0.5rem;
}

.accordion .card-body {
    background-color: #ffffff;
    color: #414042;
}

.accordion.main p,
.accordion.main ul,
.accordion.main ol {
    font-size: 1rem;
}

.accordion.main table ul,
.accordion.main table ol {
    font-size: 0.9rem;
    padding-left: 2rem;
    margin: 0.5rem 0;
}

.accordion.main .card.callout .card-header {
    background-color: #833978;
}


.nav-tabs,
.nav-pills {
    margin: 0;
    padding: 0;
    border: none;
}

.nav-tabs .nav-link {
    color: #ffffff;
    font-weight: bold;
    background-color: var(--main-colour);
    border-radius: .25rem .25rem 0 0;
    border: none;
    margin-right: .18rem;
    padding: 0.68rem 1.18rem;
    box-shadow: inset 0.18rem 0 0 0 var(--main-colour), inset -0.18rem 0 0 0 var(--main-colour), inset 0 0.18rem 0 0 var(--main-colour), inset 0 -0.18rem 0 0 transparent;
    --max-lines: 2.5;
    position: relative;
    max-height: calc(var(--lh) * var(--max-lines));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-tabs .nav-link.active {
    background-color: #ffffff;
    color: var(--main-colour);
    margin-bottom: -2px;
    padding-bottom: 0.82rem;
    box-shadow: inset 0.18rem 0 0 0 var(--main-colour), inset -0.18rem 0 0 0 var(--main-colour), inset 0 0.18rem 0 0 var(--main-colour), inset 0 -0.18rem 0 0 #ffffff;
}

.nav-pills .nav-link {
    background-color: #ffffff;
    color: var(--main-colour);
    font-weight: bold;
    border-radius: .25rem;
    border: solid var(--main-colour) 3px;
    position: relative;
}

.nav-pills .nav-link.active {
    color: #ffffff;
    background-color: var(--main-colour);
}

/* Add indicator arrow for the active tab */
@media (min-width: 992px) {
    .nav-pills .nav-link::before {
        content: '';
        display: block;
        border-top: 8px solid transparent;
        border-left: 10px solid var(--main-colour);
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        opacity: 0;
    }
}

.nav-pills .nav-link.active::before {
    opacity: 1;
}

#content .nav-pills li.nav-item+li.nav-item {
    margin-top: .5rem;
}

.tab-content {
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 1.5rem;
    background-color: #ffffff;
    border: var(--main-colour) .2rem solid;
}

.nav-pills.tab-content {
    border-radius: 0.5rem;
    padding: 1.5rem;
    background-color: #ffffff;
    border: var(--main-colour) 0.2rem solid;
    height: 100%;
}

#content li.nav-item+li.nav-item {
    margin-top: 0;
}

.tab-content .card.tint {
    background-color: var(--tint90);
    color: #414042;
}


img.inline-right {
    float: right;
    margin: 0 0 1rem 1rem;
    width: 40%;
}

@namespace svg url(http://www.w3.org/2000/svg);
/* Necessary to select only SVG <a> elements, and not also HTML’s.
   See warning below */

svg|a:link,
svg|a:visited {
    cursor: pointer;
}

svg|a text,
text svg|a {
    fill: blue;
    /* Even for text, SVG uses fill over color */
    text-decoration: underline;
}

svg|a:hover,
svg|a:active {
    outline: dotted 1px blue;
}

/* To do fix tab content styling on small screens */
/* || 5. Module-specific Styles */
.card .card-title {
    font-weight: 400;
    color: #ffffff;
}

.card {
    color: #ffffff;
    background-color: var(--main-colour);
}

.course1 {
    --main-colour: #344D96;
    --tint90: #ebedf5;
    --tint50: #9aa6cb;
}

.course2 {
    --main-colour: #046331;
    --tint90: #e6efea;
    --tint50: #82b198;
}

.course3 {
    --main-colour: #A10052;
    --tint90: #f6e6ee;
    --tint50: #d080a9;
}

.course4 {
    --main-colour: #088187;
    --tint90: #e6f2f3;
    --tint50: #84c0c3;
}

.coursetimeline {
    --main-colour: #833978;
    --tint90: #f3ebf2;
    --tint50: #c19cbc;
}

.coursetext {
    color: var(--main-colour);
}

.leaf {
    background-image: url(/inclusionoutreach/img/leaf.svg);
    background-repeat: no-repeat;
    background-position: 98% 102%;
    background-size: 25vw;
}

.card.leaf {
    background-image: url(/inclusionoutreach/img/leaf-right.svg);
    background-repeat: no-repeat;
    background-position: 104% 102%;
    background-size: 75%;
}

.coursename {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 300;
}

span.modnum {
    display: block;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 300;
    color: #000000;
    font-size: smaller;
}

.modname {
    border-bottom: #000000 solid 1px;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

.course1 .modname ::before {
    content: "";
    background-image: url(/inclusionoutreach/img/bracket-c1.svg);
    height: 60px;
    width: 20px;
    float: left;
    background-repeat: no-repeat;
    margin-left: -30px;
    display: inline;
}

.course2 .modname ::before {
    content: "";
    background-image: url(/inclusionoutreach/img/bracket-c2.svg);
    height: 60px;
    width: 20px;
    float: left;
    background-repeat: no-repeat;
    margin-left: -30px;
    display: inline;
}

.course3 .modname ::before {
    content: "";
    background-image: url(/inclusionoutreach/img/bracket-c3.svg);
    height: 60px;
    width: 20px;
    float: left;
    background-repeat: no-repeat;
    margin-left: -30px;
    display: inline;
}

.course4 .modname ::before {
    content: "";
    background-image: url(/inclusionoutreach/img/bracket-c4.svg);
    height: 60px;
    width: 20px;
    float: left;
    background-repeat: no-repeat;
    margin-left: -30px;
    display: inline;
}

/* || 6. Activities and Lists */

.question {
    font-weight: 600;
}

ul.condensed li+li {
    margin-top: 0 !important;
}

.card ul.condensed {
    padding-left: 1rem;
}

ol ul {
    margin-bottom: 1rem;
}

table ul {
    margin-bottom: 0;
    line-height: 1.2;
    font-size: 0.9rem;
    padding-left: 1rem;
}


ul.references {
    text-indent: -20px;
    list-style: none;
    margin-top: .5rem;
    font-size: small;
}

ul.references li {
    margin-bottom: .25rem;
}

dl.inline {
    margin-left: 2rem;
}

dl.inline dt {
    display: inline;
    margin-left: -2rem;
}

dl.inline dt::after {
    content: ":"
}

dl.inline dd {
    display: inline;
}

dl.inline dd::after {
    content: "";
    display: block;
    margin-bottom: 0.5rem;
}

.captivate {
    max-width: 810px;
    margin: 1rem 0;
}

.custom-control {
    padding-left: 0;
}

.custom-control-inline:first-of-type {
    margin-left: 1rem;
}

.custom-control-inline:last-of-type {
    margin-left: 5rem;
}

.custom-controls-stacked {
    margin-left: 4rem;
}

.form-group.row {
    margin-bottom: 0;
}

/* Used for OFP activities with slides */
#AnswerList,
#c2m1-4q2,
#c2m1-4q3,
#c2m1-4q4,
#c3m1-8q2,
#c3m1-8q3,
#c3m1-8q4,
#c3m1-8q5,
#c3m1-8q6 {
    display: none;
}

form .custom-radio.correct.correctChoice::before,
form .custom-checkbox.correct.correctChoice::before {
    font-family: "FontAwesome";
    content: "\f00c";
    margin-right: 2rem;
    vertical-align: middle;
    font-size: 1rem;
    text-align: center;
    font-weight: 900;
    width: 1.25rem;
    display: inline-block;
    margin-left: -3.5rem;
    color: green;
}

form table .form-check-input.correctChoice::before {
    font-family: "FontAwesome";
    content: "\f00c";
    margin-right: 2rem;
    vertical-align: top;
    font-size: .9rem;
    text-align: center;
    font-weight: 900;
    width: 1.25rem;
    display: inline-block;
    margin-left: -1.75rem;
    color: black;
    line-height: 1;
}

form table .form-check-input.incorrectChoice::before {
    font-family: "FontAwesome";
    content: "\f00d";
    margin-right: 2rem;
    vertical-align: top;
    font-size: .9rem;
    text-align: center;
    font-weight: 900;
    width: 1.25rem;
    display: inline-block;
    margin-left: -1.75rem;
    color: black;
    line-height: 1;
}

form .form-check-input.correctChoice::before {
    font-family: "FontAwesome";
    content: "\f00c";
    margin-right: 2rem;
    vertical-align: top;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 900;
    width: 1.25rem;
    display: inline-block;
    margin-left: -1.5rem;
    color: green;
    line-height: 1;
}

form .form-check-input.incorrectChoice::before {
    font-family: "FontAwesome";
    content: "\f00d";
    margin-right: 2rem;
    vertical-align: top;
    font-size: .9rem;
    text-align: center;
    font-weight: 900;
    width: 1.25rem;
    display: inline-block;
    margin-left: -1.5rem;
    color: orangered;
    line-height: 1;
}

form td.correct {
    background-color: #7eca8f;
}

form td.incorrect {
    background-color: white;
}

form .custom-radio.incorrect.correctChoice::before,
form .custom-checkbox.incorrect.correctChoice::before {
    font-family: "FontAwesome";
    content: "\f00c";
    margin-right: 2rem;
    vertical-align: middle;
    font-size: 1rem;
    text-align: center;
    font-weight: 900;
    width: 1.25rem;
    display: inline-block;
    margin-left: -3.5rem;
    color: transparent;
}

form .custom-radio.correct.incorrectChoice::before {
    font-family: "FontAwesome";
    content: "\f00d";
    margin-right: 2rem;
    vertical-align: middle;
    font-size: 1rem;
    text-align: center;
    font-weight: 900;
    width: 1.25rem;
    display: inline-block;
    margin-left: -3.5rem;
    color: transparent;
}

form .custom-checkbox.correct.incorrectChoice::before {
    font-family: "FontAwesome";
    content: "\f00d";
    margin-right: 2rem;
    vertical-align: middle;
    font-size: 1rem;
    text-align: center;
    font-weight: 900;
    width: 1.25rem;
    display: inline-block;
    margin-left: -3.5rem;
    color: orangered;
}

form .custom-radio.incorrect.incorrectChoice::before,
form .custom-checkbox.incorrect.incorrectChoice::before {
    font-family: "FontAwesome";
    content: "\f00d";
    margin-right: 2rem;
    vertical-align: middle;
    font-size: 1rem;
    text-align: center;
    font-weight: 900;
    width: 1.25rem;
    display: inline-block;
    margin-left: -3.5rem;
    color: orangered;
}

form .incorrect .custom-control-label {
    text-decoration: line-through;
    opacity: 0.5;
}

form .custom-select.correctChoice {
    border-color: green;
}

form .custom-select.incorrectChoice {
    border-color: orangered;
}

form .custom-select {
    font-size: 0.9rem;
}

.form-inline .custom-select {
    height: 100%;
    padding: 0 1rem;
    margin: 0 0.5rem;
}

/* || 7. Media Queries */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}

/*  Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    .section-wide {
        padding: 2rem 5vw;
    }

    .back-to-top {
        bottom: 1em;
        right: 3vw;
    }

    .row {
        margin-bottom: 0;
    }

    .card.leaf {
        background-size: 35%;
    }

}

/*  Medium devices (less than 992px) */
@media (max-width: 991.98px) {

    #topnav li.nav-item,
    #topnav .dropdown-item {
        width: 100%;
        text-align: center;
    }


    .sm-icon {
        display: none;
    }

    .graphic {
        width: 75%;
    }
}

/* Extra large devices (less than 1200px) */
@media (max-width: 1199.98px) {
    .tab-number {
        list-style-type: none;
        margin-left: -1em;
    }
}

/* Add xxl device queries - screens larger than 1400px */
.col-xxl,
.col-xxl-1,
.col-xxl-10,
.col-xxl-11,
.col-xxl-12,
.col-xxl-2,
.col-xxl-3,
.col-xxl-4,
.col-xxl-5,
.col-xxl-6,
.col-xxl-7,
.col-xxl-8,
.col-xxl-9,
.col-xxl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}


@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

    #header {
        margin-bottom: 2.5rem;
    }

    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xxl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xxl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xxl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-xxl-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .order-xxl-last {
        -ms-flex-order: 13;
        order: 13;
    }

    .order-xxl-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .order-xxl-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .order-xxl-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .order-xxl-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .order-xxl-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .order-xxl-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .order-xxl-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .order-xxl-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .order-xxl-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .order-xxl-9 {
        -ms-flex-order: 9;
        order: 9;
    }

    .order-xxl-10 {
        -ms-flex-order: 10;
        order: 10;
    }

    .order-xxl-11 {
        -ms-flex-order: 11;
        order: 11;
    }

    .order-xxl-12 {
        -ms-flex-order: 12;
        order: 12;
    }

    .offset-xxl-0 {
        margin-left: 0;
    }

    .offset-xxl-1 {
        margin-left: 8.333333%;
    }

    .offset-xxl-2 {
        margin-left: 16.666667%;
    }

    .offset-xxl-3 {
        margin-left: 25%;
    }

    .offset-xxl-4 {
        margin-left: 33.333333%;
    }

    .offset-xxl-5 {
        margin-left: 41.666667%;
    }

    .offset-xxl-6 {
        margin-left: 50%;
    }

    .offset-xxl-7 {
        margin-left: 58.333333%;
    }

    .offset-xxl-8 {
        margin-left: 66.666667%;
    }

    .offset-xxl-9 {
        margin-left: 75%;
    }

    .offset-xxl-10 {
        margin-left: 83.333333%;
    }

    .offset-xxl-11 {
        margin-left: 91.666667%;
    }

    .flex-xxl-row {
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }

    .flex-xxl-column {
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }

    .flex-xxl-row-reverse {
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important;
    }

    .flex-xxl-column-reverse {
        -ms-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important;
    }

    .flex-xxl-wrap {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
    }

    .flex-xxl-nowrap {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }

    .flex-xxl-wrap-reverse {
        -ms-flex-wrap: wrap-reverse !important;
        flex-wrap: wrap-reverse !important;
    }

    .flex-xxl-fill {
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
    }

    .flex-xxl-grow-0 {
        -ms-flex-positive: 0 !important;
        flex-grow: 0 !important;
    }

    .flex-xxl-grow-1 {
        -ms-flex-positive: 1 !important;
        flex-grow: 1 !important;
    }

    .flex-xxl-shrink-0 {
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
    }

    .flex-xxl-shrink-1 {
        -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
    }

    .justify-content-xxl-start {
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }

    .justify-content-xxl-end {
        -ms-flex-pack: end !important;
        justify-content: flex-end !important;
    }

    .justify-content-xxl-center {
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .justify-content-xxl-between {
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

    .justify-content-xxl-around {
        -ms-flex-pack: distribute !important;
        justify-content: space-around !important;
    }

    .align-items-xxl-start {
        -ms-flex-align: start !important;
        align-items: flex-start !important;
    }

    .align-items-xxl-end {
        -ms-flex-align: end !important;
        align-items: flex-end !important;
    }

    .align-items-xxl-center {
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    .align-items-xxl-baseline {
        -ms-flex-align: baseline !important;
        align-items: baseline !important;
    }

    .align-items-xxl-stretch {
        -ms-flex-align: stretch !important;
        align-items: stretch !important;
    }

    .align-content-xxl-start {
        -ms-flex-line-pack: start !important;
        align-content: flex-start !important;
    }

    .align-content-xxl-end {
        -ms-flex-line-pack: end !important;
        align-content: flex-end !important;
    }

    .align-content-xxl-center {
        -ms-flex-line-pack: center !important;
        align-content: center !important;
    }

    .align-content-xxl-between {
        -ms-flex-line-pack: justify !important;
        align-content: space-between !important;
    }

    .align-content-xxl-around {
        -ms-flex-line-pack: distribute !important;
        align-content: space-around !important;
    }

    .align-content-xxl-stretch {
        -ms-flex-line-pack: stretch !important;
        align-content: stretch !important;
    }

    .align-self-xxl-auto {
        -ms-flex-item-align: auto !important;
        align-self: auto !important;
    }

    .align-self-xxl-start {
        -ms-flex-item-align: start !important;
        align-self: flex-start !important;
    }

    .align-self-xxl-end {
        -ms-flex-item-align: end !important;
        align-self: flex-end !important;
    }

    .align-self-xxl-center {
        -ms-flex-item-align: center !important;
        align-self: center !important;
    }

    .align-self-xxl-baseline {
        -ms-flex-item-align: baseline !important;
        align-self: baseline !important;
    }

    .align-self-xxl-stretch {
        -ms-flex-item-align: stretch !important;
        align-self: stretch !important;
    }

    .m-xxl-0 {
        margin: 0 !important;
    }

    .mt-xxl-0,
    .my-xxl-0 {
        margin-top: 0 !important;
    }

    .mr-xxl-0,
    .mx-xxl-0 {
        margin-right: 0 !important;
    }

    .mb-xxl-0,
    .my-xxl-0 {
        margin-bottom: 0 !important;
    }

    .ml-xxl-0,
    .mx-xxl-0 {
        margin-left: 0 !important;
    }

    .m-xxl-1 {
        margin: 0.25rem !important;
    }

    .mt-xxl-1,
    .my-xxl-1 {
        margin-top: 0.25rem !important;
    }

    .mr-xxl-1,
    .mx-xxl-1 {
        margin-right: 0.25rem !important;
    }

    .mb-xxl-1,
    .my-xxl-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-xxl-1,
    .mx-xxl-1 {
        margin-left: 0.25rem !important;
    }

    .m-xxl-2 {
        margin: 0.5rem !important;
    }

    .mt-xxl-2,
    .my-xxl-2 {
        margin-top: 0.5rem !important;
    }

    .mr-xxl-2,
    .mx-xxl-2 {
        margin-right: 0.5rem !important;
    }

    .mb-xxl-2,
    .my-xxl-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-xxl-2,
    .mx-xxl-2 {
        margin-left: 0.5rem !important;
    }

    .m-xxl-3 {
        margin: 1rem !important;
    }

    .mt-xxl-3,
    .my-xxl-3 {
        margin-top: 1rem !important;
    }

    .mr-xxl-3,
    .mx-xxl-3 {
        margin-right: 1rem !important;
    }

    .mb-xxl-3,
    .my-xxl-3 {
        margin-bottom: 1rem !important;
    }

    .ml-xxl-3,
    .mx-xxl-3 {
        margin-left: 1rem !important;
    }

    .m-xxl-4 {
        margin: 1.5rem !important;
    }

    .mt-xxl-4,
    .my-xxl-4 {
        margin-top: 1.5rem !important;
    }

    .mr-xxl-4,
    .mx-xxl-4 {
        margin-right: 1.5rem !important;
    }

    .mb-xxl-4,
    .my-xxl-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-xxl-4,
    .mx-xxl-4 {
        margin-left: 1.5rem !important;
    }

    .m-xxl-5 {
        margin: 3rem !important;
    }

    .mt-xxl-5,
    .my-xxl-5 {
        margin-top: 3rem !important;
    }

    .mr-xxl-5,
    .mx-xxl-5 {
        margin-right: 3rem !important;
    }

    .mb-xxl-5,
    .my-xxl-5 {
        margin-bottom: 3rem !important;
    }

    .ml-xxl-5,
    .mx-xxl-5 {
        margin-left: 3rem !important;
    }

    .p-xxl-0 {
        padding: 0 !important;
    }

    .pt-xxl-0,
    .py-xxl-0 {
        padding-top: 0 !important;
    }

    .pr-xxl-0,
    .px-xxl-0 {
        padding-right: 0 !important;
    }

    .pb-xxl-0,
    .py-xxl-0 {
        padding-bottom: 0 !important;
    }

    .pl-xxl-0,
    .px-xxl-0 {
        padding-left: 0 !important;
    }

    .p-xxl-1 {
        padding: 0.25rem !important;
    }

    .pt-xxl-1,
    .py-xxl-1 {
        padding-top: 0.25rem !important;
    }

    .pr-xxl-1,
    .px-xxl-1 {
        padding-right: 0.25rem !important;
    }

    .pb-xxl-1,
    .py-xxl-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-xxl-1,
    .px-xxl-1 {
        padding-left: 0.25rem !important;
    }

    .p-xxl-2 {
        padding: 0.5rem !important;
    }

    .pt-xxl-2,
    .py-xxl-2 {
        padding-top: 0.5rem !important;
    }

    .pr-xxl-2,
    .px-xxl-2 {
        padding-right: 0.5rem !important;
    }

    .pb-xxl-2,
    .py-xxl-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-xxl-2,
    .px-xxl-2 {
        padding-left: 0.5rem !important;
    }

    .p-xxl-3 {
        padding: 1rem !important;
    }

    .pt-xxl-3,
    .py-xxl-3 {
        padding-top: 1rem !important;
    }

    .pr-xxl-3,
    .px-xxl-3 {
        padding-right: 1rem !important;
    }

    .pb-xxl-3,
    .py-xxl-3 {
        padding-bottom: 1rem !important;
    }

    .pl-xxl-3,
    .px-xxl-3 {
        padding-left: 1rem !important;
    }

    .p-xxl-4 {
        padding: 1.5rem !important;
    }

    .pt-xxl-4,
    .py-xxl-4 {
        padding-top: 1.5rem !important;
    }

    .pr-xxl-4,
    .px-xxl-4 {
        padding-right: 1.5rem !important;
    }

    .pb-xxl-4,
    .py-xxl-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-xxl-4,
    .px-xxl-4 {
        padding-left: 1.5rem !important;
    }

    .p-xxl-5 {
        padding: 3rem !important;
    }

    .pt-xxl-5,
    .py-xxl-5 {
        padding-top: 3rem !important;
    }

    .pr-xxl-5,
    .px-xxl-5 {
        padding-right: 3rem !important;
    }

    .pb-xxl-5,
    .py-xxl-5 {
        padding-bottom: 3rem !important;
    }

    .pl-xxl-5,
    .px-xxl-5 {
        padding-left: 3rem !important;
    }

    .m-xxl-n1 {
        margin: -0.25rem !important;
    }

    .mt-xxl-n1,
    .my-xxl-n1 {
        margin-top: -0.25rem !important;
    }

    .mr-xxl-n1,
    .mx-xxl-n1 {
        margin-right: -0.25rem !important;
    }

    .mb-xxl-n1,
    .my-xxl-n1 {
        margin-bottom: -0.25rem !important;
    }

    .ml-xxl-n1,
    .mx-xxl-n1 {
        margin-left: -0.25rem !important;
    }

    .m-xxl-n2 {
        margin: -0.5rem !important;
    }

    .mt-xxl-n2,
    .my-xxl-n2 {
        margin-top: -0.5rem !important;
    }

    .mr-xxl-n2,
    .mx-xxl-n2 {
        margin-right: -0.5rem !important;
    }

    .mb-xxl-n2,
    .my-xxl-n2 {
        margin-bottom: -0.5rem !important;
    }

    .ml-xxl-n2,
    .mx-xxl-n2 {
        margin-left: -0.5rem !important;
    }

    .m-xxl-n3 {
        margin: -1rem !important;
    }

    .mt-xxl-n3,
    .my-xxl-n3 {
        margin-top: -1rem !important;
    }

    .mr-xxl-n3,
    .mx-xxl-n3 {
        margin-right: -1rem !important;
    }

    .mb-xxl-n3,
    .my-xxl-n3 {
        margin-bottom: -1rem !important;
    }

    .ml-xxl-n3,
    .mx-xxl-n3 {
        margin-left: -1rem !important;
    }

    .m-xxl-n4 {
        margin: -1.5rem !important;
    }

    .mt-xxl-n4,
    .my-xxl-n4 {
        margin-top: -1.5rem !important;
    }

    .mr-xxl-n4,
    .mx-xxl-n4 {
        margin-right: -1.5rem !important;
    }

    .mb-xxl-n4,
    .my-xxl-n4 {
        margin-bottom: -1.5rem !important;
    }

    .ml-xxl-n4,
    .mx-xxl-n4 {
        margin-left: -1.5rem !important;
    }

    .m-xxl-n5 {
        margin: -3rem !important;
    }

    .mt-xxl-n5,
    .my-xxl-n5 {
        margin-top: -3rem !important;
    }

    .mr-xxl-n5,
    .mx-xxl-n5 {
        margin-right: -3rem !important;
    }

    .mb-xxl-n5,
    .my-xxl-n5 {
        margin-bottom: -3rem !important;
    }

    .ml-xxl-n5,
    .mx-xxl-n5 {
        margin-left: -3rem !important;
    }

    .m-xxl-auto {
        margin: auto !important;
    }

    .mt-xxl-auto,
    .my-xxl-auto {
        margin-top: auto !important;
    }

    .mr-xxl-auto,
    .mx-xxl-auto {
        margin-right: auto !important;
    }

    .mb-xxl-auto,
    .my-xxl-auto {
        margin-bottom: auto !important;
    }

    .ml-xxl-auto,
    .mx-xxl-auto {
        margin-left: auto !important;
    }

    .d-xxl-block {
        display: block !important;
    }

    .w-xxl-100 {
        width: 100% !important;
    }
}

/* Printing settings */
@media print {
    .card .collapse {
        display: block;
        margin-top: 1em;
    }

    img {
        display: none;
    }

    #course1Nav,
    #course2Nav,
    #course3Nav,
    #course4Nav {
        display: none;
    }
}

.box {
    background-color: #d8d8d8;
    padding: 30px;
    overflow: hidden;
}