:root {
  --primary: #00afcf;
  --primary-hover: #0b889f;
  --primary-li: #8bb4c7;
  --secondary: #e2ebeb;
  --secondary-hover: #88888830;
  --tertiary: #ee5249;
  --background: #f5f5f5;
  --text: #565656;
  --text2: #314e59;
  --medium: #adadad;
  --light: #ededed;
  --bad: #a0211f;
  --bad-li: #ffdada;
  --good: #006f00;
  --good-li: #e4f3e3;
  --rounded: 12px;
  --rounded_sm: 6px;
  --margin-sm: 6px;
  --margin-md: 2rem;
  --margin-lg: 4.5rem;
  --raised: -5px -5px 10px 0px #ffffff, 5px 5px 10px 0px #bfbfbf;
  --raised-press: -2px -2px 5px 0px #ffffff, 2px 2px 5px 0px #bfbfbf;
  --inset: inset -5px -5px 14px 0px #ffffff75, inset 7px 7px 9px 0px #0000002b;
  --inset-press: inset -2px -2px 7px 0px #ffffff75, inset 2px 2px 6px 0px #0000002b;
  --title: 4.5rem;
  --heading: 2rem;
  --heading2: 1.4rem;
  --body: 1.2rem;
  --body2: 1.1rem;
  --heading-width: 50rem;
  --body-width: 40rem;
}

::selection {background: #03b0d069;color: var(--primary-color);}  

.interaction:focus {
  outline: 2px solid var(--tertiary-color) !important;
  outline-offset: 2px;
  background-color: #f9e37573;
  border: initial !important;
  border-radius: 2px;
}

::marker {
  color: var(--primary);
}

button:active {
scale: 94%;
}

body {
  background-color: #fff;
  margin: initial !important;
}

b {
  font-family: 'heading';
}

/* TABLE */

p>span {
  font-family: 'body' !important;
  line-height: initial;
}

.lesson, .module {border: 0px solid black !important;background-color: var(--background) !important;background: radial-gradient(var(--background) 70%, #880f0f1a 100%);width: 100vw !important;height: 100vh !important;/* min-height: 650px; *//* min-width: 1030px; */overflow: hidden;}

#content>.body {
max-width: var(--body-width);
max-height: initial !important;
}

button.nav {
height: 60px;
font-size: 1.4rem;
font-family: 'body';
letter-spacing: 0.1rem;
width: fit-content;
padding: 0 40px;
min-width: 200px;
border-radius: var(--rounded);
border: none;
box-shadow: var(--raised);
color: var(--text2);
transition: all .2s ease;
}

button.nav:hover {
background-color: var(--light);
box-shadow: var(--raised-press);
transition: all .2s ease;
}

/*text classes*/

.title {
  font-family: 'heading';
  font-size: 1.5rem;
  color: var(--text2);
  line-height: initial !important;
  background-color: #8bb4c76b;
  width: fit-content;
  border-radius: var(--rounded_sm);
  padding: 1px 15px 3px 15px;
}

.heading {font-family: 'heading';font-size: var(--heading);color: var(--text);line-height: 2.5rem;margin-bottom: 5vh;max-width: var(--heading-width);display: flex;align-items: center;justify-content: center;}

.body {
font-family: 'body';
color: var(--text);
font-size: 1.1rem;
line-height: 1.6rem;
max-width: var(--body-width);
}

/*landing page*/

.lesson-list {display: flex;flex-direction: row;padding: 3vh 1vw;margin: 0 -1vw;width: 56%;flex-wrap: wrap;/* overflow-x: auto; */}

.lesson-list>.body:before {
  font-family: 'heading';
  position: relative;
  display: flex;
  height: 40px;
  opacity: .3;
  content: "L1";
  margin-top: -5px;
  height: 2rem;
}

.lesson-list>.body:nth-child(2):before {
content: "L2";
}
.lesson-list>.body:nth-child(3):before {
content: "L3";
}
.lesson-list>.body:nth-child(4):before {
content: "L4";
}
.lesson-list>.body:nth-child(5):before {
content: "L5";
}
.lesson-list>.body:nth-child(6):before {
content: "L6";
}
.lesson-list>.body:nth-child(7):before {
content: "L7";
}
.lesson-list>.body:nth-child(8):before {
content: "L8";
}
.lesson-list>.body:nth-child(9):before {
content: "L9";
}
.lesson-list>.body:nth-child(10):before {
content: "L10";
}

.intro-image {width: 45% !important;background-repeat: no-repeat;background-size: cover;height: calc(100% - 40px) !important;margin: 20px;border-radius: var(--rounded);animation: fadein .4s cubic-bezier(0, 0.56, 0.31, 0.94);}

.intro-button {border-radius: var(--rounded) !important;box-shadow: var(--raised);border: none;text-align: center;align-self: center;width: 100%;padding: 16px 16px 16px 16px !important;display: flex;flex-direction: column;cursor: pointer;font-family: 'body';font-size: 1.2rem;justify-self: center;align-items: center;color: var(--text2);animation: complete2 0.8s cubic-bezier(0, 0.56, 0.31, 0.94);animation-delay: 0.4s;animation-fill-mode: both;}

.intro-button:hover {
box-shadow: var(--raised-press);
transition: box-shadow .2s ease;
background-color: var(--light);
color: var(--text2);
}

button {
cursor: pointer;
}


button.lesson-button {border-radius: var(--rounded) !important;box-shadow: var(--raised);border: none;text-align: left;padding: 16px 16px 16px 16px !important;display: flex;flex-direction: column;cursor: pointer;animation: fadein .8s cubic-bezier(0.4, 0, 0.2, 1);animation-delay: .3s;animation-fill-mode: both;margin: 0 1.4vw 1.4vw 0 !important;}

button.lesson-button:hover {
box-shadow: var(--raised-press);
transition: box-shadow .2s ease;
background-color: var(--light);
color: var(--text2);
}

button.lesson-button:hover:before {
  color: var(--primary);
  opacity: 1;
  background-color: var(--light);
  height: 25px;
  margin: -5px 0px 6px -8px;
  width: 30px;
  padding-left: 8px;
  border-radius: var(--rounded);
  box-shadow: var(--inset-press);
  transition: box-shadow 0.4s ease;
}

.body.completed {
background-color: #7fc996 !important;
box-shadow: var(--inset) !important;
color: var(--good);
}

.body.completed:after {content: "";position: absolute;background: url(../../shared/lesson_statics/gui/complete.png);width: 15px;height: 15px;margin: 0px 0px 0px 85px;background-position: center;background-repeat: no-repeat;animation: complete .4s ease;}

button.lesson-button.completed:hover:before {
color: var(--background);
opacity: 1;
background-color: transparent;
height: 25px;
margin: -5px 0px 15px -8px;
width: 30px;
padding-left: 8px;
border-radius: var(--rounded);
box-shadow: var(--inset-press);
transition: box-shadow 0.4s ease;
}

/*intro page*/

.no-UI-content-row>.slide-nav{
display: none;
}

.intro-col {width: 40%;margin-left: var(--margin-md);display: grid;align-content: center;row-gap: var(--margin-md);animation: fadein .4s cubic-bezier(0, 0.56, 0.31, 0.94);animation-delay: .2s;animation-fill-mode: both;}

/*content*/

.content-row {justify-content: space-between !important;height: 100% !important;max-height: calc(100% - 140px);}

.two-column-combo {display: flex;flex-direction: row-reverse;column-gap: var(--margin-md);align-items: center;height: inherit;}

.combo-column {align-items: flex-start !important;/* justify-content: center !important; */}

img.combo-column {height: fit-content;width: auto !important;max-width: 56%;max-height: 97% !important;border-radius: var(--rounded);animation: fadein 0.6s cubic-bezier(0, 0.63, 0.25, 1);animation-delay: 0.2s;animation-fill-mode: both;min-width: 40%;object-fit: contain;}

.combo-row {column-gap: 4rem;width: 110%;margin-left: -5%;}

.combo-row:not(:first-child) {min-height: 90%;}

.combo-column.body {
  animation: fadein 0.6s cubic-bezier(0, 0.63, 0.25, 1);
  animation-delay: 0.1s;
  animation-fill-mode: both;
}

.three-row-combo {
    height: calc(100vh - 150px) !important;
    justify-content: center;
}

.combo-3-row-image {
    height: fit-content;
    max-height: 50%;
}

ul {
padding-inline-start: 20px !important;
}

td {
border-color: var(--background) !important;
background-color: var(--light);
}

td>p>span {
font-family: 'body' !important;
color: var(--text);
}

/*Progress Bar*/



.progress {
width: inherit !important;
max-height: 39px;
margin-top: 20px;
display: none;
}

/*section BG*/
.current-section-slide-icons:before {
content: "";
position: relative;
display: block;
height: 21px;
margin-top: -16px;
top: 25px;
left: 15px;
z-index: 0;
box-shadow: inset 4px -3px 3px 0px #ffffff, inset 5px 3px 8px 0px #0000002b;
background-color: var(--background);
}

/*last section BG*/
.progress>span:last-child>.current-section-slide-icons:before {
  margin-right: 10px;
  border-radius: 0px 10px 10px 0px;
}

.current-section-icon, .current-slide-icons, .complete-section-icon, .incomplete-section-icon {
width: 30px;
height: 30px;
display: inline-block;
background-position: center !important;
background-size: contain !important;
background-repeat: no-repeat !important;
color: transparent;
z-index: 4;
position: relative;
}

.current-slide-icons {
animation: expand 0.6s cubic-bezier(1, -0.01, 0.25, 1);
}

.progress>span:not(:last-child):before {
content: "";
position: relative;
display: block;
height: 20px;
width: 30px;
margin-top: -20px;
top: 25px;
left: 15px;
z-index: 0;
background-color: var(--text2);
opacity: 0.1;
}


/*.incomplete-section-icon:before, .complete-section-icon:before {
content: "";
position: relative;
display: block;
height: 20px;
width: 30px;
margin-top: 4px;
left: 15px;
z-index: -1;
background-color: var(--text2);
opacity: 0.1;
}*/

.complete-section-icon {
background: url(../../shared/lesson_statics/gui/sec_complete.png);
animation: complete 0.5s;
  animation-delay: 0.2s;
  animation-fill-mode: backwards;
}

.current-section-icon {
background: url(../../shared/lesson_statics/gui/sec_current.png);
}

.incomplete-section-icon {
background: url(../../shared/lesson_statics/gui/sec_upcoming.png);
}

.current-non-COL-icon, .current-COL-icon {
height: inherit;
width: inherit;
display: block;
}

.complete-slide{
background: radial-gradient(circle, var(--text2) 15%, rgba(43,89,107,0) 17%);
background-size: 30px;
}

.current-slide{
background: radial-gradient(circle, var(--text2) 15%, #8bb4c721 22%, #8bb4c780 43%, rgba(43,89,107,0) 51%);
background-size: 30px;
animation: current-slide 0.3s ease-in-out;
animation-direction: alternate-reverse;
}

.incomplete-slides{
background: radial-gradient(circle, var(--primary-li) 15%, rgba(43,89,107,0) 17%);
background-size: 30px;
opacity: .5;
}

.current-COL-icon {
background: radial-gradient(circle, var(--primary-li) 20%, rgba(43,89,107,0) 23%), url(../../shared/lesson_statics/gui/pg_col.png);
background-size: 30px, 91%;
background-position: center;
}

.current-COL-icon.current-slide {
background: radial-gradient(circle, var(--text2) 15%, #8bb4c721 22%, #8bb4c780 43%, rgba(43, 89, 107, 0) 51%), url(../../shared/lesson_statics/gui/pg_col_select.png);
background-size: 30px, 120%;
background-position: center;
}

.current-COL-icon.complete-slide {
background: radial-gradient(circle, var(--text2) 20%, rgba(43,89,107,0) 23%), url(../../shared/lesson_statics/gui/pg_col_complete.png);
background-size: 30px, 91%;
background-position: center;
}

/*sidebar*/

button.toggle-sidebar-button {border: none;background-image: url(../../shared/lesson_statics/gui/toc.png);background-position: center left 23px;background-repeat: no-repeat;font-family: 'body-il';color: var(--medium);background-color: transparent;font-size: var(--body);background-size: 15px;padding: 10px 20px 10px 60px;min-height: 75px;text-align: left;width: fit-content;animation: sidebar-button .3s ease;line-height: 1.4rem;justify-self: flex-start;}


button.toggle-sidebar-button:hover, .reference-button:hover {border-radius: var(--rounded_sm);background-color: #0000000d !important;color: var(--text2);}

.sidebar {
  background-color: var(--light) !important;
  border: none !important;
  height: calc(100vh - 20px) !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding: 10px 0px 10px 0px;
  box-shadow: 0px 0px 30px #00000036;
  width: 30%;
  max-width: 350px;
  z-index: 1000;
  animation: slider 0.5s cubic-bezier(0, 1.05, 0.35, 0.97);
  display: grid;
  grid-template-rows: 70px 32px max-content 46px auto;
}

.close-sidebar-button {
background-image: url(../../shared/lesson_statics/gui/back.png);
background-repeat: no-repeat;
height: 60px;
border: none !important;
color: transparent;
background-size: 23px;
margin-top: 30px;
background-position: center;
width: 95px;
align-self: flex-end;
box-shadow: var(--raised);
border-radius: 27px 0px 0px 27px;
transition: all .2s ease;
justify-self: self-end;
}

.close-sidebar-button:hover {
box-shadow: var(--raised-press);
background-color: var(--light);
transition: all .2s ease;
}

span.module-name {padding: 3px 7px;font-family: 'body';color: var(--text2);text-transform: uppercase;border-radius: var(--rounded_sm);background-color: #8bb4c757;width: fit-content;font-size: 1rem !important;margin: -30px 0 0 38px !important;}

span.lesson-title {color: var(--text2);font-family: 'heading' !important;/* width: 100%; */margin: -30px 0 29px 0px !important;padding: 2px 0px 10px 39px;font-size: 1.2rem;letter-spacing: 0.03rem;}

.sidebar-sections, button.sidebar-home-button {
width: 100%;
padding: 15px 10px 15px 40px;
text-align: left;
font-family: 'body';
font-size: 1.2rem;
background-color: transparent !important;
color: var(--medium);
background-image: url(../../shared/lesson_statics/gui/sec_upcoming.png);
background-position: center left 4px;
background-repeat: no-repeat;
background-size: 30px;
letter-spacing: 0.03rem;
}

.sidebar-sections.sidebar-current-section {
background-image: url(../../shared/lesson_statics/gui/sec_current.png);
background-position: center left 4px;
background-repeat: no-repeat;
background-size: 30px;
color: var(--text2);
font-family: 'heading';
}

button.sidebar-home-button{
  background-image: url(../../shared/lesson_statics/gui/home.png);
  color: var(--text2);
  background-size: 20px;
  background-position: top 16px left 9px;
  background-color: #00000012 !important;
  padding: 10px 40px !important;
  border-bottom-width: 1px !important;
  }
  
button.sidebar-home-button:hover {background-image: url(../../shared/lesson_statics/gui/home_hover.png);padding: 10px 60px !important;transition: padding .3s cubic-bezier(1, 0, 0, 1);font-family: 'heading';}
  

.sidebar-sections:not(:last-child), button.sidebar-home-button {
border-width: 0px 0px 1px 0px;
border-color: #ededed33 !important;
}

.sidebar-sections:last-child {
border-width: 0px;
}

.sidebar-sections.completed {
background-image: url(../../shared/lesson_statics/gui/sec_complete.png);
color: var(--text2);
}

.sidebar-sections.completed:hover {/* background-color: #00000014 !important; */padding: 15px 0px 15px 50px;transition: padding .3s cubic-bezier(1, 0, 0, 1);font-family: 'heading';letter-spacing: initial;}


.sidebar-sections-div {
width: 100% !important;
max-height: calc(100vh - 206px);
height: 100%;
margin-top: 3px;
}

/* Scrollbar-main */

/* width */
::-webkit-scrollbar {width: 13px;margin-left: -6px;}

/* Track */
::-webkit-scrollbar-track {
background: #ebe0e0;
}

::-webkit-scrollbar-track:hover {
  background: var(--secondary-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #8b8b8b;
  border-radius: 8px;
  border: solid 3px var(--light);}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #0b889f;
border: solid 3px var(--light);
}

/* Scrollbar-toc */

/* width */
.sidebar-sections-div::-webkit-scrollbar, .left-panel::-webkit-scrollbar {
width: 13px;
}

/* Track */
.sidebar-sections-div::-webkit-scrollbar-track, .left-panel::-webkit-scrollbar-track {
background: #fff0;
}

.sidebar-sections-div::-webkit-scrollbar-track:hover, .left-panel::-webkit-scrollbar-track:hover {
  background: var(--secondary-color);
}

/* Handle */
.sidebar-sections-div::-webkit-scrollbar-thumb, .left-panel:-webkit-scrollbar-thumb {
  background: #dadada;border-radius: 8px;border: solid 3px #ededed;
}

/* Handle on hover */
.sidebar-sections-div::-webkit-scrollbar-thumb:hover.left-panel::-webkit-scrollbar-thumb:hover {
background: #0b889f; 
border: solid 3px var(--light) !important;
}

/* Scrollbar-content */

/* width */
.player::-webkit-scrollbar, .intro-col::-webkit-scrollbar, .landing::-webkit-scrollbar{
width: 8px;
}

/* Track */
.player::-webkit-scrollbar-track, .intro-col::-webkit-scrollbar-track, .landing::-webkit-scrollbar-track {
background: #fff0;
}

.player::-webkit-scrollbar-track:hover, .intro-col::-webkit-scrollbar-track:hover, .landing::-webkit-scrollbar-track:hover{
  background: var(--secondary-color);
}

/* Handle */
.player::-webkit-scrollbar-thumb, .intro-col::-webkit-scrollbar-thumb, .landing::-webkit-scrollbar-thumb{
  background: #dadada;border-radius: 8px; border: none;}

/* Handle on hover */
.player::-webkit-scrollbar-thumb:hover, .intro-col::-webkit-scrollbar-thumb:hover, .landing::-webkit-scrollbar-thumb:hover{
background: var(--medium) ; border: none;
}

.player::-webkit-scrollbar-thumb:active, .intro-col::-webkit-scrollbar-thumb:active, .landing::-webkit-scrollbar-thumb:active{
background: var(--text2) ; border: none;
}

/*audio-player*/

.audio, .video, .feedback-display {padding-bottom: 15px;flex: 0 1 60px;}

.audio:empty {
display: none;
}

.audio-controls {
display: flex;
width: 100% !important;
align-items: center;
column-gap: 20px;
flex-direction: row;
}

.nav-row {height: 60px !important;justify-content: space-between !important;display: grid !important;grid-template-columns: auto auto 11rem;align-items: start !important;z-index: 2;flex: 0 0 60px;}

.wrapper button, span {
margin-top: 0px !important;
font-size: 1.1em !important;
line-height: 1.5em;
font-family: 'body' !important;
}

.playback {
display: flex;
align-items: center;
justify-content: center;
}

.bar-waiting {
display: none;
}

.bar-playing {
}

.text-cue {font-family: 'body' !important;/* font-size: 1vw; *//* animation: fade 0.3s; *//* animation-delay: 0.4s; */animation-fill-mode: both;}

#playback-bar.bar-paused {
filter: saturate(0);
animation: paused .4s infinite alternate-reverse;
display: initial;
}

.audio-speed-button {width: 40px;height: 40px;border-radius: 50%;border-width: 0px;box-shadow: var(--raised);font-family: 'body';color: var(--text);line-height: 10px;}

.audio-speed-button:nth-child(2) {border-radius: 20px 0 0 20px;margin-right: -20px;margin-left: -58px;padding: 0 0 0 45px;width: 80px;box-shadow: none;background-color: #64cbde45;color: var(--text);animation: expand3 0.3s ease !important;}

.audio-speed-button:nth-child(3) {border-radius: 0;margin-right: -20px;box-shadow: none;background-color: #64cbde45;color: var(--text);}

.audio-speed-button:nth-child(4) {border-radius: 0 20px 20px 0;box-shadow: none;background-color: #64cbde45;color: var(--text);}

.audio-speed-button:nth-child(2):hover, .audio-speed-button:nth-child(3):hover, .audio-speed-button:nth-child(4):hover {background-color: #27acc445;box-shadow: none;}

.autoplay-on-button, .autoplay-off-button {
width: 40px;
height: 40px;
border-radius: 50%;
border-width: 0px;
box-shadow: var(--raised);
color: transparent;
background-image: url(../../shared/lesson_statics/gui/autoplay.png);
background-position: top 9px right 9px;
background-repeat: no-repeat;
background-size: 23px;
}

.autoplay-off-button {
background-image: url(../../shared/lesson_statics/gui/autoplay_on.png);
}

.autoplay-on-button:hover, .autoplay-off-button:hover, .audio-speed-button:hover, .audio-play-button:hover, .audio-pause-button:hover {
box-shadow: var(--raised-press);
background-color: var(--light);
}

.audio-play-button, .audio-pause-button {
width: 50px;
height: 50px;
margin: 0px 0;
border-radius: 50%;
border-width: 0px;
box-shadow: var(--raised);
color: transparent;
background-image: url(../../shared/lesson_statics/gui/play.png);
background-position: center right 14px;
background-repeat: no-repeat;
background-size: 16px;
}

.audio-pause-button {
background-image: url(../../shared/lesson_statics/gui/pause.png);
background-position: center;
}

input.playback-bar {
width: calc(18vw - 110px);
animation: playbackbar .2s cubic-bezier(1, 0, 0, 1);
}

/* The slider itself */
input.playback-bar {
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: 2px;
background: var(--light);
outline: none;
}

/* Mouse-over effects */
input.playback-bar:hover {
background: #d8d8d8;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
input.playback-bar::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 18px; /* Set a specific slider handle width */
height: 18px; /* Slider handle height */
background: var(--tertiary);
border: solid 5px var(--background);
border-radius: 9px;
cursor: pointer;
transition: all .2s ease;
}

input.playback-bar::-webkit-slider-thumb:hover {
transform: scale(1.7);
background: var(--tertiary);
border-radius: 13px;
transition: all .2s ease;
border: solid 3px var(--background);
}

.current-time, .total-time {
font-family: 'body-il';
font-size: var(--body2);
margin: -3px 10px 0 10px;
letter-spacing: 1px;
}

.current-time{
color: var(--text2);
}

.total-time {
color: #929799;
}

/*help/counter*/

.counter {
padding-right: 30px;
font-family: 'body';
color: var(--medium);
justify-self: end;
margin-top: 27px;
display: flex;
align-items: center;
position: absolute;
}

span.current-page-num {color: var(--primary);font-family: 'heading' !important;padding-right: 0.3rem;margin-bottom: -1px;}

.help-button {
background-color: #ede9e9;
color: transparent;
width: 25px;
height: 25px;
border-radius: 50%;
border: 0px !important;
margin-left: 52px;
box-shadow: -3px -3px 4px 0px #fafafaa8, 5px 5px 8px 0px #bfbfbfba;
}

.help-button:hover {
background-color: var(--light);
box-shadow: var(--raised-press);
}

.help-button:hover:before {
color: var(--primary);
}

.help-button:before {
content: "?";
position: relative;
color: var(--text);
display: block;
font-size: 18px;
transform: translateY(10%);
}

.help-button:after {content: "";width: 1px;height: 15px;background-color: #adadad87;position: absolute;top: 9px;margin-left: -40px;}

.slide-nav {
width: 65px;
}

.back-button {
width: 65px;
height: 100px;
font-size: 0;
box-shadow: var(--inset);
border: none;
border-radius: 0px 27px 27px 0px;
background-color: #dce1e5;
cursor: pointer;
background-image: url(../../shared/lesson_statics/gui/back.png);
background-position: center;
background-repeat: no-repeat;
}

.back-button:hover {
box-shadow: var(--inset-press);
transition: all .2s ease;
background-color: var(--secondary);
background-position: 40% center;
}

.next-button, .home-button {
width: 65px;
height: 100px;
font-size: 0;
box-shadow: var(--inset);
border: none;
border-radius: 27px 0px 0px 27px;
background-color: var(--primary);
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
}

.next-button{
background-image: url(../../shared/lesson_statics/gui/fwd.png);
}

.home-button {
background-image: url(../../shared/lesson_statics/gui/home_li.png);
background-size: 23px;
}

.next-button:hover, .home-button:hover {
box-shadow: var(--inset-press);
transition: all .2s ease;
background-color: var(--primary);
background-position: 60% center;
}

.player {height: 100% !important;width: 100% !important;max-width: calc(100vw - 130px);}

.canvas {border: 0px !important;display: flex;align-content: center;flex-wrap: wrap !important;}

img, video {max-height: initial !important;}

.image-slide {
    display: flex;
    justify-content: center;
    border-radius: var(--rounded_sm);
    align-content: center;
}

.content {margin: initial;max-height: calc(100vh - 150px);max-width: 80%;display: flex;flex-direction: column;align-self: center;justify-self: center;animation: fadein .4s cubic-bezier(0, 0.56, 0.31, 0.94);width: 100%;flex-wrap: nowrap;align-content: center;justify-content: flex-start;border: none !important;height: fit-content;/* flex: 4 1 100%; */overflow-x: visible;}

.two-row-combo {height: 100%;display: flex;flex-direction: column;row-gap: 1vh;}

.wrapper {
width: 100%;
}

.text-slide {
max-width: var(--body-width);
align-self: center;
}

.button-wrapper {
  justify-content: center;
  margin-top: var(--margin-md);
  display: inline-block !important;
}

.s-r-button-container {animation: fadein 0.3s cubic-bezier(0, -0.08, 0, 1.03);display: flex !important;justify-content: center;}

.submit-button {position: relative;border-radius: var(--rounded) !important;box-shadow: var(--raised);border: none;text-align: center;width: 150px;padding: 10px !important;cursor: pointer;font-family: 'body';font-size: 1.2rem;color: var(--text2);margin-top: 2vh !important;animation: fadein 0.3s cubic-bezier(0, -0.08, 0, 1.03);}

.submit-button>.body {
font-size: var(--body) !important;
}

.submit-button:hover {
box-shadow: var(--raised-press);
transition: box-shadow .2s ease;
background-color: var(--light);
color: var(--text2);
}

.reset-button {position: relative;border: none;text-align: center;width: 100px;padding: 10px 15px 10px 40px !important;font-family: 'body';font-size: 1.2rem;color: var(--text2);margin-top: 2vh !important;background-color: transparent !important;background-image: url(../../shared/lesson_statics/gui/reset.png);background-position: top 17px left 10px;background-repeat: no-repeat;background-size: 15px;margin-right: 2vh;animation: fadein 0.3s cubic-bezier(0, -0.08, 0, 1.03);border-radius: var(--rounded);}

.reset-button>.body {
font-size: var(--body) !important;
}

.reset-button:hover {background-color: var(--light) !important;}

/*sequencing w/image*/

.heading>button {
  margin-right: 1rem;
  margin-left: -1rem;
  border: none !important;
  width: 90px;
  height: 50px;
  background-image: url(../../shared/lesson_statics/gui/col_image.png);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: center;
  box-shadow: var(--raised);
  border-radius: var(--rounded_sm);
  color: transparent;
}

.heading>button:hover {
  box-shadow: var(--raised-press);
}

.sequence-slide>.popup-background {
  width: 100vw !important;
  height: 100vh !important;
  z-index: 4;
  position: absolute;
  top: 0;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #00000080;
  overflow: hidden;
}

.sequence-slide>.popup-background>.image-popup {
  width: 80vw !important;
  max-width: initial;
  border-radius: var(--rounded_sm);
  padding: 1.2rem 2rem 2rem 2rem !important;
  animation: fadein .5s cubic-bezier(1, -0.01, 0, 0.98);
  display: grid;
  box-shadow: 0 0 57px #0000006b;
}

.close-image-popup {
  justify-self: flex-end;
}

.close-image-button {
  border: none;
  background-image: url(../../shared/lesson_statics/gui/remove.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
  color: transparent;
  width: 50px;
  height: 50px;
  margin-top: -13px;
  margin-right: -26px;
  border-radius: var(--rounded_sm);
  position: relative;
  transition: box-shadow .2s ease;
}

.close-image-button:hover {
  background-color: var(--light);
  box-shadow: var(--raised-press);
}

/*Sequencing COL*/

.sequence {
width: 100%;
align-items: flex-start;
height: fit-content;
overflow: visible;
}

.unordered-sequence-group>span, .numbering, .sequence-items {
display: flex;
flex-direction: column;
row-gap: var(--margin-sm);
}

.unordered-span {
  margin-right: calc(var(--margin-md));
  padding: 0rem 2rem 0rem 2rem;
  min-height: 100%;
  position: relative;
  height: inherit;
  border-radius: var(--rounded);
  min-width: 50%;
}

button.choice-button {
border: none !important;
font-family: 'body';
font-size: var(--body2);
cursor: grab;
background-color: transparent;
/* animation: fadein 0.6s cubic-bezier(0, 0.63, 0.25, 1); */
/* animation-delay: 0.2s; */
/* animation-fill-mode: both; */
}

.unordered-sequence-group>li.options>button.choice-button {
text-align: right;
}

li#options>button.choice-button {
text-align: right;
}

.sorted-answers>button.choice-button {
text-align: left;
background-color: #8bb4c796;
color: var(--text2);
cursor: grab;
padding-left: 20px !important;
background-image: url(../../shared/lesson_statics/gui/thumb.png);
background-position: top 50% left 10px;
background-repeat: no-repeat;
width: 407px;
border-radius: var(--rounded_sm);
padding: var(--margin-sm) !important;
padding-left: 20px !important;
font-family: 'body' !important;
font-size: var(--body2);
}

.unordered-sequence-group {border: none !important;justify-content: flex-end;}

span.unordered-span:empty {
    display: none;
}

div.sorted-numbers {
background-color: transparent;
color: var(--text);
font-family: 'heading';
height: inherit;
}

.sata-unordered-button {padding: var(--margin-sm) !important;cursor: grab;border-radius: var(--rounded_sm) !important;font-size: var(--body2);height: 45px;text-align: right !important;line-height: 1.2rem;}

li.options, li.sorted-answers {
min-width: initial !important;
border-radius: var(--rounded_sm);
font-family: 'body' !important;
font-size: var(--body);
}

li.options{width: fit-content;align-self: end;cursor: grab;height: 45px;padding: initial;}

li.options:hover {
outline: solid 2px var(--primary);
outline-offset: 2px;
}

.body.answers {
font-size: var(--body) !important;
}

.sequence-group {
background-color: transparent !important;
height: 45px;
}

.ordered-sequence-group>div {
display: flex;
flex-direction: column;
row-gap: var(--margin-sm);
}

li.sorted-numbers {
height: initial;
width: initial !important;
background-color: transparent !important;
color: var(--text) !important;
font-family: 'heading' !important;
box-shadow: none !important;
}

.sequence-group>span {
display: flex;
flex-direction: column;
row-gap: var(--margin-sm);
width: 100%;
}

.sata-button.nonplaceholder-item {width: calc(100% - 20px);background-color: #b4cfdb;padding: 0 0 0 20px !important;background-image: url(../../shared/lesson_statics/gui/thumb.png);background-position: top 50% left 10px;background-repeat: no-repeat;border-radius: var(--rounded_sm) !important;cursor: grab;line-height: 1rem;}

.numbering>.sorted-numbers:before {
border: dashed 1px var(--medium);
width: 455px;
content: "";
position: absolute;
height: 37px;
margin: -7px 0px 0px -13px;
border-radius: var(--rounded_sm);
min-width: fit-content;
opacity: .5;
pointer-events: none;
margin-left: 400px;
}

.numbering>.sorted-numbers:before:hover {
opacity:1 ;
}

.sequence-group>span>#sorted-answers {
padding: 0px !important;
}

.sequence-group>span>#sorted-answers:hover {
outline: solid 2px var(--primary);
outline-offset: 2px;
}

.numbering>.sorted-answers>div {
font-family: 'heading';
color: var(--text2);
}

li.sorted-answers {
width: fit-content;
outline: dashed 1px var(--medium);
padding: 0px !important;
height: 45px;
}

.body.sorted-answers {
font-size: var(--body);
}

.ordered-sequence-group {
margin-left: calc(var(--margin-md)* 0.5) !important;
border: none !important;
}

.ordered-sequence-group, .unordered-sequence-group {width: fit-content;margin: initial !important;padding-top: 2px;}

button.choice-button.incorrect-answer, .sorted-answers>button.choice-button.incorrect-answer {
background-color: var(--bad-li) !important;
color: var(--bad) !important;
pointer-events: none;
}

.sorted-answers>.incorrect-answer:before {
content: "";
width: 20px;
height: 20px;
position: absolute;
background-image: url(../../shared/lesson_statics/gui/incorrect_sm.png);
background-repeat: no-repeat;
background-size: 20px;
margin-left: -30px;
margin-top: 1px;
}

.sorted-answers>.correct-answer:before {
content: "";
width: 20px;
height: 20px;
position: absolute;
background-image: url(../../shared/lesson_statics/gui/correct_sm.png);
background-repeat: no-repeat;
background-size: 20px;
margin-left: -30px;
margin-top: 1px;
}

button.choice-button.correct-answer, .sorted-answers>button.choice-button.correct-answer {
background-color: var(--good-li) !important;
color: var(--good) !important;
pointer-events: none;
}

button.choice-button.incorrect-answer.selected:before {
content: "";
width: 25px;
height: 25px;
position: absolute;
background-image: url(../../shared/lesson_statics/gui/incorrect_sm.png);
background-repeat: no-repeat;
background-size: 25px;
margin-left: -29px;
}

button.choice-button.correct-answer:before {
content: "";
width: 25px;
height: 25px;
position: absolute;
background-image: url(../../shared/lesson_statics/gui/correct_sm.png);
background-repeat: no-repeat;
background-size: 25px;
margin-left: -29px;
}

button.choice-button.selected.correct-answer:before {
background-image: none !important;
}

/*Hotspot COL*/

.hotspot-slide {
display: flex;
flex-direction: column;
align-items: center;
}

.selected-hotspot {filter: drop-shadow(0px 4px 6px var(--primary));border: none;background-color: transparent;box-shadow: initial !important;}

.hotspot-area {height: 57vh;min-height: 300px;/* max-height: 72%; */flex-shrink: 3;display: flex;}

.hotspot-bg {
width: fit-content !important;
}

/*SATA*/

.answers {display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;max-height: 34vh;column-gap: var(--margin-sm);width: 80%;align-content: center;row-gap: calc(var(--margin-sm)* 2);}

.multiple-choice-slide>.answers {flex-wrap: nowrap !important;max-width: 1000px;}

.sata-option {
text-align: left !important;
font-size: var(--body2) !important;
height: 1.7rem !important;
margin: 0px !important;
color: var(--text) !important;
}

.answers>.choice-button {
cursor: pointer;
}

.answers>.choice-button:hover>.body {/* color: var(--text) !important; */font-weight: 600;}

button.options.selected {
background-color: var(--light);
border-radius: var(--rounded_sm);
font-weight: 600;
}

.selected>.sata-text {
font-family: 'heading';
}

.sata-option.selected {
background-color: transparent !important;
}

/* Customize the label (the container) */
.sata-checkbox {
cursor: pointer;
}

/* Hide the browser's default radio button */
.sata-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

.sata-checkbox {
transform: scale(1.5) !important;
filter: hue-rotate(324deg) brightness(1.2);
}

/* Create a custom radio button */
.sata-checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.sata-checkbox:hover input ~ .sata-checkmark {
background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.sata-checkbox input:checked ~ .sata-checkmark {
background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the indicator (dot/circle) when checked */
.sata-checkbox input:checked ~ .sata-checkmark {
display: block;
}

/* Style the indicator (dot/circle) */
.sata-checkbox .sata-checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}

/*Categorizing COL*/

.list-group {
height: fit-content;
min-height: initial !important;
width: fit-content;
align-items: flex-start;
flex-direction: row !important;
flex-wrap: wrap;
}

.body.next-cat-item, button.cat-item{
font-size: var(--body);
padding: var(--margin-sm) calc(var(--margin-sm)* 2);
background-color: var(--secondary);
border-radius: var(--rounded_sm);
border: none;
text-align: left;
}

.body.next-cat-item {animation: pulse 1s 1;}

.add-cat-button {
width: 100%;
padding: var(--margin-sm);
padding-right: 40px;
border: dashed 1px var(--medium);
border-radius: var(--rounded_sm);
text-align: left;
background-image: url(../../shared/lesson_statics/gui/cat_add.png);
background-position: top 50% right 10px;
background-repeat: no-repeat;
background-size: 15px;
background-color: transparent;
}

.add-cat-button:hover {
background-color: var(--light) !important;
border: solid 1px var(--primary);
}

.add-cat-button>.body {
color: var(--text) !important;
}

.categories>div>div {
width: 100% !important;
}

.categories>div {
width: inherit;
}

.categories {
width: 100% !important;
column-gap: var(--margin-md);
padding: initial;
margin-top: var(--margin-md);
}

.categories>div>div.list-group {
height: fit-content;
min-height: initial !important;
width: fit-content;
border-radius: var(--rounded_sm);
width: 100%;
}

.list-group>span>li {
border: none !important;
width: fit-content;
min-width: initial !important;
padding: initial !important;
}

.list-group>span {
display: flex;
flex-wrap: wrap;
column-gap: var(--margin-sm);
row-gap: var(--margin-sm);
margin-top: var(--margin-sm) !important;
}

.cat-item>span.body {
padding: initial !important;
}

button.cat-item:hover {
background-color: var(--bad-li);
padding-right: 20px;
transition: padding .2s ease;
background-image: url(../../shared/lesson_statics/gui/remove.png);
background-position: top 50% right 5px;
background-repeat: no-repeat;
background-size: 10px;
}

button.cat-item.correct-answer::before, button.cat-item.incorrect-answer::before {
margin-left: -23px;
}

/*MC COL*/

.multiple-choice-slide>.heading {
    max-width: 925px;
    width: 75%;
}

.multiple-choice-slide>.answers>button, .combo-column>.answers>button.choice-button {
border-radius: var(--rounded);
border: none;
background-color: var(--light);
width: 100%;
text-align: left;
padding: calc(var(--margin-sm)* 2.5);
font-family: 'body';
}

.multiple-choice-slide>.answers>button:hover, .combo-column>.answers>button.choice-button:hover {
box-shadow: var(--inset-press);
transition: box-shadow 0.5s ease;
outline: solid 2px var(--primary);
outline-offset: 2px;
}

.multiple-choice-slide>.answers>button.selected, .combo-column>.answers>button.selected {box-shadow: var(--inset);background-color: var(--primary);color: var(--light) !important;font-family: 'heading';outline: solid 2px var(--primary);outline-offset: 2px;}

button.choice-button.incorrect-answer, .combo-column>.answers>button.incorrect-answer {
background-color: var(--light) !important;
}

button.choice-button.selected.incorrect-answer>.body, .combo-column>.answers>button.choice-button.selected.incorrect-answer>.body {
color: var(--bad) !important;
font-family: 'body';
}

button.choice-button.selected>.body, .combo-column>.answers>button.choice-button.selected>.body {
color: white;
font-family: 'heading';
letter-spacing: -0.3px;
}

button.choice-button.selected.incorrect-answer, .combo-column>.answers>button.choice-button.selected.incorrect-answer {
box-shadow: none !important;
outline: solid 2px var(--primary);
outline-offset: 2px;
background-color: var(--bad-li) !important;
}

button.choice-button.selected.correct-answer, .combo-column>.answers>button.choice-button.selected.correct-answer {
box-shadow: none !important;
outline: solid 2px #93c08e;
outline-offset: 2px;
background-color: var(--good-li) !important;
}

button.choice-button.selected.correct-answer>.body, button.choice-button.correct-answer>.body, .combo-column>.answers>button.choice-button.selected.correct-answer>.body, .combo-column>.answers>button.choice-button.correct-answer>.body {
color: var(--good) !important;
font-family: 'heading';
}

/*MC COL w/image*/
.multiple-choice-image-slide>.combo-column>.heading {
  font-size: var(--heading2);
  line-height: 1.6rem;
  margin-bottom: 3vh;
}

.multiple-choice-image-slide {column-gap: var(--margin-md);width: 110%;display: grid !important;grid-template-columns: 50% 50%;margin-left: -5%;max-height: inherit;}

.multiple-choice-image-slide>.combo-column {height: fit-content;align-self: center;max-height: 90%;}

.multiple-choice-image-slide>.combo-column>img {height: inherit;/* width: inherit; */max-height: 75vh!important;display: flex;object-fit: contain;border-radius: var(--rounded_sm);}

.combo-column>.answers {
width: 100%;
flex-wrap: nowrap;
}

/*Matching COL*/

.matching-slide, .sequence-slide, .category-slide, .SATA-slide, .multiple-choice-slide, .inv-hotspot-slide  {width: inherit !important;align-items: center;display: flex;flex-direction: column;height: 100%;}

.wrapper-items {
width: 100% !important;
display: grid;
}

.left-items {width: calc(50% - 50px) !important;height: fit-content !important;border: none !important;display: flex;flex-direction: column;align-items: flex-end;}

p.left.body:before {
content: "";
background-color: var(--background);
width: 15px;
height: calc(1.2rem + 27px);
display: block;
right: calc(50% + 49px);
margin-top: -10px;
position: absolute;
clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

p.left.body:hover:before {
content: "";
background-color: var(--background);
width: 15px;
height: calc(1.2rem + 27px);
display: block;
right: calc(50% + 49px);
margin-top: -10px;
position: absolute;
clip-path: polygon(100% 0, 100% 100%, 0 50%);
filter: brightness(1);
}

.left-items>p, .left-items>p:hover {
padding: 10px 20px 10px 10px;
border: 0px !important;
margin: 0px;
font-size: var(--body2);
margin-bottom: var(--margin-sm);
width: fit-content;
background-color: var(--light);
border-radius: var(--rounded) 0px 0px var(--rounded);
text-align: right;
}


.right-items {
width: calc(50% - 50px) !important;
height: fit-content !important;
border: none !important;
display: flex;
flex-direction: column;
align-items: flex-start;
}

.right-items>p,.right-items>p:hover {
padding: 10px 10px 10px 20px;
border: 0px !important;
margin: 0px;
font-size: var(--body2);
margin-bottom: var(--margin-sm);
width: fit-content;
background-color: var(--light);
border-radius: 0px var(--rounded) var(--rounded) 0px;
clip-path: polygon(100% 0%, 100% 100%, 15px 100%, 0% 50%, 15px 0%);
text-align: left;
}

.right-items>p:hover,.left-items>p:hover {
border-color: var(--primary) !important;
color: var(--text2) !important;
background-color: #d5d5d5;
}

p.right.body.selected, p.left.body.selected  {
font-weight: 600;
color: var(--primary-hover);
box-shadow: none !important;
background-color: var(--secondary);
}

.body.matched:hover {
background-color: var(--primary-hover) !important;
color: var(--background) !important;
}

.body.matched {
background-color: var(--primary) !important;
color: var(--background);
}

.line-svg>line {
stroke: var(--tertiary);
stroke-linecap: round;
filter: drop-shadow(2px 2px 0px #f5f5f5) drop-shadow(-2px -2px 0px #f5f5f5)drop-shadow(-2px 2px 0px #f5f5f5)drop-shadow(2px -2px 0px #f5f5f5);
stroke-width: 3;
}

/*COL Feedback*/

.correct-feedback, .incorrect-feedback {
border: none !important;
font-family: 'heading';
font-size: 1.1rem;
max-width: var(--body-width);
color: transparent !important;
background-position: center left 7px;
background-repeat: no-repeat;
background-size: 23px;
padding: 0px 0px 3px 44px;
}

.incorrect-feedback {
color: var(--bad) !important;
background-image: url(../../shared/lesson_statics/gui/incorrect.png);
animation: incorrect 0.5s ease-in-out;
}

.correct-feedback {
color: var(--good) !important;
background-image: url(../../shared/lesson_statics/gui/correct.png);
animation: correct 1s ease-in-out forwards;
}

.feedback-popup {
  background-color: var(--background) !important;
  border-radius: var(--rounded);
  width: 40% !important;
  max-width: var(--body-width);
  padding: 2.3rem !important;
  animation: feedback2 0.5s cubic-bezier(1, -0.01, 0, 0.98);
  max-height: 100%;
  overflow-x: auto;
  }


.popup-background {width: 100% !important;height: 100% !important;z-index: 6;}

.feedback-title.incorrect-feedback, .feedback-title.correct-feedback {
align-self: flex-start;
margin-bottom: 1rem;
font-family: 'heading';
font-size: var(--heading2);
border: none !important;
padding: 0px !important;
animation: none !important;
background-position: center left;
background-repeat: no-repeat;
background-size: 23px;
padding-left: 40px !important;
}

.feedback-text {
font-family: 'body';
color: var(--text);
font-size: var(--body);
}

button.close-feedback-button {
border-radius: var(--rounded) !important;
box-shadow: var(--raised);
border: none;
text-align: right;
width: fit-content;
padding: 10px 20px 10px 60px !important;
cursor: pointer;
font-family: 'body';
font-size: var(--heading2);
color: var(--text2) !important;
margin-top: var(--margin-md) !important;
background-image: url(../../shared/lesson_statics/gui/check.png);
background-position: top 18px left 24px;
background-repeat: no-repeat;
background-size: 15px;
}

button.close-feedback-button:hover {
box-shadow: var(--raised-press);
transition: box-shadow .2s ease;
background-color: var(--light);
color: var(--text2);
}

/*Investigative COL*/

.hint {
  font-family: 'body-il';
  color: var(--text);
  width: 14rem;
  margin-right: -28%;
  margin-top: -11%;
  position: relative;
  padding: 0 0 50px 28px;
  background-image: url(../../shared/lesson_statics/gui/hint_arrow.png);
  background-position: bottom 11px left 2px;
  background-repeat: no-repeat;
  background-size: 99px;
  width: 16ch !important;
}

.inv-hotspot-slide>div {
  width: inherit;
  align-items: center;
  display: grid !important;
  grid-template-columns: 50% 40%;
  grid-template-rows: 1fr;
  grid-column-gap: 4rem;
}

.inv-unselected-hotspot.inv-hotspot-icon {
width: 50px !important;
height: 50px !important;
border-radius: 50%;
background: radial-gradient(circle, #ff5a5ad1, #ff5a5ad1 36%, #ff5a5a69 39%);
transition: margin .2s ease, height .2s ease, width .2s ease;
position: absolute;
margin: -15px 0 0 -15px;
color: transparent;
}

.inv-unselected-hotspot.inv-hotspot-icon:hover {
background: radial-gradient(circle, #ff5a5a, #ff5a5a 34%, #ff5a5a69 36%);
transition: margin .2s ease, height .2s ease, width .2s ease;
width: 60px !important;
height: 60px !important;
margin: -20px 0 0 -20px;
}

.inv-unselected-hotspot.inv-hotspot-icon.inv-completed-hotspot {
background: url(../../shared/lesson_statics/gui/complete.png), radial-gradient(circle, #10ba1070, #14c3147a 35%, #10ba102b 40%);
background-position: center;
background-repeat: no-repeat;
background-size: 12px, 100%;
}

.inv-hotspot-icon.inv-selected-hotspot {
width: 70px !important;
height: 70px !important;
border-radius: 50%;
background: radial-gradient(circle, var(--primary), var(--primary) 30%, #00a99d30 34%);
transition: margin .2s ease, height .2s ease, width .2s ease;
position: absolute;
margin: -25px 0 0 -25px;
}

.inv-hotspot-icon.inv-selected-hotspot:hover {
width: 70px !important;
height: 70px !important;
background: radial-gradient(circle, var(--primary), var(--primary) 30%, #00a99d30 34%);
margin: -25px 0 0 -25px;
cursor: default;
}

.inv-unselected-hotspot.inv-hotspot-icon.inv-selected-hotspot:before {
content: "i";
position: relative;
font-size: 1rem;
color: var(--light);
transform: translate(50%, 50%);
left: 47%;
top: 34%;
font-family: 'heading';
}

.inv-hotspot-area {
  border-radius: var(--rounded);
  outline: solid 8px var(--light);
  box-shadow: var(--raised);
  transition: all .2s ease;
  justify-self: flex-end;
}

.inv-hotspot-area:hover {
transform: scale(1.04);
transition: all .2s ease;
box-shadow: -8px -8px 10px 0px #ffffff, 7px 6px 15px 0px #bfbfbf;
}

.inv-hotspot-text:before {    
  position: absolute;
  margin-left: -2.9rem;
  display: block;
  width: 30px;
  height: 30px;
  content: "";
  background: url(../../shared/lesson_statics/gui/investigation.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  /* filter: hue-rotate(349.7deg) saturate(1.5) brightness(1.8); */
  top: 47%;
}

.inv-hotspot-text {
  width: fit-content;
  height: fit-content;
  border-radius: var(--rounded);
  padding: var(--margin-md);
  color: var(--text2);
  font-family: 'body';
  font-size: var(--body2) !important;
  line-height: 1.7rem;
  background: radial-gradient(circle at left, #314e593d, #314e5930 4%, #314e5908 22%);
  animation: invest .5s ease;
}

/*scene setter*/

img.canvas-background {
border-radius: var(--rounded);
}

.scene-setter-slide {
    height: 100%;
    width: fit-content;
}

.cue {
  animation: fadein 0.6s cubic-bezier(0, 0.63, 0.25, 1);
  animation-fill-mode: both;
}

.scene-setter-slide>.cue:nth-child(2) {
  animation-delay: 0.1s;
  }
  .scene-setter-slide>.cue:nth-child(3) {
  animation-delay: 0.3s;
  }
  .scene-setter-slide>.cue:nth-child(4) {
  animation-delay: 0.5s;
  }
  .scene-setter-slide>.cue:nth-child(5) {
  animation-delay: 0.7s;
  }
  .scene-setter-slide>.cue:nth-child(6) {
  animation-delay: 0.9s;
  }
  .scene-setter-slide>.cue:nth-child(7) {
  animation-delay: 1.1s;
  }
  .scene-setter-slide>.cue:nth-child(8) {
  animation-delay: 1.3s;
  }
  .scene-setter-slide>.cue:nth-child(9) {
  animation-delay: 1.5s;
  }
  .scene-setter-slide>.cue:nth-child(10) {
  animation-delay: 1.7s;
  }

.scene-setter-slide>.cue:nth-child(2)>.text-cue {
  animation-delay: 0.5s;
  }
  .scene-setter-slide>.cue:nth-child(3)>.text-cue {
  animation-delay: 0.6s;
  }
  .scene-setter-slide>.cue:nth-child(4)>.text-cue {
  animation-delay: 0.7s;
  }
  .scene-setter-slide>.cue:nth-child(5)>.text-cue {
  animation-delay: 0.8s;
  }
  .scene-setter-slide>.cue:nth-child(6)>.text-cue {
  animation-delay: 0.9s;
  }

  .scene-setter-slide>.cue:nth-child(7)>.text-cue {
  animation-delay: 1s;
  }
  .scene-setter-slide>.cue:nth-child(8)>.text-cue {
  animation-delay: 1.1s;
  }
  .scene-setter-slide>.cue:nth-child(9)>.text-cue {
  animation-delay: 1.2s;
  }
  .scene-setter-slide>.cue:nth-child(10)>.text-cue {
  animation-delay: 1.3s;
  }

.completion-pop-up{
width: 33rem !important;
box-shadow: 0 0 30px #00000091;
}

.completion-banner {
background-image: url(../../shared/lesson_statics/gui/completion_top.png) !important;
}

.completion-title {
font-family: 'title' !important;
font-size: 2.3rem !important;
color: var(--text);
margin-bottom: 2rem !important;
}

.completion-text {
font-size: 1rem !important;
width: 20rem !important;
}

.return-home-button {
background-image: url(../../shared/lesson_statics/gui/home.png) !important;
box-shadow: initial !important;
background-color: transparent !important;
font-size: var(--heading2) !important;
}

.return-home-button:hover {
background-color: var(--light) !important;
}

.save-close-button{
background-image: none;
font-size: var(--heading2) !important;
} 

@keyframes fade {
0% {opacity:0;}
100% {opacity:1;}
}

@keyframes fadein {
0% {opacity:0; transform: translateY(75px);}
75% {/* opacity: .5; */}
100% {opacity:1; transform: translateY(0px);}
}

@keyframes reference {
0% {opacity:0; margin-top: -20px;}
100% {opacity:1; margin-top: 0px;}
}

@keyframes slider {
0% {left:-100%;}
100% {left: 0px;}
}

@keyframes expand {
0% {width:0px; opacity: 0;}
100% {width:30px; height:30px;}
}

@keyframes expand2 {
0% {width:0px; opacity: 0;}
100% {width:40px; height:40px; opacity: 1;}
}

@keyframes expand3 {
0% {width:0px; opacity: 0;}
100% {width:80px; height:40px; opacity: 1;}
}

@keyframes current-slide {
0% {background: radial-gradient(circle, var(--text2) 15%, #8bb4c721 22%, #8bb4c780 43%, rgba(43,89,107,0) 51%); transform: scale(1);}
50% {transform: scale(1.2);}
100% {background: radial-gradient(circle, var(--text2) 15%, #8bb4c721 17%, #8bb4c780 15%, rgba(43,89,107,0) 18%); transform: scale(1);}
}

@keyframes pulse {
0%, 100% {
  background-color: var(--secondary); /* Initial and final background color */
}
25%, 75% {
  background-color: #dcdcdc; /* First and third pulse color */
}
50% {
  background-color: #e6e6e6; /* Second pulse color */
}
}

@keyframes choice2 {
0% {margin-top: -2.3rem;}
100% {margin-top: 0;}
}

@keyframes invest {
0% {background: radial-gradient(circle at left, #314e5959, #314e5940 4%, #314e5908 22%); color: transparent;}
50% {background: radial-gradient(circle at left, #314e5959, #314e5940 100%, #314e5908 22%); color: transparent;}
100% {background: radial-gradient(circle at left, #314e5959, #314e5940 4%, #314e5908 22%); color: var(--text);}
}

@keyframes sidebar-button {
0% {line-height:0rem; opacity: 0;}
100% {line-height:1.4rem; opacity: 1;}
}

@keyframes flash {
0% {opacity: 0;}
20% {opacity: 1;}
40% {opacity: 0;}
60% {opacity: 1;}
}

@keyframes complete {
0% { transform: scale(1); opacity: 0; }
20% { transform: scale(1.4); opacity: 1; }
60% { transform: scale(1.4); }
100% { transform: scale(1); }
}

@keyframes complete2 {
0% { transform: scale(1); opacity: 0; }
40% { transform: scale(1.05); opacity: 1; }
70% { transform: scale(1.05); }
100% { transform: scale(1); }
}

@keyframes feedback2 {
0% {
  scale: 80%;
  filter: brightness(2) blur(5px);
}
75% {
  filter: brightness(1) blur(.5px);
}
100% {
  scale: 100%;
  filter: blur(0px);
}
}

@keyframes incorrect {
0% {
  transform: translateX(10px);}
25% {
  transform: translateX(-10px);}
50% {
  transform: translateX(10px);}
75% {
  transform: translateX(-5px);}
100% {
  transform: translateX(5px);}
}

@keyframes correct {
0% { transform: translateY(0) scale(1); }
20% { transform: translateY(-20px) scale(1.4); }
60% { transform: translateY(-20px) scale(1.4); }
100% { transform: translateY(0) scale(1); }
}

@keyframes playbackbar {
0% { width: 0vw; }
100% { width:calc(18vw - 110px); }
}

@keyframes paused {
0% {opacity: .6;}
100% {opacity: 1;}
}

.reference-button {
background-color: var(--light) !important;
border-radius: var(--rounded_sm) !important;
padding: 4px 10px 6px 30px !important;
background-image: url(../../shared/lesson_statics/gui/reference.png);
background-position: center left 8px;
background-repeat: no-repeat;
background-size: 15px;
font-size: var(--body2);
}

.reference-container {
    background-color: #f5f5f5 !important;
    filter: drop-shadow(0px 0px 4px #00000057);
    box-shadow: none !important;
    border-radius: var(--rounded_sm) !important;
    font-family: 'body' !important;
    top: 80px !important;
    right: 190px !important;
    max-width: 40vw;
    row-gap: var(--margin-sm);
    min-width: 20rem;
}

.reference {
    padding: 4px 20px 6px 50px !important;
    background-image: url(../../shared/lesson_statics/gui/pdf.png);
    background-position: center left 12px;
    background-repeat: no-repeat;
    background-size: 19px;
    animation: reference .2s ease;
}

.reference:hover {
    background-image: url(../../shared/lesson_statics/gui/download.png);
}

.reference-container:after {
    content: "";
    position: absolute;
    top: -10px;
    right: 44px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #f5f5f5 50%, transparent 50%);
    transform: rotateZ(45deg);
}

.landing-row {
    justify-content: flex-start !important;
    /* height: clamp(2rem, 50vh, 32rem); */
    /* border-bottom: solid 4px #314e590f; */
    animation: fadein .8s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
    overflow: visible;
}

.course-title {
    font-family: 'title';
    color: var(--text);
    line-height: clamp(2rem, 3.7vw, 4.4rem);
    font-size: clamp(2rem, 3.7vw, var(--title));
    max-width: 40vw;
}

.landing-column {
    min-height: 43vh;
    display: grid;
    grid-template-rows: max-content max-content auto;
    flex: 1 0 50%;
    row-gap: 2vh;
    height: 100%;
    /* justify-content: center; */
    width: 45% !important;
}

.body.module-text {height: fit-content;align-self: end;padding-bottom: 3vh;}

.module-image {
    height: 100vh !important;
    object-fit: contain;
    object-position: right;
    position: fixed;
    right: clamp(1vw, 3rem, 5vw);
    top: 3vh;
    margin-top: -15vh;
    margin-right: -7vw;
    width: 50% !important;
}

.landing {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-right: 0%;
    width: 80% !important;
    height: 100% !important;
    padding: 5% 10% 0 10%;
    overflow-x: auto;
}

button.lesson-button:nth-child(2) {
    animation-duration: .9s;
}

button.lesson-button:nth-child(3) {
    animation-duration: 1s;
}

button.lesson-button:nth-child(4) {
    animation-duration: 1.1s;
}

button.lesson-button:nth-child(5) {
    animation-duration: 1.2s;
}

button.lesson-button:nth-child(6) {
    animation-duration: 1.3s;
}

button.lesson-button:nth-child(7) {
    animation-duration: 1.4s;
}

.lesson {
    /* justify-content: space-between !important; */
}

.hotspot-slide>.button-wrapper {
    margin-top: 0;
}

.text-slide>.heading, .sata-slide>.heading, .matching-slide>.heading {
    margin-bottom: var(--margin-md);
    justify-content: initial;
}

button.gif-button {
    background-color: #e2e2e259;
    border: none;
    padding: 10px;
    border-radius: var(--rounded_sm);
    font-family: 'body';
    font-size: var(--body2);
    height: 65px;
    width: 65px !important;
    text-align: center;
    color: var(--text);
}

button.gif-button:hover {
    background-color: var(--text);
    color: var(--light);
}

.feedback-display:empty, .feedback-display>div:empty, .feedback-display>div>div:empty , .feedback-display>div>div>div:empty  {
    display: none;
}

.multiple-choice-image-slide + .s-r-button-container {
    width: 50%;
    margin-left: 55%;
}

html {overflow-x: hidden;}

img.the-hotspot.selectable-hotspot-image.hotspot {
    object-fit: contain;
    background-position: bottom center;
    background-size: 0vw;
}

/*Help Menu*/

.help-panel-main {
  background-color: var(--light) !important;
  border-radius: 6px;
  border: none !important;
  padding: 0px !important;
  box-shadow: 0 0 20px #b7b7b7;
  animation: fadein 0.7s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
  animation-delay: .2s;
  animation-fill-mode: both;
  width: 72vw !important;
  height: 68vh !important;
}

.help-videos {
  display: grid !important;
  grid-template-columns: 16rem 1fr;
  gap: 0px !important;
  height: 100%;
}

.left-panel {
  overflow-y: auto !important;
  height: initial !important;
  border-right: solid 1px #56565621;
}

.left-heading {
  font-size: var(--body);
  font-family: 'heading';
  color: var(--text);
  margin-bottom: 1rem;
  padding: var(--margin-md) 0 1rem var(--margin-md);
  position: sticky;
  top: 0;
  background-color: var(--light);
  border-bottom: solid 1px #56565621;
  border-radius: var(--rounded_sm) 0 0 0;
}

.video-item {
  font-family: 'body';
  color: var(--text);
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--rounded_sm);
  padding: 0.5rem 1rem 0.5rem 1rem !important;
  margin: 0 1rem;
  font-size: var(--body2);
  text-align: left;
}

.video-item:hover {
  background-color: #dbdbdb !important;
}

.right-panel {
  background-color: #ededed;
  border-radius: 0 6px 6px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'body-il';
  font-size: var(--body);
  color: var(--medium);
  /* aspect-ratio: 16 /9; */
  height: initial;
}

.video-item:focus {
  font-family: 'heading';
  color: var(--primary);
}

.right-panel>video {
  height: 68vh;
  /* object-fit: cover; */
  border-radius: 0 6px 6px 0;
  /* background-color: #41414100; */
  animation: fade .2s;
}

.close-button {
  background-color: #00000075 !important;
  border-radius: 6px;
  opacity: 1;
  color: transparent !important;
  background-repeat: no-repeat;
  border: none !important;
  background-color: #d3d3d3;
  width: 40px !important;
  height: 39px !important;
  background-image: url(../static/gui/close.png);
  background-position: center;
  background-size: 15px;
}

.close-button:hover {
  background-color: var(--tertiary) !important;
}

.help-panel-bg {
  animation: fade 0.4s;
  background-color: #c1c1c1c2 !important;
  backdrop-filter: blur(1px);
}


img.the-hotspot.selectable-hotspot-image.hotspot.alternate-selected-hotspot {
    filter: sepia(1) saturate(8.6) hue-rotate(132.6deg) brightness(0.9) drop-shadow(0px 0px 9px black);
    background-image: url(../static/gui/correct.png);
    background-position: center;
    background-size: 1.3vw;
    background-repeat: no-repeat;
}

button.audio-speed-button:not(:first-child) {
    animation: expand2 0.3s ease;
}

.audio-speed-button:first-child {
    z-index: 1;
}

.audio-speed-button:first-child:has(+ .audio-speed-button){
    transform: scale(1.2);
    border: solid 1px var(--primary);
}


.first-item {
    height: 2.3rem;
    overflow: hidden;
}

.first-item>span>div {
    animation: choice2 .2s ease;
}

.first-item>span {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-height: 700px){
.player {overflow-y: auto;}
.button-wrapper.s-r-button-container {position: sticky;bottom: 3vh;padding-top: 0;z-index: 5;}
.multiple-choice-image-slide + .button-wrapper.s-r-button-container {padding-top: calc(6rem + 8vh);}
.reset-button {background-color: #f5f5f5 !important;}
.reset-button:hover {box-shadow: var(--inset);transition: box-shadow .2s ease;}
.multiple-choice-slide, .multiple-choice-image-slide{padding-bottom: calc(7rem + 3vh);overflow: visible;}
.sata-slide {height:fit-content;}
.back-button, .next-button {height: 18vh;}
.heading {font-size: 4vh; line-height: 4vh;}
.combo-column {justify-content: flex-start !important;overflow-x: auto;}
.inv-hotspot-area {height: 65vh !important; width: 65vh !important;}
.inv-hotspot-slide>div {grid-template-columns: 50% 50%;}
.first-item {overflow: visible;}
li.options {height: fit-content;}
button.sata-unordered-button {height: fit-content;}
.heading {margin-bottom: 2vh !important;}
.combo-row {column-gap: 2vw;}
.combo-column.body, .multiple-choice-image-slide>.combo-column {align-self: flex-start;}
.multiple-choice-image-slide>.combo-column{overflow: visible}
.combo-column>.answers{max-height: initial;gap: 1vh;width: 100%;} 
.multiple-choice-image-slide {overflow: visible !important;height: 100%;}
svg.line-svg {z-index: 4 !important;}
.two-column-combo {column-gap: 1vw;}
.feedback-popup {justify-content: flex-start !important;}
.sequence-group {width: 29vw !important;}
}

@media (max-height: 500px){
.multiple-choice-image-slide + .button-wrapper.s-r-button-container {padding-top: calc(4rem + 4vh);}
.multiple-choice-slide>.answers, .multiple-choice-slide>.heading {width: 100%;}
.intro-col {
    row-gap: 2vh;
    overflow-x: auto;
    align-content: space-between;
    top: 20px !important;
    height: calc(100% - 20px) !important;}
.player {justify-content: flex-start !important;}
.two-column-combo {align-items: flex-start !important;}
.intro-button {position: sticky;bottom: 20px;width: 93%;}
.intro-col>.body {margin-bottom: 40px;}
}