/* --------------------------------------------------------------
GLOBALS & VARIABLES
--------------------------------------------------------------*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Quicksand", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* color: red; */
}

:root {
  /* PALETTE ------------------------ */
  --blue-sky: #c1f2f2; /* rgba(###, ###, ###, 1.0); */
  --blue-wave: #50d3d6; /* rgba(80, 211, 214, 1)   */
  --color_waveBlue-600: #57BCBC;
  --navy-900: #36535e; /* rgba(###, ###, ###, 1.0); */
  --navy-600: #3d6d84; /* Header Color: rgba(64, 139, 162, 0.75); */
  --navy-500: #408ba2; /* rgba(###, ###, ###, 1.0); */
  --sand-900: #dfcfbc; /* rgba(###, ###, ###, 1.0); */
  --sand-800: #ecdcc2; /* rgba(###, ###, ###, 1.0); */
  --sand-700: #ffebca; /* sand-main  rgba(###, ###, ###, 1.0); */
  --sand-200: #ffeccb; /* sand-light rgba(###, ###, ###, 1.0); */
  --brown-900: #847163; /* post-dark rgba(###, ###, ###, 1.0); */
  --brown-700: #998675; /* post-mid rgba(###, ###, ###, 1.0); */
  --brown-500: #ad9983; /* post-main rgba(###, ###, ###, 1.0); */
  --color_text: #3d6d84;
  --color_textLight: #7ab4b7;
  --color_navStepSubtle: #a1d3d1;
  --color_gold-500: #ffd477;
  --color_gold-600: #ffc861;
  --color_waveMini-OFF: #a0d2cf;
  --color_red-500: #e86348;
  --color_spruce-500: #669690;
  /* DRAWING AND POSITIONS ------------------------*/
  --appTopPadding: 64px;
  --gridW: 100vw/10;
  --gridH: 100vh/10;
}

/* Material Icons ------------------------ */
.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

/* -------------------------------------------------------------
BASE LAYOUT
-------------------------------------------------------------- */
/**/
html, body {
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: var(--sand-700);
}

/* ================================================= */
/* HEADER ----------------------------- 
    Fixed. Sits on top of all other layouts.
*/
.appHeader_layout {
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
}

/* ================================================= */
/* BACKGROUND ---------------------- 
    This is the full width and full height container. */
#bgContainer {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
}
#bgContainer .bgSky {
  position: relative;
  display: block;
  height: calc(var(--gridH) * 6);
  width: calc(var(--gridW) * 10);
  background-color: var(--blue-sky);
}
#bgContainer .bgSky.bgSky_tutLayout {
  height: calc(var(--gridH) * 7);
}
#bgContainer .bgSea {
  position: relative;
  display: block;
  height: calc(var(--gridH) * 2);
  width: calc(var(--gridW) * 10);
  overflow: visible;
  background-image: url(../imgs/bgs/oceanBg_fullWidth.svg);
  background-position: right top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#bgContainer .bgSand {
  position: relative;
  display: block;
  height: calc(var(--gridH) * 1);
  width: calc(var(--gridW) * 10);
  background-color: var(--sand-700);
}

/* ================================================= */
/* DEV GRID (will rm later) ----------------------- */
.devGrid {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 50;
}
.devGrid .dgSide {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  width: calc(var(--gridW) * 2);
  height: 100%;
}
.devGrid .dgMain {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  width: calc(var(--gridW) * 6);
  height: 100%;
}
.devGrid .dgCol {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  width: calc(var(--gridW) * 1);
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.75);
}
.devGrid .dgCol .dgRow {
  position: relative;
  display: flex;
  width: calc(var(--gridW));
  height: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

/* ================================================= */
/* MAIN ----------------------------- 
/* main #container .sceneGrid */
#container {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
}
#container .centerBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  width: calc(var(--gridW) * 6);
  height: 100%;
  padding-top: calc(var(--gridH));
  z-index: 5;
  /* WAVE BOX  ----------------------------- */
}
#container .centerBox .topRowBox {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: calc(var(--gridH));
  padding-top: calc(var(--gridH) / 4);
}
#container .centerBox .topRowBox .pageTitleBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 33%;
}
#container .centerBox .topRowBox .pageTitleBox .pageTitle {
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  font-weight: bold;
  color: var(--color_textLight);
}
#container .centerBox .topRowBox .pageTitleBox .pageSubheader {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color_textLight);
}
#container .centerBox #waveBoxParent {
  position: absolute;
  display: block;
  top: calc(var(--gridH) * 4);
  height: calc(var(--gridH) * 4);
  width: 100%;
}
#container .centerBox #waveBoxParent.waveBoxParent_tutLayout {
  top: calc(var(--gridH) * 5);
}

#sharedWordDisplayContainer.wordPromptRow {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  top: calc(var(--gridH) * 3);
  justify-content: center;
  width: calc(var(--gridW) * 6);
  height: calc(var(--gridH) * 1);
  z-index: 10;
}
#sharedWordDisplayContainer.wordPromptRow #wordPromptBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-end;
  width: calc(var(--gridW) * 4);
  height: calc(var(--gridH) * 1);
  border-bottom: 0px solid white;
}
#sharedWordDisplayContainer.wordPromptRow #wordPromptBox .wordPromptText {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-end;
  color: var(--color_text);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
#sharedWordDisplayContainer.wordPromptRow .snapShotBox {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
  height: calc(var(--gridH) * 1);
  right: calc(var(--gridW) - 64px);
  bottom: calc(var(--gridH) * -1);
  z-index: 15;
}
#sharedWordDisplayContainer.wordPromptRow .snapShotBox.snapBox_tutLayout {
  flex-flow: column nowrap;
  right: calc(var(--gridW) * 1 - 64px);
  bottom: calc(var(--gridH) * -2);
  border: none;
}
#sharedWordDisplayContainer.wordPromptRow .snapShotBox .snapBtn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  color: var(--color_textLight);
  background-color: var(--blue-sky);
  margin-left: 2px;
  padding: 6px 12px;
  border: none;
  -webkit-user-select: none; /* Safari */
  user-select: none;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  z-index: 20;
}
#sharedWordDisplayContainer.wordPromptRow .snapShotBox .snapBtn:hover {
  color: var(--color_text);
}
#sharedWordDisplayContainer.wordPromptRow .snapShotBox .snapBtn:active {
  color: white;
}

#micAccessButton {
  position: absolute;
  top: -20px;
  width: 200px;
  z-index: 99;
}

/*  LEFT PANEL: Student Videos ----------------------------- */
#panelLeft_layout { /* holds videos */
  position: absolute;
  height: 100vh;
  width: 20vw;
  top: 0;
  left: 0;
  z-index: 50;
  /* border-right: 1px solid red; */
}

/*  SIDE NAV: Page/Activity Navigation ----------------------------- */
#sideNav_layout {
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  width: 64px;
  top: 0;
  left: 0;
  z-index: 60;
  color: white;
  background-color: var(--navy-600);
  box-shadow: rgba(0, 0, 0, 0.25) 2px 3px 5px;
}

/*  RIGHT PANEL: ----------------------------- */
#panelRight_layout { /* currently holds settings */
  position: absolute;
  height: 100vh;
  width: 20vw;
  top: 0;
  right: 0;
  z-index: 50;
  /* border-left: 1px solid red; */
}

/* FOOTER ----------------------------- */
/* none yet */
/*
    var(--color_text);
    var(--color_textLight);
    var(--color_navStepSubtle);
    #d1f6f6; input bg 
*/
.settings_collapsibleSectBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  color: var(--color_text);
  margin-bottom: 2rem;
}
.settings_collapsibleSectBox.paddingTop {
  padding-top: calc(var(--gridH) * 1.25);
}
.settings_collapsibleSectBox .cSect_headRow {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
  height: 36px;
  margin-bottom: 0.5rem;
}
.settings_collapsibleSectBox .cSect_headRow .sectIconBox {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 26px;
  height: 2.5rem;
  margin-right: 6px;
  color: var(--color_textLight);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.settings_collapsibleSectBox .cSect_headRow .sectIconBox.sensitivitySect {
  background-image: url("../imgs/icons/settings/sensitivity_outline.svg");
}
.settings_collapsibleSectBox .cSect_headRow .sectIconBox.wordPromptSect {
  background-image: url("../imgs/icons/settings/feather_outline.svg");
}
.settings_collapsibleSectBox .cSect_headRow .sectIconBox.ratingSect {
  background-image: url("../imgs/icons/settings/coin_outline.svg");
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2.5rem;
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .lineBox {
  position: absolute;
  width: 100%;
  top: 50%;
  border-bottom: 2px solid var(--color_navStepSubtle);
  z-index: 50;
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .titleBox {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding-right: 0.5rem;
  background-color: var(--blue-sky);
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: bold;
  z-index: 51;
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .btnBox {
  position: absolute;
  right: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  z-index: 51;
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .btnBox .menuBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-right: 18px;
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .btnBox .menuBox .btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  margin-left: 4px;
  border: 1px solid var(--color_textLight);
  border-radius: 4px;
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .btnBox .mainActionBtn {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
  width: 36px;
  height: 36px;
  background-color: var(--blue-sky);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0;
  transition: 0.5s;
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .btnBox .mainActionBtn.mabSubmit {
  border-radius: 36px;
  background-color: var(--color_waveBlue-600);
  color: white;
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .btnBox .mainActionBtn:hover {
  background-color: #d4fffd;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .btnBox .mabSubmit:hover {
  background-color: var(--blue-wave);
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox .btnBox .mainActionBtn:active {
  background-color: white;
  box-shadow: 0;
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox:hover .lineBox {
  border-bottom: 1px solid var(--color_text);
}
.settings_collapsibleSectBox .cSect_headRow .sectHeaderBox:hover .btnBox .mainActionBtn {
  background-color: #d4fffd;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
}
.settings_collapsibleSectBox .cSect_headRow.cSectIsOpen .lineBox {
  border-bottom: 2px solid white;
}
.settings_collapsibleSectBox .cSect_headRow.cSectIsOpen div.sectIconBox.sensitivitySect {
  background-image: url("../imgs/icons/settings/sensitivity.svg");
}
.settings_collapsibleSectBox .cSect_headRow.cSectIsOpen div.sectIconBox.wordPromptSect {
  background-image: url("../imgs/icons/settings/feather.svg");
}
.settings_collapsibleSectBox .cSect_headRow.cSectIsOpen div.sectIconBox.ratingSect {
  background-image: url("../imgs/icons/settings/coinIcon.svg");
}
.settings_collapsibleSectBox .cSect_headRow.cSectIsOpen div.sectIconBox.initVidConf {
  background-image: url("../imgs/icons/settings/vidCOnf_ON.svg");
}

.cSect_body {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  height: 0;
  width: 100%;
  padding-right: 2rem;
  overflow: hidden;
}
.cSect_body.cSectIsOpen {
  height: 100%;
}
.cSect_body .cSect_bodyRow {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  padding-left: 30px;
  width: 100%;
  min-height: 2rem;
  height: auto;
  transition: height 0.4s ease-in;
  overflow: hidden;
}

/*
.settings_collapsibleSectBox .cSect_bodyRow
*/
.sliderRowBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}
.sliderRowBox .sliderTitle {
  position: relative;
  display: flex;
}
.sliderRowBox .inputSliderRow {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 1rem;
}
.sliderRowBox .inputSliderRow .sliderInput {
  position: relative;
  display: flex;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  outline: none;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border: none;
}
.sliderRowBox .inputSliderRow .sliderInput:hover {
  background: rgb(255, 255, 255);
}
.sliderRowBox .inputSliderRow .sliderInput::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1rem;
  background: var(--blue-wave);
  cursor: pointer;
  opacity: 1;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.sliderRowBox .inputSliderRow .sliderInput::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--blue-wave);
  cursor: pointer;
  opacity: 1;
}
.sliderRowBox .inputSliderRow .sliderLabelText {
  position: relative;
  display: flex;
  width: auto;
  font-weight: 800;
  font-size: 0.8rem;
}
.sliderRowBox .inputSliderRow .sliderLabelText.sliderLabelText_left {
  margin-right: 1rem;
}
.sliderRowBox .inputSliderRow .sliderLabelText.sliderLabelText_right {
  margin-left: 1rem;
}

button.dropdownBtn {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: calc(var(--gridW) * 1.5);
  height: 100%;
  cursor: pointer;
  color: white;
  background-color: transparent;
  border-radius: 4px;
  border: none;
  font-weight: 800;
}
button.dropdownBtn .ddBtnDisplay {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}
button.dropdownBtn .ddBtnDisplay .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 56px;
}
button.dropdownBtn .ddBtnDisplay .logo img {
  height: 36px;
  width: 36px;
}
button.dropdownBtn .ddBtnDisplay .title {
  font-size: 0.9rem;
  letter-spacing: 1px;
  font-weight: 800;
  text-transform: uppercase;
}
button.dropdownBtn.ddIsOpen {
  background-color: rgba(190, 239, 239, 0.1);
}

.dropdownBtn:hover {
  background-color: rgba(190, 239, 239, 0.2);
}

.dropdownBtn:active {
  background-color: rgba(190, 239, 239, 0.4);
}

.dropdownList {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  top: 55px;
  right: 0;
  right: calc(var(--gridW) * 0.5);
  width: calc(var(--gridW) * 1.5);
  height: 0;
  background-color: rgba(238, 247, 250, 0.9);
  color: var(--color_text);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 90;
  transition: height 0.4s ease;
}
.dropdownList.ddIsOpen {
  height: 320px;
}
.dropdownList hr {
  margin: 2px 0;
  background-color: inherit;
}
.dropdownList button.ddListItem {
  position: relative;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  background-color: transparent;
  color: var(--color_text);
  padding: 2px 4px;
  border-radius: 4px;
  margin: 4px 0;
  border: none;
  cursor: pointer;
}
.dropdownList button.ddListItem .iconBox {
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
}
.dropdownList button.ddListItem .titleBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  width: 100%;
  padding-left: 1rem;
}
.dropdownList button.ddListItem .titleBox .title {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
}
.dropdownList button.ddListItem .titleBox .subtitle {
  position: relative;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  font-size: 0.8rem;
  font-weight: 500;
}
.dropdownList button.ddListItem.selected {
  background-color: var(--color_waveBlue-600);
}
.dropdownList .ddListItem:first-child {
  margin-top: 1rem;
}
.dropdownList .ddListItem:hover {
  background-color: var(--color_navStepSubtle);
}
.dropdownList .ddListItem:active {
  background-color: white;
}
.dropdownList .ddListItem .selected {
  background-color: var(--color_waveBlue-600);
}

/*

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>







===============================



.slide {
  clear:both;
  width:100%;
  height:0px;
  overflow: hidden;
  text-align: center;
  transition: height .4s ease;
}

.slide li {padding : 30px;}

#touch {position: absolute; opacity: 0; height: 0px;}    

#touch:checked + .slide {height: 300px;} 

*/
.inputTextComboBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 3rem;
  padding: 0;
  margin: 0.5rem 0;
  border-radius: 4px;
  overflow: hidden;
}
.inputTextComboBox .inputBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
  border-bottom: 2px solid white;
}
.inputTextComboBox .inputBox input {
  position: relative;
  display: flex;
  height: 2.5rem;
  width: 100%;
  height: 100%;
  font-size: 0.9rem;
  font-weight: 800;
  border-radius: 8px;
  padding: 0px 8px;
  color: var(--color_textLight);
  border: none;
}
.inputTextComboBox .inputBox input::placeholder {
  font-weight: 400;
}
.inputTextComboBox .inputBox input:focus {
  outline: none;
}
.inputTextComboBox .inputBox .inputClearBtn {
  position: relative;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;
  margin-right: 16px;
  display: none;
  color: var(--color_textLight);
  cursor: pointer;
}
.inputTextComboBox .inputBox .inputClearBtn.disableInputClear {
  color: var(--color_navStepSubtle);
}
.inputTextComboBox .inputBox .inputClearBtn:hover {
  color: var(--color_text);
}
.inputTextComboBox .inputBox .inputClearBtn:active {
  color: var(--color_text);
}
.inputTextComboBox .inputBox:focus {
  border-bottom: 1px solid var(--color_text);
}
.inputTextComboBox .sharedWordSubmitBtn {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 100%;
  color: white;
  font-weight: 800;
  text-align: center;
  font-weight: 800;
  font-size: 0.85rem;
  background-color: var(--blue-wave);
  border-radius: 0 4px 4px 0;
  border: none;
}
.inputTextComboBox .sharedWordSubmitBtn:disabled {
  background-color: var(--color_navStepSubtle);
}

.ui_inputTextComboBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  margin-top: 1rem;
}
.ui_inputTextComboBox label {
  position: relative;
  display: flex;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: bold;
  transition: 0.2s;
  color: rgba(255, 255, 255, 0.75);
}
.ui_inputTextComboBox .inputBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}
.ui_inputTextComboBox .inputBox .inputText {
  position: relative;
  display: flex;
  position: relative;
  width: 100%;
  height: 2rem;
  border: 0;
  outline: 0;
  color: white;
  font-size: 1rem;
  padding: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  transition: border-bottom 0.2s;
}
.ui_inputTextComboBox .inputBox .inputText::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.ui_inputTextComboBox .inputBox .inputText:placeholder-shown {
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}
.ui_inputTextComboBox .inputBox .inputText:focus {
  border-bottom: 2px solid white;
}
.ui_inputTextComboBox .inputBox .inputTextClear {
  position: relative;
  display: flex;
  width: 24px;
  height: 100%;
  padding: 4px;
  background-color: rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}
.ui_inputTextComboBox .inputBox .inputTextSubmit {
  position: relative;
  display: flex;
  width: 32px;
  height: 100%;
  right: 0;
  bottom: 0;
  margin-left: 12px;
  border-radius: 20px;
  padding: 4px;
  padding-left: 2px;
  background-color: rgba(255, 255, 255, 0.15);
}

.btnIcon {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: 0 2px;
  width: 100%;
  height: 100px;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--blue-sky);
}
.btnIcon .imgBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  background-repeat: no-repeat;
  background-size: contain;
  transition: scale 0.2s ease-in-out;
}
.btnIcon .imgBox.goldCoin {
  background-image: url("../imgs/icons/settings/coinGold.svg");
}
.btnIcon .imgBox.silverCoin {
  background-image: url("../imgs/icons/settings/coinSilver.svg");
}
.btnIcon .imgBox.bronzeCoin {
  background-image: url("../imgs/icons/settings/coinBronze.svg");
}
.btnIcon .imgBox .undoArrow {
  width: 36px;
  height: 36px;
  color: var(--color_textLight);
  background-image: url("../imgs/icons/settings/undoArrow.svg");
}
.btnIcon .label {
  margin-top: 0.33rem;
  width: 64px;
  color: var(--color_textLight);
  text-align: center;
  font-weight: 800;
  font-size: 0.8rem;
  opacity: 0.8;
}
.btnIcon.imgBtn64 {
  width: 64px;
}
.btnIcon.imgBtn64 .imgBox .iconSize24 {
  height: 24px;
  width: 24px;
}
.btnIcon.btnIcon:hover .imgBox {
  transform: scale(1.15);
}
.btnIcon.btnIcon:hover .label {
  color: var(--color_text);
  font-weight: 800;
}

.btnOutline {
  background-color: var(--blue-wave);
  color: white;
  cursor: pointer;
}
.btnOutline .label {
  color: white;
}

.ripple {
  background-position: center;
  transition: background 0.8s;
}

.ripple:hover {
  background: var(--color_waveBlue-600) radial-gradient(circle, transparent 1%, #57BCBC 1%) center/15000%;
}

.ripple:active {
  background-color: #a1d3d1;
  background-size: 100%;
  transition: background 0s;
}

.btnRowBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
  height: 100px;
}

.btn-pill {
  border: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 30px;
  padding: 0rem 0.5rem;
  margin: 0 1rem;
  cursor: pointer;
  border-radius: 4rem;
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease-in;
}
.btn-pill:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.btn-pill:active {
  background-color: rgb(80, 211, 214);
}

.tooltip_ele .tooltip_msg {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip_ele:hover .tooltip_msg {
  visibility: visible;
  opacity: 1;
}

.ui_toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  margin: 4px 0;
  border-radius: 30px;
  padding: 2px;
  overflow: hidden;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: var(--navy-600);
  transition: background-color ease 0.3s;
}

.ui_toggle:before {
  content: "on off";
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 24px;
  height: 24px;
  background: white;
  left: 4px;
  top: 3px;
  border-radius: 50%;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 800;
  text-indent: -26px;
  word-spacing: 34px;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

.ui_toggle:checked {
  background-color: var(--color_waveBlue-600);
}

.ui_toggle:checked:before {
  left: 32px;
}

#modalPermissions, #noSafariModal {
  display: none;
}

.modalSmall {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(var(--gridH) * 1.5);
  height: 500px;
  width: 424px;
  background-color: white;
  z-index: 99;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.25) 2px 3px 5px;
}
.modalSmall .modalBgImg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 4;
}
.modalSmall .modalBgImg.modalBg_anchor {
  background-image: url("../imgs/modals/modalBg_anchor.svg");
}
.modalSmall .modalHeader {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  width: 100%;
  height: 25%;
  z-index: 5;
}
.modalSmall .modalHeader .modalTopRow {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  color: var(--color_text);
  font-weight: 800;
  letter-spacing: 2px;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  border-radius: 1rem 1rem 0 0;
}
.modalSmall .modalHeader .modalTopRow .modalHeadTitleBox {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-left: 15%;
  width: 70%;
  text-align: center;
}
.modalSmall .modalHeader .modalTopRow .modalHeadBtnBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 15%;
  color: var(--color_textLight);
  cursor: pointer;
}
.modalSmall .modalHeader .modalTopRow .modalHeadBtnBox.modalHeadBtnBox:hover {
  color: var(--color_text);
}
.modalSmall .modalHeader .modalTopRow .modalHeadBtnBox.modalHeadBtnBox:active {
  color: var(--blue-wave);
}
.modalSmall .modalHeader .modalTitle {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background-color: var(--blue-wave);
  color: white;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-align: left;
  padding: 1rem 3rem;
}
.modalSmall .modalBody {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  height: 50%;
  width: 100%;
  padding: 2rem 3rem 2rem 3rem;
  color: var(--color_text);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2rem;
  z-index: 5;
}
.modalSmall .modalBody .textBox_anchor01 {
  padding-right: 4rem;
}
.modalSmall .modalBody .textBox_anchor02 {
  padding-right: 3rem;
  font-weight: 800;
}
.modalSmall .modalBody .textBox_anchor02a {
  padding-right: 4rem;
  font-weight: 800;
}
.modalSmall .modalFooter {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  height: 25%;
  width: 100%;
  background-color: var(--navy-500);
  color: white;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 1rem;
  border-radius: 0 0 1rem 1rem;
  z-index: 5;
}
.modalSmall .modalFooter .modalBtn {
  display: flex;
  flex-flow: center;
  justify-content: center;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 900;
  padding: 4rem;
  min-width: 128px;
  min-height: 48px;
  border-radius: 4rem;
  height: auto;
  padding: 0.5rem;
  margin: 0 1rem;
  cursor: pointer;
  opacity: 100%;
}
.modalSmall .modalFooter .modalBtn.btn-yes {
  background-color: rgba(80, 211, 214, 0.8);
}
.modalSmall .modalFooter .modalBtn.btn-no {
  background-color: rgba(122, 180, 183, 0.8);
}
.modalSmall .modalFooter .modalBtn .btnText {
  opacity: 100%;
}
.modalSmall .modalFooter .btn-yes:hover {
  background-color: rgb(80, 211, 214);
}
.modalSmall .modalFooter .btn-no:hover {
  background-color: rgb(122, 180, 183);
}
.modalSmall .modalFooter .modalBtn:hover {
  box-shadow: 1px 2px rgba(0, 0, 0, 0.15);
}

/* Parent '.appHeader_layout' is in _appLayout.scss

/*
    calc(var(--gridW)*1);
    calc(var(--gridH)*1);
*/
header.headBar {
  position: fixed;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 72px;
  color: white;
  background-color: var(--navy-600);
  box-shadow: rgba(0, 0, 0, 0.25) 2px 3px 5px;
  z-index: 92;
}
header.headBar .logoBox {
  position: relative;
  display: flex;
  padding-left: 2rem;
  width: calc(var(--gridW) * 2);
  height: 40px;
}
header.headBar .logoBox .logoBox img {
  height: 36px;
}
header.headBar .centerBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--gridW) * 3);
  height: 100%;
}
header.headBar .centerBox .devToolMenuBox {
  position: relative;
  display: none;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
}
header.headBar .centerBox .devToolMenuBox .menuItem {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 800;
  margin-right: 2rem;
}
header.headBar .centerBox .devToolMenuBox .menuItem button {
  appearance: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
}
header.headBar .centerBox .devToolMenuBox .menuItem button:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
header.headBar .centerBox .devToolMenuBox.toolMenuIsVisible {
  display: flex;
}
header.headBar .activityMenuBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  width: calc(var(--gridW) * 4);
  height: 100%;
}
header.headBar .accountMenuBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  padding: 0 1rem;
  width: calc(var(--gridW) * 1);
  height: 100%;
}
header.headBar .headerMenu .headerMenuBtn {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  height: 100%;
  width: 80px;
  border: none;
}
header.headBar .headerMenu .headerMenuBtn .navTabBg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url("/imgs/icons/nav/navTabBg_OFF.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
  z-index: 91;
}
header.headBar .headerMenu .headerMenuBtn .navTabBg.navTabBg_ON {
  background-image: url("/imgs/icons/nav/navTabBg_ON.svg");
}
header.headBar .headerMenu .headerMenuBtn .logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  margin-bottom: 4px;
  z-index: 92;
}
header.headBar .headerMenu .headerMenuBtn .logo.ico40_tutorial {
  background-image: url("/imgs/icons/nav/ico40_tutorial.svg");
}
header.headBar .headerMenu .headerMenuBtn .logo.ico40_free {
  background-image: url("/imgs/icons/nav/ico40_free.svg");
}
header.headBar .headerMenu .headerMenuBtn .logo.ico40_quest {
  background-image: url("/imgs/icons/nav/ico40_quest.svg");
}
header.headBar .headerMenu .headerMenuBtn .logo.ico40_quiz {
  background-image: url("/imgs/icons/nav/ico40_quiz.svg");
}
header.headBar .headerMenu .headerMenuBtn .logo.ico40_slp {
  background-image: url("/imgs/icons/nav/ico40_slp.svg");
}
header.headBar .headerMenu .headerMenuBtn .title {
  position: relative;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.75;
  z-index: 92;
}
header.headBar .headerMenu .headerMenuBtn.navTab_ON .navTabBg {
  background-image: url("/imgs/icons/nav/navTabBg_ON.svg");
}
header.headBar .headerMenu .headerMenuBtn.navTab_ON .logo {
  opacity: 1;
}
header.headBar .headerMenu .headerMenuBtn.navTab_ON .title {
  opacity: 1;
}
header.headBar .headerMenu .headerMenuBtn:hover .navTabBg {
  opacity: 1;
}
header.headBar .headerMenu .headerMenuBtn:hover .logo {
  opacity: 1;
}
header.headBar .headerMenu .headerMenuBtn:hover .title {
  opacity: 1;
}
header.headBar .headerMenu .headerMenuBtn:hover.navTab_ON .navTabBg {
  opacity: 0.5;
}

#chooseQuestModal {
  position: absolute;
  padding: 15px;
  margin: 0px;
  display: none;
  flex-flow: row wrap;
  gap: 1px;
  justify-content: center;
  background-color: #ffebca;
  width: 80%;
  height: 320px;
  z-index: 99;
}

.questModalColumn {
  flex-flow: column wrap;
}

#questButtons {
  z-index: 99;
}

/* -------------------------------------------------------------
VIDEO PANEL
-------------------------------------------------------------- */
/*  PARENT ELE

    #panelLeft_layout {  /* holds videos *
        position: absolute;
        height: 100vh;
        width: 20vw;
        top: 0;
        left: 0;
        z-index: 50;
        border: 1px solid red;
    }
*/
.sp-hgt_2rem {
  display: flex;
  width: 100%;
  height: 2rem;
}

#videos.panelLeft_content {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  width: 85%;
  min-width: 182px;
  padding: 1rem;
  padding-left: 2rem;
  padding-top: calc(var(--gridH) * 1.25);
  padding-bottom: 2rem;
  color: white;
  background-color: rgba(61, 109, 132, 0.8); /* --navy-600 */
  box-shadow: rgba(0, 0, 0, 0.25) 2px 3px 3px;
  z-index: 70;
}
#videos.panelLeft_content .ui_collapsibleSectBox, #videos.panelLeft_content .vidPanel_sect {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  color: white;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_headRow, #videos.panelLeft_content .vidPanel_sect .cSect_headRow {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  margin-bottom: 0.5rem;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_headRow .titleBox, #videos.panelLeft_content .vidPanel_sect .cSect_headRow .titleBox {
  position: relative;
  display: flex;
  width: 100%;
  flex-flow: column nowrap;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_headRow .titleBox .sectSubTitle, #videos.panelLeft_content .vidPanel_sect .cSect_headRow .titleBox .sectSubTitle {
  position: relative;
  display: flex;
  width: 100%;
  color: white;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1rem;
  letter-spacing: 1px;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_headRow .titleBox .headLine, #videos.panelLeft_content .vidPanel_sect .cSect_headRow .titleBox .headLine {
  margin: 0.25rem 0;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_headRow .titleBox .sectTitle, #videos.panelLeft_content .vidPanel_sect .cSect_headRow .titleBox .sectTitle {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-left: 4px;
  color: white;
  text-transform: none;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1px;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_headRow .btnBox, #videos.panelLeft_content .vidPanel_sect .cSect_headRow .btnBox {
  position: relative;
  right: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  cursor: pointer;
  z-index: 51;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_headRow .btnBox .mainActionBtn, #videos.panelLeft_content .vidPanel_sect .cSect_headRow .btnBox .mainActionBtn {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0;
  transition: 0.5s;
  background-color: none;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_headRow .btnBox .mainActionBtn:hover, #videos.panelLeft_content .vidPanel_sect .cSect_headRow .btnBox .mainActionBtn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_headRow .btnBox .mainActionBtn:active, #videos.panelLeft_content .vidPanel_sect .cSect_headRow .btnBox .mainActionBtn:active {
  background-color: rgba(255, 255, 255, 0.35);
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 4px;
  margin-top: 1.5rem;
  text-align: left;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow.infoList, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow.infoList, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow.infoList, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow.infoList {
  font-size: 1rem;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow.infoList .iconCol, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow.infoList .iconCol, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow.infoList .iconCol, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow.infoList .iconCol {
  position: relative;
  display: flex;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow.infoList .infoCol, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow.infoList .infoCol, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow.infoList .infoCol, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow.infoList .infoCol {
  padding-left: 0.75rem;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow.link_explainer, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow.link_explainer, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow.link_explainer, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow.link_explainer {
  position: relative;
  display: inline-block;
  line-height: 1.5;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow.link_explainer .link_icon, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow.link_explainer .link_icon, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow.link_explainer .link_icon, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow.link_explainer .link_icon {
  position: relative;
  display: inline-block;
  top: 6px;
  width: 2rem;
  height: 1.5rem;
  background-image: url("../imgs/icons/settings/icon_link.svg");
  background-repeat: no-repeat;
  background-position: bottom;
  margin: 0 3px;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow .ui_button, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow .ui_button, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow .ui_button, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow .ui_button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  border-radius: 4rem;
  height: auto;
  min-height: 48px;
  padding: 0.5rem 2rem;
  margin: 1rem 0;
  cursor: pointer;
  opacity: 100%;
  background-color: rgba(80, 211, 214, 0.33);
  transition: background-color 0.15s;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow a.ui_button, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow a.ui_button, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow a.ui_button, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow a.ui_button {
  text-decoration: none;
  color: white;
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow .ui_button:hover, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow .ui_button:hover, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow .ui_button:hover, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow .ui_button:hover {
  background-color: rgba(80, 211, 214, 0.5);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
}
#videos.panelLeft_content .ui_collapsibleSectBox .cSect_body .cSect_bodyRow .ui_button:active, #videos.panelLeft_content .ui_collapsibleSectBox .sect_body .cSect_bodyRow .ui_button:active, #videos.panelLeft_content .vidPanel_sect .cSect_body .cSect_bodyRow .ui_button:active, #videos.panelLeft_content .vidPanel_sect .sect_body .cSect_bodyRow .ui_button:active {
  background-color: rgba(80, 211, 214, 0.75);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
}
#videos.panelLeft_content .ui_collapsibleSectBox .sect_body, #videos.panelLeft_content .vidPanel_sect .sect_body {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  padding-right: 2rem;
  overflow: hidden;
}
#videos.panelLeft_content .ui_collapsibleSectBox .sect_body .sect_bodyRow, #videos.panelLeft_content .vidPanel_sect .sect_body .sect_bodyRow {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 4px;
  margin-top: 1.5rem;
  text-align: left;
}

#hotMicSect {
  margin-top: 1rem;
}
#hotMicSect #hotMicSect_body {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#subscriberBox {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1rem;
  height: 100%;
  width: 100%;
  padding-bottom: 2rem;
  /* OT_root OT_subscriber OT_fit-mode-cover */
}
#subscriberBox .OTVid {
  position: relative;
  display: block;
  margin-top: 1rem;
  min-height: 150px;
  min-width: 150px;
  border-radius: 16px;
  margin-top: 1rem;
  background-color: var(--navy-600);
  box-shadow: rgba(0, 0, 0, 0.25) 2px 3px 3px;
  padding-bottom: 2rem;
  border: 1px solid lime;
}
#subscriberBox .OT_subscriber {
  /* margin: 8px; */
  min-height: 150px;
  min-width: 150px;
  border-radius: 16px;
  margin-top: 1rem;
  background-color: var(--navy-600);
  box-shadow: rgba(0, 0, 0, 0.25) 2px 3px 3px;
}
#subscriberBox .OT_subscriber.hotMicStyle {
  border-radius: 4px;
  border-radius: 16px;
  border: 4px solid var(--blue-wave);
  box-shadow: rgba(0, 0, 0, 0.15) 3px 4px 3px;
  min-height: 200px;
  min-width: 200px;
}

/*


<div id="OT_13e3e519-20dc-4060-a8d5-e6406a5ff8a2" class="OT_root OT_subscriber OT_fit-mode-cover" style="width: 150px; height: 150px; overflow: hidden;">
    <div class="OT_widget-container" style="width: 100%; height: 100%;">
        <div class="OT_video-poster" style="display: none;"></div>
        <div class="OT_video-loading">
            <div class="OT_video-loading-spinner"></div>
        </div>
        <video autoplay="" playsinline="" class="OT_video-element" style="transform: rotate(0deg);">Sorry, Web RTC is not available in your browser</video>
    </div>
    <div class="OT_bar OT_edge-bar-item OT_mode-on"></div>
    <h1 class="OT_name OT_edge-bar-item OT_mode-on">7f0ff</h1>
    <button class="OT_edge-bar-item OT_mute OT_mode-auto" type="button">Mute</button>
    <div class="OT_audio-level-meter OT_hide-forced">
        <div class="OT_audio-level-meter__audio-only-img"></div>
        <div class="OT_audio-level-meter__value"></div>
    </div>
    <div class="OT_video-disabled-indicator OT_mode-auto OT_active"></div>
    <div class="OT_audio-blocked-indicator OT_mode-auto OT_active"></div>
    <div class="OT_video-unsupported OT_mode-auto">
        <div class="OT_video-unsupported-bar"></div>
        <div class="OT_video-unsupported-img"></div>
        <span class="OT_video-unsupported-text">Video format not supported</span>
    </div>
</div>

*/
/* -------------------------------------------------------------
SETTINGS PANEL
-------------------------------------------------------------- */
/*  PARENT ELE

    #panelRight_layout {  /* currently holds settings *
        position: absolute;
        height: 100vh;
        width: 20vw;
        top: 0;
        right: 0;
        z-index: 50;
        border: 1px solid red;
    }
*/
#settings.panelRight_content {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  width: 100%; /* videos column is 85% */
  /* min-width: 192px; */
  top: 0;
  right: 0;
  margin: 0;
  color: var(--navy-600);
  z-index: 70;
}

#panelR-skyBox {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  /* align-items: center; */
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: calc(var(--gridH) * 1);
  height: calc(var(--gridH) * 5);
  width: 100%; /* videos column is 85% */
  z-index: 71;
  /* overflow: hidden; */
}

/* Colorboxes ------------------------ can remove after design phase */
.colorBoxRow {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
  height: 100px;
}
.colorBoxRow .colorBox {
  height: 48px;
  width: 48px;
  margin: 2px;
  border-radius: 4px;
  color: white;
  font-weight: bold;
}
.colorBoxRow .colorBox.blue-wave {
  background-color: var(--blue-wave);
}
.colorBoxRow .colorBox.color_waveBlue-600 {
  background-color: var(--color_waveBlue-600);
}
.colorBoxRow .colorBox.color_text {
  background-color: var(--color_text);
}
.colorBoxRow .colorBox.textLight {
  background-color: var(--color_textLight);
}
.colorBoxRow .colorBox.navStepSubtle {
  background-color: var(--color_navStepSubtle);
}
.colorBoxRow .colorBox.waveMini-OFF {
  background-color: var(--color_waveMini-OFF);
}

/* ------------------------------------------ */
#panelR-beachBox {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  height: calc(var(--gridH) * 3);
  width: 100%; /* videos column is 85% */
  margin-top: calc(var(--gridH) * 5);
  bottom: 0;
  overflow: hidden;
  padding-bottom: 1rem;
  z-index: 70;
}

.pubVid {
  position: relative;
  display: flex;
  width: 50%;
  height: 40%;
  min-height: 200px;
  min-width: 200px;
}

.pubID-label {
  width: 200px;
  font-weight: bold;
  text-align: left;
  line-height: 2rem;
  color: var(--brown-700);
  /* #ad9984; */
}

/* OT_mirrored OT_root OT_publisher OT_fit-mode-cover */
/* #pubisher .OT_widget-container { */
.OT_publisher {
  /* border: 6px solid #50d3d6; */
  display: inline;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 200px;
  min-width: 200px;
  border-radius: 4px;
  border: 4px solid white;
  background-color: var(--sand-900);
  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px;
}

/* PARENT is #waveBox -------------------- 
    Children are positioned in relation to #waveBox.
*/
/* Z-INDICES ----------------------------- 

    #spectraGraph { z-index: 2; }
    #waveBase {  z-index: 3; }

    #charScene { z-index: 6; } 

    #starContainer {  z-index: 10; }
    #targetStar { z-index: 10; }

    .snapshotBox { z-index: 15; }

    #postLeft {  z-index: 11; }
    .plb_sign {  z-index: 12; }     post left box_sign

    #postRight {  z-index: 11; }
*/
#spectraGraphOverlay {
  opacity: 0.1;
  z-index: 3;
}

#waveBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  padding-left: calc(var(--gridW) * 1);
  padding-bottom: calc(var(--gridH) * 1.25);
  height: 100%;
  width: 100%;
  /* LEFT POST  [ Fz Sign ] ------------------- */
  /* RIGHT POST  [ Pause and Play Wave ] ------------------- */
}
#waveBox .spectraLayout {
  position: absolute;
  display: block;
  height: calc(var(--gridH) * 2.75);
  width: calc(var(--gridW) * 4);
  left: calc(var(--gridW) * 1);
  z-index: 2;
}
#waveBox #waveBase { /*  rocks and foam (fullwidth, at flexend) */
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 10;
  top: calc(var(--gridH) * 2.25);
  left: 0;
  z-index: 9;
}
#waveBox #starContainer {
  position: absolute;
  display: block;
  width: calc(var(--gridW) * 4);
  height: calc(var(--gridH) * 4);
  z-index: 10;
}
#waveBox #starContainer .starSliderInput {
  position: relative;
  display: flex;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  top: calc(var(--gridH) * 1.25);
  height: calc(var(--gridH) * 1);
  background: none;
  outline: none;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border: none;
  z-index: 10;
  cursor: pointer;
}
#waveBox #starContainer .starSliderInput::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: calc(var(--gridH) * 3.5);
  background-image: url("../imgs/main/sliderStar.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 10;
}
#waveBox #starContainer .starSliderInput::-moz-range-thumb {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: calc(var(--gridH) * 3.5);
  background-image: url("../imgs/main/sliderStar.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 10;
}
#waveBox #starContainer .starSliderInput:disabled {
  cursor: default;
}
#waveBox #postLeftBox {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  top: calc(var(--gridH) * 1);
  left: calc(var(--gridW) * 0.25);
  height: calc(var(--gridH) * 3);
  width: calc(var(--gridW) * 1.5);
  z-index: 11;
}
#waveBox #postLeftBox.postLeftBg {
  background-image: url(../imgs/main/postLeft/postLeft.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#waveBox #postLeftBox.postLeftBg.ropeCrab {
  background-image: url(../imgs/main/postLeft/postLeft_rope_crab.svg);
}
#waveBox #postLeftBox.postLeftBg.rope {
  background-image: url(../imgs/main/postLeft/postLeft_rope.svg);
}
#waveBox #postLeftBox.postLeftBg.crab {
  background-image: url(../imgs/main/postLeft/postLeft_crab.svg);
}
#waveBox #postLeftBox .plb_sign {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  padding: 0rem 0.5rem;
  min-width: calc(var(--gridW) * 0.5);
  background-image: url(../imgs/signBig_empty.svg);
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
  -webkit-user-select: none; /* Safari */
  user-select: none;
  cursor: pointer;
  z-index: 12;
  border: none;
}
#waveBox #postLeftBox .plb_sign .signContent {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  margin: 0.5rem 0rem;
  width: 100%;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  border: 1px solid gray;
  border-radius: 4px;
}
#waveBox #postLeftBox .plb_sign .signContent.waveBlue_sign {
  border: 1px solid var(--color_waveBlue-600);
  color: var(--color_waveBlue-600);
}
#waveBox #postLeftBox .plb_sign .signContent.waveBlue_sign .label {
  background-color: var(--color_waveBlue-600);
}
#waveBox #postLeftBox .plb_sign .signContent.spruce_sign {
  border: 1px solid var(--color_spruce-500);
  color: var(--color_spruce-500);
}
#waveBox #postLeftBox .plb_sign .signContent.spruce_sign .label {
  background-color: var(--color_spruce-500);
}
#waveBox #postLeftBox .plb_sign .signContent.navy_sign {
  border: 1px solid var(--navy-600);
  color: var(--navy-600);
}
#waveBox #postLeftBox .plb_sign .signContent.navy_sign .label {
  background-color: var(--navy-600);
}
#waveBox #postLeftBox .plb_sign .signContent.gold_sign {
  border: 1px solid #e3aa58;
  color: #c18a48;
}
#waveBox #postLeftBox .plb_sign .signContent.gold_sign .label {
  background-color: #e3aa58;
}
#waveBox #postLeftBox .plb_sign .signContent span {
  padding: 1px 8px;
}
#waveBox #postLeftBox .plb_sign .signContent span.label {
  margin-top: 3px;
  color: var(--sand-200);
  background-color: rgba(0, 0, 0, 0.15);
}
#waveBox #postLeftBox .plb_sign .signContent span.value {
  margin-bottom: 3px;
}
#waveBox #postSmall {
  position: absolute;
  display: flex;
  top: calc(var(--gridH) * 1.5);
  height: calc(var(--gridH) * 2);
  width: calc(var(--gridW) * 0.75);
  right: calc(var(--gridW) * 0.58);
  z-index: 11;
  background-size: auto 100%;
  background-position: center;
  background-image: url("../imgs/post_leanRight.svg");
  background-repeat: no-repeat;
}
#waveBox #postSmall #signRight {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 1rem;
  left: -7px;
  height: calc(var(--gridH) * 0.66);
  width: calc(var(--gridW) * 0.75);
  transform: rotate(5deg);
  background-size: 100% 100%;
  background-position: cover;
  background-image: url("../imgs/woodSign.svg");
  background-repeat: no-repeat;
  cursor: pointer;
}
#waveBox #postSmall #signRight .signRight-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1.25rem;
  height: 80%;
  font-size: auto;
  font-weight: bold;
  text-align: center;
  color: #f7f2db;
}

/* WIP 


/* ===========================
    Z-INDICES

*/
/* ============================== */
/* PAGE LAYOUT --------------*/
#tutorialContainer {
  position: relative;
  display: none;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}
#tutorialContainer #navStepperContainer {
  position: relative;
  display: flex;
  width: 100%;
  height: calc(var(--gridH) * 1);
}

/* ============================== */
/* SLIDE LAYOUT --------------*/
.tut_topContentBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  height: calc(var(--gridH) * 3);
  padding-top: calc(var(--gridH) * 0.75);
}
.tut_topContentBox .tutCopyBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-left: calc(var(--gridW) * 0.75);
  padding-right: calc(var(--gridW) * 1);
  color: var(--color_text);
  font-size: 1.2rem;
  font-weight: 600;
}
.tut_topContentBox .tutCopyBox.tutCopyBoxShort {
  width: calc(var(--gridW) * 3.5);
  padding-right: 0;
}
.tut_topContentBox .tutCopyBox.tutCopyBox-p2s1 {
  padding-right: 2rem;
}
.tut_topContentBox .tutCopyBox .tutCopyBlock {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 1rem;
}
.tut_topContentBox .tutCopyBox .tutCopyBlock.p2s1_2 {
  margin-left: 6%;
}
.tut_topContentBox .tutCopyBox .tutCopyBlock.p2s1_3 {
  margin-left: 47%;
}
.tut_topContentBox .tutCopyBox .tutCopyBlock.p2s1_4 {
  margin-left: 67%;
}
.tut_topContentBox #waveMiniBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  width: calc(var(--gridW) * 2.25);
  z-index: 30;
}

/* ============================== */
/* NAV STEPPER --------------*/
#tut_navStepper {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
#tut_navStepper .iconBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 8.3333333333%;
  padding: 4px;
}
#tut_navStepper .iconBox svg#icon_tutorial path.ico-stroke, #tut_navStepper .iconBox polygon.ico-stroke {
  stroke: var(--color_textLight);
  fill: none;
}
#tut_navStepper #stepperBox {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0.5rem;
}
#tut_navStepper #stepperBox .stepperBox_line {
  position: absolute;
  width: 100%;
  top: 50%;
  display: flex;
  color: var(--color_navStepSubtle);
  padding: 0 0.5rem;
  border-style: solid;
  z-index: 1;
  /* border: 1px solid red; */
}
#tut_navStepper #stepperBox #stepperBox_titleBox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  width: 50%;
  height: 100%;
  z-index: 2;
}
#tut_navStepper #stepperBox #stepperBox_titleBox .activityTitle {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  height: 50%;
  width: 100%;
  padding-top: 0.8rem;
  padding-bottom: 0.33rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1rem;
  font-weight: bold;
  color: var(--color_textLight);
}
#tut_navStepper #stepperBox #stepperBox_titleBox .activityTitle #currentStep {
  display: none;
  font-weight: bold;
  margin-left: 1rem;
  color: var(--navy-600);
}
#tut_navStepper #stepperBox #stepperBox_titleBox .activityTitle #currentStep.stepIdIsVisible {
  display: flex;
}
#tut_navStepper #stepperBox #stepperBox_titleBox #stepTitle {
  display: flex;
  justify-self: flex-start;
  font-weight: bold;
  font-size: 1rem;
  color: var(--color_textLight);
  padding-bottom: 0.5rem;
  padding-top: 0.33rem;
}
#tut_navStepper #stepperBox #stepperBtnBox {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 100%;
  z-index: 5;
  /* Show the tooltip text when you mouse over the tooltip container */
}
#tut_navStepper #stepperBox #stepperBtnBox .navBub {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--color_navStepSubtle);
  border: 2px solid var(--color_navStepSubtle);
  box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.75);
}
#tut_navStepper #stepperBox #stepperBtnBox .navBub .navTooltip {
  position: absolute;
  color: var(--color_text);
  font-size: 0.5rem;
  font-weight: bold;
  top: 1.5rem;
  width: 265px;
  text-align: center;
  z-index: 1;
  visibility: hidden;
}
#tut_navStepper #stepperBox #stepperBtnBox .navBubBig {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 1rem;
  margin-right: 3px;
  color: white;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  background-color: var(--color_navStepSubtle);
  border: 2px solid var(--color_navStepSubtle);
}
#tut_navStepper #stepperBox #stepperBtnBox .navBubBig .navTooltip {
  position: absolute;
  color: var(--color_text);
  font-size: 0.5rem;
  top: 2rem;
  text-align: center;
  z-index: 1;
  visibility: hidden;
}
#tut_navStepper #stepperBox #stepperBtnBox .navBub_post {
  color: var(--color_textLight);
  background-color: var(--blue-sky);
  border-color: var(--color_textLight);
}
#tut_navStepper #stepperBox #stepperBtnBox .navBub_active {
  color: var(--color_textLight);
  background-color: white;
  border-color: var(--color_textLight);
}
#tut_navStepper #stepperBox #stepperBtnBox .navBub:hover {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  transform: scale(1.5); /* Equal to scaleX(0.7) scaleY(0.7) */
  transition: 0.15s;
}
#tut_navStepper #stepperBox #stepperBtnBox .navBub:hover .navTooltip {
  visibility: visible;
}
#tut_navStepper #stepperBox_arrowBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 8.3333333333%;
  z-index: 5;
}
#tut_navStepper #stepperBox_arrowBox .navStepArrow {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  cursor: pointer;
}
#tut_navStepper #stepperBox_arrowBox .navStepArrow svg {
  height: 100%;
  width: 32px;
}
#tut_navStepper #stepperBox_arrowBox .navStepArrow svg path {
  fill: var(--color_textLight);
  stroke: var(--color_textLight);
  stroke-width: 2px;
}
#tut_navStepper #stepperBox_arrowBox .navStepArrow.navStepArrow:hover {
  transform: scale(1.25);
  transition: 0.15s;
}
#tut_navStepper #stepperBox_arrowBox .navStepArrow .arrowTooltip {
  position: absolute;
  color: var(--color_text);
  font-weight: bold;
  font-size: 0.66rem;
  top: 2.33rem;
  text-align: center;
  z-index: 1;
  visibility: hidden;
}
#tut_navStepper #stepperBox_arrowBox .navStepArrow:hover .arrowTooltip {
  visibility: visible;
}

/* SVG COLORS------------------------*/
.color-waveMini-OFF {
  color: var(--color_textLight) !important;
}

#waveMiniBox .miniSlot {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
}
#waveMiniBox .miniSlot .wm_imgBtn {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 1rem;
  height: 100%;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: flex-end;
  width: 100%;
  max-width: 212px;
  height: 100%;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox .wm_waveBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: flex-end;
  width: 100%;
  max-width: 212px;
  height: 100%;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox .wm_waveBox.wm_svg-sky svg path {
  fill: var(--blue-sky);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox .wm_waveBox.wm_svg-red svg path {
  fill: var(--color_red-500);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox .wm_waveBox.wm_svg-waveBlue svg path {
  fill: var(--blue-wave);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox .wm_waveBox.wm_svg-navy svg path {
  fill: var(--navy-600);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox .wm_waveBox.wm_svg-white svg path {
  fill: white;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox .wm_waveBox.wm_svg-spruce svg path {
  fill: var(--color_spruce-500);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox .wm_waveBox.wm_svg-OFF svg path {
  fill: var(--color_waveMini-OFF);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox .wm_waveBox svg g line.miniLine {
  fill: none;
  stroke: var(--blue-sky);
  stroke-width: 2px;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--blue-sky);
  border: 0;
  padding: 0;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox:hover #swapBtn rect.bg {
  fill: rgba(255, 255, 255, 0.5);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox:active #swapBtn rect.bg {
  fill: white;
  opacity: 0.5;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox #swapBtn {
  position: absolute;
  display: flex;
  z-index: 4;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox #swapBtn rect.bg {
  fill: #a0d1cf;
  opacity: 0.25;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox #swapBtn path.wm_svg-red {
  fill: var(--color_red-500);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox #swapBtn path.wm_svg-waveBlue {
  fill: var(--blue-wave);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox #swapBtn path.wm_svg-navy {
  fill: var(--navy-600);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox #swapBtn path.wm_svg-white {
  fill: white;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox #swapBtn path.wm_svg-spruce {
  fill: var(--color_spruce-500);
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_svgBox button#wm_swapBox #swapBtn .swapLabel {
  position: relative;
  display: flex;
  fill: var(--color_text);
  font-size: 0.9rem;
  font-weight: 600;
}
#waveMiniBox .miniSlot .wm_imgBtn .wm_label {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: flex-end;
  width: 100%;
  max-width: 212px;
  color: var(--color_text);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  height: 100%;
}
#waveMiniBox .miniSlot .wm_audioBox {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  padding: 1rem;
}
#waveMiniBox .miniSlot .wm_audioBox.wm_audioBox-red svg {
  fill: var(--color_red-500);
}
#waveMiniBox .miniSlot .wm_audioBox.wm_audioBox-waveBlue svg {
  fill: var(--blue-wave);
}
#waveMiniBox .miniSlot .wm_audioBox.wm_audioBox-navy svg {
  fill: var(--navy-600);
}
#waveMiniBox .miniSlot .wm_audioBox.wm_audioBox-white svg {
  fill: white;
}
#waveMiniBox .miniSlot .wm_audioBox.wm_audioBox-spruce svg {
  fill: var(--color_spruce-500);
}
#waveMiniBox .miniSlot .wm_audioBox.wm_audioBox-OFF svg {
  fill: var(--color_waveMini-OFF);
}

/* Parent located in _appLayout 

    #waveBox {
        position: relative;
        display: block;
        height: 100%;
        width: 100%;
    }

    ===========================
    Z-INDICES

    from _main_waveBox.scss
        #spectraGraph { z-index: 2; }
        #waveBase {  z-index: 3; }

        #starContainer {  z-index: 10; }
        #targetStar { z-index: 10; }

        #postLeft {  z-index: 11; }
        .plb_sign {  z-index: 12; }     post left box_sign

        #postRight {  z-index: 11; }

        #charScene { z-index: 5; }

    // tutorial waveGraph-specific
        2: live wave

        3: bottom overlay (default pos)
        4: mid overlay
        5: top overlay

        6: charScene

        9: waveBase (sea foam)

        10: star slider

        11-12: set (posts, etc)

*/
/* SVG FILL & STROKE COLORS------------------------*/
.fill-red {
  fill: var(--color_red-500);
}

.fill-waveBlue {
  fill: var(--blue-wave);
}

.fill-navy {
  fill: var(--navy-600);
}

.fill-spruce {
  fill: var(--color_spruce-500);
}

.fill-white {
  fill: #ffffff;
}

.fill-alpha {
  opacity: 85%;
}

.fill-blueSky {
  fill: var(--blue-sky);
}

.fill-waveMini-OFF {
  fill: var(--color_waveMini-OFF);
}

.fill-gold500 {
  fill: var(--color_gold-500);
}

.fill-gold600 {
  fill: var(--color_gold-600);
}

.stroke-red {
  stroke: var(--color_red-500);
}

.stroke-waveBlue {
  stroke: var(--blue-wave);
}

.stroke-navy {
  stroke: var(--navy-600);
}

.stroke-white {
  stroke: white;
}

.stroke-spruce {
  stroke: var(--color_spruce-500);
}

.stroke-gold500 {
  stroke: var(--color_gold-500);
}

.stroke-gold600 {
  stroke: var(--color_gold-600);
}

.color-red {
  color: var(--color_red-500);
}

.color-waveBlue {
  color: var(--blue-wave);
}

.color-navy {
  color: var(--navy-600);
}

.color-gold600 {
  color: var(--color_gold-600);
}

#waveBox .waveOverlayBox {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  height: calc(var(--gridH) * 2.75);
  width: calc(var(--gridW) * 4);
  z-index: 3;
  background-position: bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#waveBox .waveOverlayBox svg {
  position: absolute;
  display: flex;
  bottom: 0;
  /* SVG ELEMENT CLASSES --------------------------- */
}
#waveBox .waveOverlayBox svg line.waveLine {
  fill: none;
  stroke: white;
  stroke-width: 3px;
}
#waveBox .waveOverlayBox svg line.waveLine.stroke-red {
  stroke: var(--color_red-500);
}
#waveBox .waveOverlayBox svg line.waveLine.stroke-waveBlue {
  stroke: var(--blue-wave);
}
#waveBox .waveOverlayBox svg line.waveLine.stroke-navy {
  stroke: var(--navy-600);
}
#waveBox .waveOverlayBox svg line.waveLine.stroke-white {
  stroke: white;
}
#waveBox .waveOverlayBox svg line.waveLine.stroke-spruce {
  stroke: var(--color_spruce-500);
}
#waveBox .waveOverlayBox svg line.waveLine.stroke-gold500 {
  stroke: var(--color_gold-500);
}
#waveBox .waveOverlayBox svg line.waveLine.stroke-gold600 {
  stroke: var(--color_gold-600);
}
#waveBox .waveOverlayBox svg path.topLine {
  fill: none;
  stroke: white;
  stroke-width: 10px;
  opacity: 0.8;
}
#waveBox .waveOverlayBox svg path.topLine.stroke-red {
  stroke: var(--color_red-500);
}
#waveBox .waveOverlayBox svg path.topLine.stroke-waveBlue {
  stroke: var(--blue-wave);
}
#waveBox .waveOverlayBox svg path.topLine.stroke-navy {
  stroke: var(--navy-600);
}
#waveBox .waveOverlayBox svg path.topLine.stroke-white {
  stroke: white;
}
#waveBox .waveOverlayBox svg path.topLine.stroke-spruce {
  stroke: var(--color_spruce-500);
}
#waveBox .waveOverlayBox svg path.topLine.stroke-gold500 {
  stroke: var(--color_gold-500);
}
#waveBox .waveOverlayBox svg path.topLine.stroke-gold600 {
  stroke: var(--color_gold-600);
}
#waveBox .waveOverlayBox svg .diagramGroup .diagramLines {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2px;
}
#waveBox .waveOverlayBox svg .diagramGroup .diagramText {
  font-family: "Quicksand-Bold", "Quicksand";
  font-size: 1.33rem;
  z-index: 50;
  display: block;
}

.charSceneBox {
  position: absolute;
  display: flex;
  margin-top: calc(var(--gridH) * 1.15);
  margin-left: calc(var(--gridW) * -0.8);
  height: calc(var(--gridH) * 3.5);
  width: calc(var(--gridW) * 5);
  background-size: 90%;
  background-repeat: no-repeat;
  z-index: 6;
}
.charSceneBox.char_p0s1 {
  background-image: url("../imgs/tutorial/chars/p0s1.png");
}
.charSceneBox.char_p0s2 {
  background-image: url("../imgs/tutorial/chars/p0s2.png");
}
.charSceneBox.char_p1s1 {
  background-image: url("../imgs/tutorial/chars/p1s1.png");
}
.charSceneBox.char_p1s2 {
  background-image: url("../imgs/tutorial/chars/p1s2.png");
}

#micAccessButton {
  display: none;
  z-index: 99;
}

.hotlink {
  text-decoration: underline;
}

.hotlink:hover {
  cursor: pointer;
}

#panelR-skyBox button {
  width: 100px;
}

button:disabled {
  cursor: default;
}

/* end grid-area */

/*# sourceMappingURL=style.css.map */