/*-----WAVOTO INTERFACE----*/
 :root {
     --uxbodytext: 'Nunito', sans-serif;
     --uxtext: 'Nunito', sans-serif;
     --uxtransition: all 235ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
     --uxtransitionout: all 135ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
     --uxtextshadow: 0px 1px 3px rgba(0,0,0,0.15);
     --uxshadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
     --uxshadowhover: 0 1px 3px 1px rgb(66 66 66 / 20%), 0 2px 8px 4px rgb(66 66 66 / 10%);
     --uxradius: 4px;
     --uxblue: #25739e;
     --uxblueactive: #0C68B2;
     --uxbluefade: #E9F1F5;
     --uxblue1: #0C68B2;
     --uxblue2: #0C59B2;
     --uxblue3: #27739C;
     --uxbluetint: rgba(12,104,178,0.06);
     --uxred1: #CC3232;
     --uxred2: #CC3256;
     --uxred3: #CA0101;
     --uxredtint: rgba(204,50,50,0.06);
     --uxgreen: #368B8A;
     --uxgreenactive: #4C8887;
     --uxgreenfade: #79A6A5;
     --uxgreentint: #9ac5c4;
     --uxyellow: #fbd343;
     --uxyellowactive: #FEEF3A;
     --uxyellowfade: #FDE9AA;
     --uxgray: #909093;
     --uxgraydark: #595A5E;
     --uxgrayactive: #C7C7C9;
     --uxgrayfade: #DEDEDF;
     --uxgrayframe: #e6e6eb;
     --uxblack: #222328;
     --uxbgdark: #eff1f0;
     --uxwhite: #ffffff;
}
 .cbNavWrap {
     padding: 0px 25px;
}
 ul.cbNav {
     display: flex;
     list-style-type: none;
     width: 100%;
     align-items: center;
     align-content: center;
     justify-content: flex-end;
     flex-direction: row;
     margin-bottom: 0px;
}
 li.cbNavItem {
     padding: 0px 25px;
     font-size: var(--navigationsize);
     text-transform: var(--navigationcaps);
     line-height: 1;
     letter-spacing: 0.025em;
     font-weight: var(--navigationbold);
}
 li.cbNavItem a.cbNavLink {
     color: var(--navigationcolor);
     text-decoration: var(--navigationunderline) !important;
     transition: 0.3s ease !important;
     cursor: pointer;
}
 li.cbNavItem a.cbNavLink:hover {
     color: var(--linkcolor);
}
 @media (max-width: 762px) {
     ul.cbNav {
         flex-direction: column;
         justify-content: center;
    }
}
 section.wavparallax {
     background-color: rgba(0,0,0,0.4);
     background-blend-mode: multiply;
}
 .cbCourseCard {
     height: 300px;
     width: 300px;
     margin: 30px auto;
     display: flex;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     align-items: center;
     background-size: cover;
     background-position: center center;
}
 .cbCourseCardGutter {
     border: 2px solid #fff;
     max-width: 90%;
     max-height: 90%;
     height: 300px;
     width: 300px;
     min-height: fit-content;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin: auto auto;
}
 .cbCardTitle, .cbCardID {
     color: #fff;
     text-shadow: 0 1px 3px rgba(0,0,0,0.8);
     line-height: 1.15;
}
 .cbCardID {
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     font-size: 24px;
     margin-bottom: 10px;
}
 .cbCardTitle {
     font-weight: 500;
     letter-spacing: 0.025em;
}
 .cbGoToCourse {
     position: absolute;
     text-align: center;
     margin: auto auto;
     bottom: 12.5%;
}
 .cbCourseCard {
     position: relative;
     z-index: 0;
     transition: 0.3s ease !important;
    /* cursor: pointer;
     */
     border-radius: 2px;
}
 .cbCourseCard::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     opacity: 0.5;
     z-index: 1;
     transition: 0.3s ease !important;
     border-radius: 2px;
}
 .cbCourseCardGutter {
     position: relative;
     z-index: 2;
     border-radius: 2px;
}
 .cbCourseCard:hover::before {
     opacity: 0.25 
}
 .cbCourseCard.active::before {
    /* background-color: var(--brandcolor3);
     */
}
 .cbCourseCard.complete::before {
     background-color: var(--brandcolor2);
}
 .cbCourseCard.inactive::before {
     background-color: var(--brandcolor4);
}
 .cbCourseCard.inactive {
     filter: grayscale(1);
}
 .cbCourseCard.inactive:hover {
     filter: grayscale(0.25);
}
 .cbCourseCard .cbCardStatus {
     position: absolute;
     height: 48px;
     width: 48px;
     border-radius: 50px;
     top: -18px;
     right: -18px;
     font-size: 24px;
     line-height: 1;
     z-index: 3;
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     color: black;
     text-align: center;
     transition: 0.3s ease !important;
     box-shadow: var(--uxshadow);
     color: #fff;
     filter: saturate(1.5);
     pointer-events: none;
}
 .cbCourseCard:hover .cbCardStatus {
     filter: saturate(2);
}
 .cbCourseCard.active .cbCardStatus {
     background-color: var(--brandcolor3);
}
 .cbCourseCard.inactive .cbCardStatus {
     background-color: var(--brandcolor1);
}
 .cbCourseCard.complete .cbCardStatus {
     background-color: var(--brandcolor2);
}
 .cbCourseCard .cbCardStatus i {
     display: none;
     0 0px 3px rgba(0,0,0,0.8) 
}
 .cbCourseCard.active .cbCardStatus i.fa-play {
     display: block;
     padding-left: 4px;
}
 .cbCourseCard.inactive .cbCardStatus i.fa-lock {
     display: block;
}
 .cbCourseCard.complete .cbCardStatus i.fa-award {
     display: block;
}
 .cbCourseCard.inactive:hover .cbCardStatus i.fa-lock {
     display: none;
}
 .cbCourseCard.inactive:hover .cbCardStatus i.fa-unlock {
     display: block;
}
 .cbDescriptionBlock {
     min-height: 450px;
     padding: 30px 0px;
     margin: auto auto;
}
 .cbUnitCard {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     align-content: center;
     text-align: center;
     flex-direction: column;
     width: 100%;
     min-height: 500px;
     position: relative;
     box-shadow: var(--uxshadow);
     border-radius: 1px;
     margin: 30px auto;
     transition: var(--uxtransition);
     padding: 20px 20px 85px 20px;
}
 .cbUnitCard:hover {
     box-shadow: var(--uxshadowhover);
     transition: var(--uxtransitionout);
}
 .cbUnitCard .cbUnitCover {
     width: 100% !important;
     height: 150px !important;
     position: relative;
     object-fit: cover;
}
 .cbUnitCard .cbUnitCover img {
     position: relative;
     width: 100% !important;
     height: 100% !important;
     object-fit: cover;
     overflow: hidden;
     border-radius: 1px;
}
 .cbUnitCard .cbGoToUnit {
     position: absolute;
     bottom: 20px;
     width: 100%;
     padding: 0px 20px;
}
 .cbUnitCard .cbGoToUnit a {
     width: 100%;
     position: relative;
     margin: auto auto;
}
 .cbUnitTitle {
     font-size: 20px;
     font-weight: 700;
     margin: 25px auto 15px auto;
     line-height: 1.15;
}
 .cbUnitDescription {
     margin: auto auto auto auto;
     font-size: 15px;
     text-align: center;
     padding: 10px 10px 10px 10px;
}
 .cbUnitCard .cbUnitStatus {
     position: absolute;
     height: 48px;
     width: 48px;
     border-radius: 50px;
     top: -18px;
     right: -18px;
     font-size: 24px;
     line-height: 1;
     z-index: 3;
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     color: black;
     text-align: center;
     transition: 0.3s ease !important;
     box-shadow: var(--uxshadow);
     color: #fff;
     filter: saturate(1.5);
     pointer-events: none;
}
 .cbUnitCard:hover .cbUnitStatus {
     filter: saturate(2);
     box-shadow: var(--uxshadowhover);
}
 .cbUnitCard.active .cbUnitStatus {
     background-color: var(--brandcolor3);
}
 .cbUnitCard.inactive .cbUnitStatus {
     display: none;
}
 .cbUnitCard.complete .cbUnitStatus {
     background-color: var(--brandcolor2);
}
 .cbUnitCard .cbUnitStatus i {
     display: none;
     text-shadow: 0 0px 3px rgba(0,0,0,0.8);
}
 .cbUnitCard.active .cbUnitStatus i.fa-play {
     display: block;
     padding-left: 4px;
}
 .cbUnitCard.inactive .cbUnitStatus i.fa-lock {
     display: block;
}
 .cbUnitCard.complete .cbUnitStatus i.fa-check {
     display: block;
}
 .cbLessonCard {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     align-content: center;
     text-align: center;
     flex-direction: column;
     width: 100%;
     min-height: 500px;
     position: relative;
     box-shadow: var(--uxshadow);
     border-radius: 1px;
     margin: 30px auto;
     transition: var(--uxtransition);
     padding: 20px 20px 85px 20px;
}
 .cbLessonCard:hover {
     box-shadow: var(--uxshadowhover);
     transition: var(--uxtransitionout);
}
 .cbLessonCard .cbLessonCover {
     width: 100% !important;
     height: 150px !important;
     position: relative;
     object-fit: cover;
}
 .cbLessonCard .cbLessonCover img {
     position: relative;
     width: 100%;
     height: 100%;
     object-fit: cover;
     overflow: hidden;
     border-radius: 1px;
}
 .cbLessonCard .cbGoToLesson {
     position: absolute;
     bottom: 10px;
     width: 100%;
     padding: 0px 20px 
}
 .cbLessonCard .cbGoToLesson a {
     width: 100%;
     position: relative;
}
 .cbLessonTitle {
     font-size: 20px;
     font-weight: 700;
     margin: 25px auto 15px auto;
     line-height: 1.15;
}
 .cbLessonDescription {
     margin: auto auto auto auto;
     font-size: 15px;
     text-align: center;
     padding: 10px 10px 10px 10px;
}
 .cbLessonCard .cbLessonStatus {
     position: absolute;
     height: 48px;
     width: 48px;
     border-radius: 50px;
     top: -18px;
     right: -18px;
     font-size: 24px;
     line-height: 1;
     z-index: 3;
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     color: black;
     text-align: center;
     transition: var(--uxtransition);
     box-shadow: var(--uxshadow);
     color: #fff;
     filter: saturate(1.5);
     pointer-events: none;
}
 .cbLessonCard:hover .cbLessonStatus {
     filter: saturate(2);
     transition: var(--uxtransitionout);
     box-shadow: var(--uxshadowhover);
}
 .cbLessonCard.active .cbLessonStatus {
     background-color: var(--brandcolor3);
}
 .cbLessonCard.inactive .cbLessonStatus {
     display: none;
}
 .cbLessonCard.complete .cbLessonStatus {
     background-color: var(--brandcolor2);
}
 .cbLessonCard .cbLessonStatus i {
     display: none;
     text-shadow: 0 0px 3px rgba(0,0,0,0.8);
}
 .cbLessonCard.active .cbLessonStatus i.fa-play {
     display: block;
     padding-left: 4px;
}
 .cbLessonCard.inactive .cbLessonStatus i.fa-lock {
     display: block;
}
 .cbLessonCard.complete .cbLessonStatus i.fa-check {
     display: block;
}
 div.cbToc {
     background-color: #f9f9f9;
     padding: 15px 10px;
     max-width: 200px;
     margin: 0 auto 15px auto;
     border-radius: 1px;
}
 .cbTocTitle, span.cbAttachments {
     text-transform: var(--bodycaps);
     font-weight: 700;
     font-family: var(--bodyfont);
     font-size: 20px;
     display: block;
     text-decoration: underline;
     text-align: center;
     margin: 0px auto 25px auto;
}
 ol.cbToc, ul.cbAttachList {
     list-style-type: none;
     padding-left: 5px;
     padding-right: 5px;
     text-align: center;
     margin-top: 15px;
     font-size: 14px;
     font-weight: 600;
}
 ol.cbToc li, ul.cbAttachList li {
     line-height: 1.15;
     margin-bottom: 20px;
     padding-left: 0px;
     position: relative;
}
 li.cbAttachItem a {
     font-weight: 500;
}
 div.cbContent {
     max-width: 660px;
     padding-left: 10px;
     padding-right: 10px;
     width: 100%;
     margin: 15px auto;
     position: relative;
}
 span.cbCaptionAlt {
     text-align: center;
     display: block;
     font-style: italic;
     opacity: 0.667;
     font-size: calc(var(--bodysize) - 2px);
     margin-bottom: 35px;
}
 .cbContent h1 {
     text-align: center;
     font-size: calc(var(--titlesize) * 0.8);
     line-height: 1.15;
}
 .cbContent h2 {
     text-align: center;
     font-size: calc(var(--subtitlesize) * 0.8);
     line-height: 1.15;
     margin-bottom: 25px;
}
 .cbContent span.fr-video {
     margin-top: 50px;
     margin-bottom: 15px;
}
 .cbContent span.fr-video iframe {
     border: 8px solid var(--brandcolor3);
     box-shadow: var(--uxshadow);
}
 .cbContent hr {
     margin-top: 50px;
     margin-bottom: 50px;
     max-width: 90%;
     border-width: 1.5px 
}
 @media (max-width: 992px) {
     .cbContent hr {
         margin-top: 50px;
         margin-bottom: 50px;
    }
}
 div.cbContent .cbImage {
     width: 100%;
     height: 100%;
     margin: auto auto;
     position: relative;
     padding: 20px 20px;
     border-radius: 1px;
}
 div.cbContent .cbImage img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: relative;
     box-shadow: 0px 0px 6px -1px rgba(0,0,0,0.28);
}
 a.anchor {
     position: absolute;
     top: 0px;
     opacity: 0;
}
 .cbSubmissionBlock, .cbQuizBlock, .cbDiscussBlock {
     font-weight: 700;
}
 .cbSubmissionBlock span, .cbQuizBlock span, .cbDiscussBlock span {
     font-weight: 500;
}
 p.cbDiscussPrompt {
     margin-top: 25px;
}
 p.cbSubmissionInstructions {
     margin-top: 25px;
}
 .cbSubmissionName, .cbQuizName, .cbDiscussName {
     font-size: 22px;
     margin-bottom: 15px;
     text-decoration: underline;
}
 .cbSubmitScore, .cbQuizScore, .cbDiscussScore {
     font-weight: 700;
     font-size: calc(var(--bodysize) - 2px);
}
 table.cbTable {
     width: 100%;
}
 table.cbTable tr {
     width: 100%;
     border-bottom: #d9d9d9 solid 1px;
     line-height: 3;
}
 table.cbTable th {
     color: var(--uxgray);
     font-size: 12px;
     font-weight: 500;
}
 table.wTable tr td, table.wTable tr th {
     max-width: 100%;
     text-align: center;
}
 .cbTable tr td:first-child, .cbTable tr th:first-child {
     text-align: left;
}
 .cbTable tr td:first-child {
     font-weight: 700;
}
 .cbTable td.studentStatus span.statusLabel {
     text-align: center;
}
 span.statusLabel {
     transition: var(--uxtransition);
     cursor: default;
     border-radius: 50px;
     padding: 2px 8px;
     letter-spacing: 0.025em;
     font-weight: 300;
     text-transform: lowercase;
}
 span.statusLabel:hover {
     text-align: center;
     cursor: default;
     opacity: 0.84;
}
 span.statusLabel.active {
     color: var(--uxwhite);
     background-color: var(--uxblue1);
}
 span.statusLabel.inactive {
     color: var(--uxwhite);
     background-color: var(--uxred2);
}
 span.statusLabel.warning {
     color: var(--uxblack);
     background-color: var(--uxyellow);
}
 span.statusLabel.inProgress {
     color: var(--uxwhite);
     background-color: var(--uxgreen);
}
 span.statusLabel.null {
     color: var(--uxgraydark);
     background-color: var(--uxgrayfade);
}
 span.statusLabel.info {
     color: var(--uxblue2);
     background-color: var(--uxbluefade);
}
 .cbTable .actionIcons a {
     padding-left: 0px;
     padding-right: 0px;
     font-size: 20px;
     line-height: 2;
}
 table.cbTable .cbTableTotal {
     border-bottom: 0px solid transparent;
     font-weight: 800;
}
 table.cbTable tr td:last-child, table.cbTable tr th:last-child {
     text-align: right !important;
}
 .cbQuiz .form-group > label {
     font-weight: 700;
     font-size: 18px;
     margin-bottom: 15px;
}
 .cbQuiz .tssFormRow {
     max-width: 800px;
}
 .cbQuiz hr {
     max-width: 100%;
     margin-top: 35px;
     margin-bottom: 25px;
}
 li.cbAttachItem::after, li.cbTocItem::after {
     content: '';
     width: 16px;
     position: absolute;
     border-bottom: 1.25px solid var(--brandcolor3);
     display: block;
     bottom: -10px;
     left: 50%;
     margin-left: -8px;
     pointer-events: none;
}
 @media (min-width: 992px) {
     .row .col-md-4:nth-child(3n+4) {
         clear: left;
    }
}
/*---PROGRESS BAR---*/
 .cbProg {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
     align-content: center;
}
 .cbProgSummary {
     width: 250px;
     position: relative;
     text-align: center;
}
 .cbProgBar {
     width: 100%;
     position: relative;
     background-color: var(--uxgrayframe);
     height: 8px;
     border-radius: 8px;
     margin: 8px auto 8px auto;
}
 .cbProgFill {
     position: absolute;
     left: 0px;
     top: 0px;
     border-radius: 8px;
     background-color: var(--uxblue);
     height: 8px;
}
 .cbProg .btn.btn-primary {
     font-size: 12px;
     min-width: 100px;
}
 .cbProg .btn.btn-primary.cbProgBack {
     margin: 0px auto 0px 0px;
}
 .cbProg .btn.btn-primary.cbProgNext {
     margin: 0px 0px 0px auto;
}
 .cbProgValue {
     font-size: 16px;
     color: var(--uxgray);
}

.cbContent audio {
    display: block;
    margin: auto auto;
}