/* --- Styles for Terp Dialogue Pages --- */

/*
----Posible category colors (but I'm not sure I think they be the best)------------
#fcede1 (#fa9a4b) - light (bright) orange-ish red (for power)
#e2ebf4 (#6eb6ff) - light (bright) blue (for interpreter)
#a9cae8 - slightly darker blue (for interpreter introduction/intervention)
#d9eed8 (#77ff70) - light (bright) green (for nonPower)
#f1d0f5 (#ed6dfc) - light (bright) magenta (for stage directions)
#edc2c3 - red (for trigger and decision blocks)
#f0dddd - much lighter red (almost white)

----Diffrent greys------------
#18191b - darker-ish grey
#2d3133 - light but not too light grey
#47494a - lighter grey
#828282 - lots lighter grey
#9e9e9e - even lighter grey
#e8e8e8 - off white

#2a2a2a - color of background at lightest (or just about)

#44a241 - TLDFC dino green
#5cb05a - bit lighter version of TLDFC dino green
#56ca44 - new updated standard

***** FONTS *****
Off-white (for fonts)  #ededed
light grey (greenish)  #bbbfbd
#68f312 - hacker font green
*/

/* import header rules */
@import url('header_v5.css');

/* YE OL' GLOBAL STYLES -------
----------------------------------*/
@font-face {
  font-family: 'Mona Sans';
  src:
    url('../fonts/Mona-Sans.woff2') format('woff2 supports variations'),
    url('../fonts/Mona-Sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
html, body {
  background-color: #18191b;
}
html {
  font-family: 'Mona Sans', sans-serif;
  scroll-behavior: smooth;
}
::selection {
  color: black;
  background: #56ca44;
}
body {
  margin: 0;
  color: #ededed;
  overscroll-behavior: auto;
}
footer {
  background: linear-gradient(0deg, rgb(2, 2, 2), rgb(9, 9, 9)),
    url(./noise.svg);
  padding: 1.5em 1em 0.5em 1em;
  font-size: 1.2rem;
  text-align: center;
}
footer h3 {
  font-weight: normal;
  margin: 60px 0 0 0;
}
button:hover {
  cursor: pointer;
}
input[type=checkbox]:hover {
  cursor: pointer;
}
/* Special Universal Styles */
#smolText {
  font-size: 16px;
}
.smolPara {
  font-size: 0.4em;
}
.smolishPara {
  font-size: 0.5em;
}
.medPara {
  line-height: 1.6rem;
  font-size: 0.7em !important;
  letter-spacing: 2px;
}
.largeParaContainer {
  max-width: 400px;
  padding: 20px;
  margin: 0 auto;
}
.largePara {
  line-height: 1.6rem;
  font-size: 1.5em !important;
  letter-spacing: 2px;
}
.largePara.inVocab {
  font-size: 0.7em !important;
  line-height: 1.2em;
}
kbd {
  border: 1px solid #ededed;
  border-radius: 5px;
  box-shadow: 0 2px 0 #ededed;
  padding: 0 8px;
}
.centered {
  text-align: center;
}
.accent-light-orange {
  color: #ffc596 !important;
}
.accent-light-blue {
  color: #91c5fa !important;
}
.accent-light-green {
  color: #8efc88 !important;
}
.accent-light-magenta {
  color: #f38fff !important;
}
.accent-dino-green {
  color: #56ca44 !important;
}
.filter-color-to-green {
  filter: sepia(1) saturate(5) hue-rotate(95deg) brightness(85%);
}
.top-margin-smol {
  margin-top: 12px;
}
.bottom-margin-smol {
  margin-bottom: 0.4em;
}
.slightly-gray {
  color: #bbbfbd;
}
.bolded {
  font-weight: bolder;
}
.lighter {
  font-weight: lighter;
}
.thinner {
  font-weight: 200;
}
.italics {
  font-style: italic;
}
.thin-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.row-gap-20 {
  row-gap: 20px;
}
.tab-link {
  color: #56ca44;
  text-decoration: none;
}
.tab-link:hover, .tab-link:focus, tab-link:active {
  filter: brightness(130%);
  outline-style: dotted;
  outline-width: 1px;
  outline-color: #56ca44;
  outline-offset: 2px;
  border-radius: 3px;
}
.tab-link:visited {
  color: #56ca44;
}
.btn-green {
  color: #56ca44;
  border: 2px solid #56ca44;
  border-radius: 5px;
  background-color: transparent;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
  text-decoration: none;
}
.btn-green:hover, .btn-green:focus, .btn-green:active {
  color: black;
  background-color: #56ca44;
  cursor: pointer;
}
.btn-gray-to-green {
  color: #909692;
  border-color: #909692;
  border-style: solid;
  background-color: transparent;
  transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out,
    color 0.2s ease-in-out;
  text-decoration: none;
}
.btn-gray-to-green:hover, .btn-gray-to-green:focus, .btn-gray-to-green:active {
  color: black;
  background-color: #56ca44;
  border-color: #56ca44;
}
.btn-gray {
  color: #202020;
  border: 2px solid #202020;
  background-color: transparent;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
  text-decoration: none;
}
.btn-gray:hover, .btn-gray:focus, .btn-gray:active {
  color: #56ca44;
  background-color: #202020;
  cursor: pointer;
}
.btn-trial {
  color: black;
  background: linear-gradient(270deg, rgb(52, 221, 251), rgb(101, 250, 113));
  box-shadow: 0 0 18px 1px rgba(52, 221, 251, 0.634);
  filter: brightness(100%);
  border: none;
  transition: box-shadow 0.2s ease-in-out, filter 0.2s ease-in-out;
}
.btn-trial:hover, .btn-trial:focus, .btn-trial:active {
  box-shadow: 0 0 24px 8px rgba(52, 221, 251, 0.634);
  filter: brightness(120%);
}
.btn-trial:disabled, .btn-trial:disabled:hover, .btn-trial:disabled:focus, .btn-trial:disabled:active {
  background: linear-gradient(270deg, rgb(46, 201, 228), rgb(89, 222, 100));
  filter: brightness(60%);
  cursor: not-allowed;
}
.btn-flashy {
  color: black;
  background: linear-gradient(270deg,
    rgb(101, 250, 121), rgb(203, 250, 101),
    rgb(251, 198, 52),
    rgb(251, 168, 52), rgb(251, 82, 52)
    );
  filter: brightness(100%);
  box-shadow: 0 0 18px 1px rgba(255, 138, 83, 0.634);
  transition: box-shadow 0.2s ease-in-out, filter 0.2s ease-in-out;
}
.btn-flashy:hover, .btn-flashy:focus, .btn-flashy:active {
  filter: brightness(120%);
  box-shadow: 0 0 24px 8px rgba(255, 138, 83, 0.634);
}
.btn-signup {
  filter: brightness(100%);
  box-shadow: 0 0 8px 1px rgba(86, 202, 68, 0.634);
  transition: box-shadow 0.2s ease-in-out, filter 0.2s ease-in-out;
}
.btn-signup:hover, .btn-signup:focus, .btn-signup:active {
  filter: brightness(120%);
  box-shadow: 0 0 20px 6px rgba(86, 202, 68, 0.634);
}
.edit-or-create-btn {
  margin: 10px 20px;
  font-size: 18px;
  padding: 8px 10px;
}
.med-big-btn {
  font-size: 36px !important;
  padding: 6px 14px;
  border-radius: 10px !important;
  margin-bottom: 10px;
}
.disabled {
  filter: grayscale(1) brightness(85%);
  color: #676e6a;
  border-color: #676e6a;
  background: transparent;
}
.disabled:hover, .disabled:focus, .disabled:active {
  cursor: not-allowed !important;
  color: #676e6a !important;
  border-color: #676e6a !important;
  background: transparent !important;
}
.sideBySideBtnsContainer > button {
  margin-right: 2rem;
}
.loading-dots::after {
  content: "";
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis-dots 4s infinite;
  animation-fill-mode: forwards;
}
@keyframes ellipsis-dots {
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}
/* Forms Styles */
.input-wrapper {
  display: flex;
  flex-direction: column-reverse;
  margin: 30px 0 0 0;
}
.bottom-margin-bigger.input-wrapper {
  margin-bottom: 4rem;
}
.input-wrapper.non-invert {
  flex-direction: column;
}
.row-input-wrapper {
  margin: 30px 0 0 0;
}
label {
  font-size: 1em;
  padding: 0 0 5px 0;
}
.input-wrapper input, .input-wrapper textarea, .input-wrapper select, input.standard {
  color: #ededed;
  border: 2px solid #676e6a;
  border-radius: 6px;
  padding: 5px 10px;
  margin: 0;
  background-color: #ededed05;
}
.input-wrapper input {
  font-size: 1.3em;
}
.input-wrapper select {
  font-size: 0.6em;
}
.input-wrapper select option {
  color: #ededed;
  background-color: #151414;
  font-size: 18px !important;
}
.input-wrapper input:hover, .input-wrapper textarea:hover, .input-wrapper select:hover {
  border-color: #909692;
}
.input-wrapper input:focus, .input-wrapper textarea:focus {
  border-color: #ededed;
  background-color: #edededef;
  color: black;
}
input[type=radio] {
  accent-color: #56ca44;
  height: 20px;
  width: 20px;
  margin-left: 18px;
}
.radio-input-wrapper label {
  font-size: 20px;
  position: relative;
  top: -2px;
  padding: 0;
}
.checkbox-wrapper {
  display: flex;
  flex-direction: row-reverse;
  margin: 15px 0 0 0;
  justify-content: left;
}
.checkbox-wrapper label {
  text-align: right;
}
.checkbox-wrapper input[type=checkbox] {
  margin: 0 0 0.3em 1em;
  width: 2em;
  height: 2em;
}
.input-wrapper textarea {
  overflow: auto;
}
.help-text {
  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
}
fieldset {
  margin: 2em 0 0 0;
  border-radius: 10px;
}
.submit-wrapper {
  margin: 25px 0 20px 0;
}
.submit-wrapper input[type=submit] {
  color: #56ca44;
  background-color: transparent;
  font-size: 1.2em;
  font-weight: 500;
  padding: 7px 12px;
  border: 2px solid #56ca44;
  border-radius: 10px;
  display: inline;
}
.submit-wrapper input[type=submit]:hover, .submit-wrapper input[type=submit]:focus {
  color: black;
  background-color: #56ca44;
  cursor: pointer;
}
.error, .errorlist {
  color: #fd2b40 !important;
  background-color: black;
  border-radius: 10px;
  font-size: 1.1rem;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 400;
}
.error {
  padding: 10px;
}
.errorlist {
  padding: 10px 20px 8px 20px;
}
ul.errorlist + input {
  border: 1px solid #fd2b40 !important;
}
.errorField input, .errorField select {
  outline: 1px solid #fd2b40;
  outline-offset: 3px;
}
.errorInput {
  border: 1px solid #fd2b40;
}
.errorInputOffset {
  outline: 1px solid #fd2b40;
  outline-offset: 6px;
}
/* MODE-LESS DIALOGs (ethical dilemma alert, langCode explainers) --------
----------------------------------*/
dialog.base-dialog::backdrop {
  backdrop-filter: blur(3px) brightness(30%);
  -webkit-backdrop-filter: blur(3px) brightness(30%);
}
dialog.base-dialog {
  padding: 50px;
  color: #ededed;
  border: none;
  border-radius: 15px;
  background-image: linear-gradient(250deg, rgb(32,35,33) 0%, rgb(9,9,9) 100%), url(./noise.svg);
}
dialog.base-dialog .x-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 1px 0 0 1px;
  font-size: 16px;
  color: #56ca44;
  background-color: transparent;
  border: solid 1px #56ca44;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
dialog.base-dialog .x-btn:hover, dialog.base-dialog .x-btn:focus, dialog.base-dialog .x-btn:active {
  color: black;
  background-color: #56ca44;
}
dialog.smol-dialog {
  margin: auto 30%;
  font-family: monospace;
  background-color: black;
  border: none;
  border-radius: 15px;
}
dialog.smol-dialog::backdrop {
  backdrop-filter: blur(5px) brightness(30%);
  -webkit-backdrop-filter: blur(5px) brightness(30%);
}
dialog.smol-dialog h4 {
  color: #68f312;
  font-weight: lighter;
  margin: 20px 50px 30px 50px;
  font-size: 2rem;
}
dialog.smol-dialog h5 {
  color: #68f312;
  font-weight: lighter;
  margin: 20px 50px 0 50px;
  font-size: 1.8rem;
}
dialog.smol-dialog h6 {
  color: #68f312;
  font-weight: lighter;
  margin: 0 50px 30px 50px;
  font-size: 1.8rem;
}
dialog.smol-dialog button {
  font-size: 0.8em;
  color: #68f312;
  background-color: transparent;
  border: solid 1px #68f312;
  border-radius: 5px;
  transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out,
    color 0.2s ease-in-out;
}
dialog.smol-dialog button:hover {
  color: black;
  background-color: #68f312;
}
dialog.smol-dialog button:focus {
  color: black;
  background-color: #68f312;
}
dialog.smol-dialog .ok-btn {
  font-size: 1.3em;
  margin: 0 10% 20px 10%;
  padding: 5px 10px;
}
dialog.smol-dialog .x-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 1px 0 0 1px;
  font-size: 16px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
dialog.med-dialog {
  margin: auto;
  width: clamp(240px, 70vw, 700px);
}
dialog.long-scroll-dialog {
  margin: auto;
  height: clamp(300px, 80vh, 800px);
  width: clamp(240px, 70vw, 700px);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #56ca44 #676e6a;
}
dialog.long-scroll-dialog::-webkit-scrollbar {
  width: 10px;
}
dialog.long-scroll-dialog::-webkit-scrollbar-thumb {
  background-color: #56ca44;
  border-radius: 5px;
}
dialog.long-scroll-dialog::-webkit-scrollbar-track {
  background-color: #676e6a;
}
/* INTRO --------
----------------------------------*/
.intro {
  background: linear-gradient(0deg, rgb(39, 39, 39), rgb(9, 9, 9)),
    url(./noise.svg);
  padding: 2% max(10%, calc((100% - 1100px) / 2)) 10% max(10%, calc((100% - 1100px) / 2));
  font-size: 34px;
}
#in-body-nav {
  display: none;
}
#in-body-nav ul {
  list-style: none;
  padding: 0; 
}
#in-body-nav a {
  padding: 10px;
  font-size: 0.9em;
  text-decoration: none;
  color: #676e6a;
  border: 2px solid #676e6a;
  border-radius: 10px;
  background-color: transparent;
}
#in-body-nav a:hover, #in-body-nav a:focus, #in-body-nav a:active {
  background-color: #56ca44;
  color: black;
}
#in-body-back-arrow {
  height: 35px;
  width: 35px;
  display: inline-block;
  position: relative;
  margin: 0 5px 0 0;
  top: 10px;
  color: #676e6a;
}
#in-body-nav a:hover #in-body-back-arrow, #in-body-nav a:focus #in-body-back-arrow, #in-body-nav a:active #in-body-back-arrow {
  color: black;
}
.intro h1 {
  font-size: 2.3em;
  text-align: center;
  position: relative;
}
.intro h1.practiceSeshTag::after {
  content: "*practice session review";
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 32px;
  color: #56ca44;
}
#tutorialVidContainer {
  max-width: 800px;
  margin: 20px auto 70px auto;
  border: 4px solid #56ca44;
  border-radius: 8px;
}
.card {
  background: linear-gradient(250deg, rgb(32, 35, 33), rgb(2, 2, 2) 100%), url(./noise.svg);
  border-radius: 20px;
  margin: 0 -50px;
  padding: 20px 50px;
}
dl.disclaimer {
  font-size: 0.4em;
  display: grid;
  grid-template-columns: max-content auto;
  padding: 0 5%;
}
.disclaimer dt {
  grid-column-start: 1;
  text-decoration: underline;
}
.disclaimer dd {
  grid-column-start: 2;
  margin-inline-start: 10px;
}
dt span.noUnderline {
  text-decoration: none;
  display: inline-block;
}
.meta {
  font-family: "Courier New", monospace;
}
.def {
  margin: 0 20px;
}
#info-diff {
  grid-area: diff;
}
#info-dom {
  grid-area: dom;
}
#info-subdom {
  grid-area: subdom;
}
#info-env {
  grid-area: env;
}
.terpInfo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0.8rem;
}
.terpInfo div {
  margin: 0 25px;
}
.terpInfo dt {
  margin: 10px 0 0 0;
  text-decoration: underline;
  font-size: 0.8em;
  text-align: center;
}
.terpInfo dd {
  margin: 0;
  text-align: center;
}
#region {
  margin: 0.5em 0 1.5em 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  justify-content: center;
}
#region dt {
  text-decoration: underline;
  font-size: 0.8em;
  text-align: center;
}
#region dd {
  margin: 0;
  text-align: center;
}
.stats {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  column-gap: 25px;
  font-size: 0.5em;
  border: 1px dotted #474a4762;
  border-radius: 15px;
}
.stats div {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: 1fr;
  column-gap: 8px;
}
.stats div:nth-child(1) {
  justify-self: end;
}
.stats div:nth-child(2) {
  justify-self: start;
}
.stats dd {
  margin: 0;
}
.summary {
  margin-top: 5%;
}
.longHeader {
  font-size: 1.2em;
  text-decoration: underline;
  font-weight: 600;
}
.longText {
  font-weight: 300;
}
.longerText {
  font-size: 0.8em;
}
.spaceBelow {
  margin: 0 0 20px 0;
}
.spaceAboveAndBelow {
  margin: 40px 0 20px 0;
}
.interlocutors {
  margin: 7% 0 5% 0;
}
dd#participantsContainer {
  margin: 0;
}
table.participants {
  table-layout: auto;
  margin: 0 auto;
}
table.participants {
  overflow: auto;
}
/* to make tables rows rounded, thanks stack exchange */
table.participants td:first-child { border-top-left-radius: 8px; }
table.participants td:last-child { border-top-right-radius: 8px; }
table.participants td:first-child { border-bottom-left-radius: 8px; }
table.participants td:last-child { border-bottom-right-radius: 8px; }

.part-table-odd {
  background-color: #0f100fbe;
}
td {
  padding: 8px 40px;
}
table.participants td {
  color: #d2d3d2;
}
td.roleAbbrev {
  text-align: center;
  min-width: 90px;
}
td.language {
  text-align: center;
  cursor: pointer;
}
.langCode {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: dotted;
}
#contributorsContainer {
  margin: 1% 0 0 0;
  padding: 0 10%;
}
.expandDD {
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.expandDD.visible {
  opacity: 1;
}
.contributors {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.contributorsDiv {
  margin: 5% 0;
  flex-basis: 50%;
}
#actorsDiv {
  flex-basis: 100%;
  margin-left: -10%;
}
#actorsContainerDD {
  margin: 0;
}
.actors {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: -15%;
}
.actors div {
  margin: 25px 0 0 15px;
}
.roleLabel {
  text-decoration: underline;
}
.expander-dt {
  cursor: pointer;
}
.expanderText {
  display: inline-block;
  text-decoration: underline;
}
.expanderButton {
  display: inline-block;
  padding: 0 0 0 15px;
  text-decoration: none;
}
.expandBtn {
  color: white;
  font-size: 1.6em;
  position: relative;
  top: 5px;
  padding: 0;
}
.expandBtn.smolExpandBtn {
  color: white;
  font-size: 1.6em;
  padding: 0;
}
#legend-heading .expandBtn {
  top: 0;
}
.expandBtn:hover {
  animation: spin 1s ease-in-out;
}
.expandBtn:focus {
  animation: spin 1s ease-in-out;
}
@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(180deg);}
}
.role {
  text-decoration: none;
}
.indent {
  margin: 0 0 0 10% !important;
}
#extra {
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
#extra.visible {
  opacity: 1;
}
dd.supp {
  font-size: 0.7em;
  font-weight: lighter;
  margin: 20px 0 0 30px;
  display: list-item;
  list-style-type: disc;
}
dd.oddSupp {
  background: rgba(0,0,0, 0.2);
  padding: 4px 10px;
  border-radius: 5px;
}
a.suppLink {
  color: #afafaf;
  text-decoration: none;
}
a.suppLink:hover, a.suppLink:focus, a.suppLink:active {
  color: #b4c8b4;
  text-decoration: underline;
}
a.suppLink:visited {
  text-decoration: none;
}
.contextControlsContainer {
  display: flex;
  margin: 7% 0 0 0;
  padding: 0;
}
#Extra-Context-Poof {
  font-size: 0.8em;
  width: 300px;
  height: 60px;
  border: 3px solid #56ca44;
}
.intro h3 {
  margin: 0;
  font-size: 1.2em;
  text-decoration: underline;
  font-weight: 600;
}
#termTableContainer {
  margin: 0;
  overflow: auto;
}
#termSplainer{
  text-align: center;
}
table#termTable {
  width: 100%;
}
#termTable th {
  padding: 6px 0 3px 0;
  color: black;
}
#powerLang {
  background-color: #fcede1;
}
#nonPowerLang {
  background-color: #d9eed8;
}
#termTable td {
  font-size: 0.7em;
  text-align: center;
}
td.False {
  color: #9e9e9e;
}
td.False:hover {
  cursor: pointer;
}
#termTable .odd {
  background-color: #333333;
}
/* PLEASE SIGN UP SECTION -------
----------------------------------*/
#sign-up-to-see {
  padding: 0 10% 150px 10%;
  display: block;
  background: linear-gradient(0deg, rgb(9,9,9), rgb(39, 39, 39)),
    url(./noise.svg);
}
#sign-up-to-see h2 {
  font-size: 7em;
  text-align: center;
  margin: 0 0 0.83em 0;
}
#sign-up-to-see article {
  display: flex;
  justify-content: center;
}
#btn-sign-up-to-see, #btn-free-trial {
  margin: 0;
  padding: 15px 20px;
  font-size: 2em;
  text-decoration: none;
  border-radius: 15px;
  color: black;
}
#btn-sign-up-to-see.smolr, #btn-free-trial.smolr {
  padding: 10px 12px;
  font-size: 1.1em;
  text-decoration: none;
  border-radius: 10px;
  color: black;
}
#free-trial-wrapper {
  margin-top: 50px;
}
#trial-info {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
}
#trial-info-smol {
  margin-top: 25px;
}
#trial-info-smol p {
  font-size: 0.7em;
}
#trial-info h3, #trial-info h4 {
  font-size: 2em;
  text-align: center;
  font-weight: lighter;
}
#trial-info h3 {
  margin-bottom: 10px;
}
#trial-info h4 {
  margin-top: 10px;
}
/* DIALOGUE -------
----------------------------------*/
.poof {
  display: none !important;
}
.dialogue {
  background: linear-gradient(0deg, rgb(9,9,9), rgb(39, 39, 39)),
    url(./noise.svg);
  padding: 0% max(10%, calc((100% - 1100px) / 2)) 8% max(10%, calc((100% - 1100px) / 2));
}
.dialogue * {
  font-size: 1.8rem;
}
.dialogue ol li {
  color: black;
}
.dialogue .powerLang {
  font-family: sans-serif;
}
.dialogue .nonPowerLang {
  font-family: serif;
}
/* Controls article */
.controls {
  padding: 5% 0;
}
.controls {
  color: #ededed;
}
.controls h2 {
  font-size: 3em;
  text-align: center;
  margin: 0 0 0.83em 0;
}
.sesh-block {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  width: clamp(240px, 60vw, 760px);
  margin: 60px auto 0 auto;
  padding: 30px 50px;
  background-color: #18191b;
  background-image: url(./nnnoise.svg);
  border-radius: 20px;
  box-shadow: 0 1px 20px 1px rgb(244 244 244 / 15%);
}
.smolLeftBigRight {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1fr;
  column-gap: 40px;
  margin: 0;
  padding: 0;
}
#start-sesh h3 {
  margin: 0.9em 0;
  font-size: 48px;
  text-align: center;
}
.smolLeftBigRight > :nth-child(2) {
  justify-self: center;
  align-self: center;
}
.smolLeftBigRight > :nth-child(2) p {
  margin-bottom: 20px;
}
#start-sesh-msg {
  border: 2px dashed gray;
  border-radius: 20px;
  padding: 12px 0 12px 12%;
}
#start-sesh-msg.error {
  padding: 12px 20px;
  font-size: 20px;
}
#btnEditSeshDetailsContainer {
  position: absolute;
  width: clamp(240px, 60vw, 500px);
  height: 20px;
}
#btnEditSeshDetails {
  position: absolute;
  top: 10px;
  right: 0;
  font-size: 14px;
}
#sesh-details-container dt {
  font-size: 18px;
}
#sesh-details-container dd {
  font-size: 14px;
}
#sesh-details-container a {
  font-size: inherit;
}
#sesh-details-container dl .defListRow {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  align-items: baseline;
  margin: 0 0 10px 10px;
}
#sesh-details-container dl .defListRow dd {
  margin: 0;
}
#id_allowed_viewers {
  display: flex;
  flex-direction: column;
  height: 150px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #56ca44 #676e6a;
}
#id_allowed_viewers::-webkit-scrollbar {
  width: 10px;
}
#id_allowed_viewers::-webkit-scrollbar-thumb {
  background-color: #56ca44;
  border-radius: 5px;
}
#id_allowed_viewers::-webkit-scrollbar-track {
  background-color: #676e6a;
}
#id_allowed_viewers label {
  font-size: 18px;
}
#id_allowed_viewers input[type=checkbox] {
  accent-color: #56ca44;
  height: 16px;
  width: 16px;
}
#recordingMiniVid {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
}
#micDialog h4 {
  font-size: 36px;
}
#micDialog label {
  font-size: 28px;
  display: flex;
  align-items: center;
}
#micDialog select {
  font-size: 24px;
}
#vol-container {
  height: 50px;
  width: 20px;
  margin-left: 15px;
  display: grid;
  align-items: end;
  border: 1px solid #999;
  border-radius: 4px;
  overflow: hidden;
}
#vol-indicator {
  background-color: #999;
  width: 100%;
  height: 0%;
  transition: height 0.1s ease;
}
#legend-heading {
  margin: 0 0 10px 0;
}
#legend-wrapper dl {
  margin: 50px 0 0 0;
}
#legend-wrapper dd {
  padding-bottom: 35px;
}
#power-container {
  grid-area: power;
}
#int-container {
  grid-area: int;
}
#nonPower-container {
  grid-area: nonpower;
}
#stage-container {
  grid-area: stage;
}
#decision-container {
  grid-area: decision;
}
#simul-container {
  grid-area: simul;
}
#simul-container > div {
  border: 7px solid #feb01d;
  color: #ededed !important;
}
#legend-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "power power int int nonpower nonpower"
  "simul simul stage stage decision decision";
  gap: 40px 60px;
}
.legend-block {
  border-radius: 40px;
  margin: 15px auto 0 auto;
  padding: 20px;
  color: black;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 300;
  text-align: center;
}
.legend-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.2rem;
  font-weight: 300;
  margin: 5px auto 15px auto;
  text-align: center;
}
.iconExplain {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.2rem;
  font-weight: 300;
  display: flex;
}
.iconExplain img {
  margin: 0 10px 0 0;
}
#power-container .legend-block {
  background-color: #fcede1;
}
#legend-intNorm-block {
  background-color: #e2ebf4;
}
#legend-intInt-block {
  background-color: #a9cae8;
}
#nonPower-container .legend-block {
  background-color: #d9eed8;
}
#stage-container .legend-block {
  background-color: #f1d0f5;
}
#decision-container .legend-block {
  background-color: #edc2c3;
}
.svgBtn {
  margin: 0;
  padding: 1px 6px;
  border: none;
  border-radius: 10px;
  background-color: transparent;
}
.audioContainer .svgBtn:hover, .audioContainer .svgBtn:focus, .audioContainer .svgBtn:active,
.recordAudioCtrlzContainer .svgBtn:hover, .recordAudioCtrlzContainer .svgBtn:focus, .recordAudioCtrlzContainer .svgBtn:active {
  background-color: hsla(0, 0%, 100%, 0.7);
}
#cornerCtrlz {
  position: fixed;
  bottom: 3%;
  right: 2%;
  z-index: 3;
  opacity: 0;
}
#cornerCtrlz.visible {
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
}
#Play-Next {
  display: block;
  margin: 0 auto 10px auto;
}
#Play-Next:hover {
  filter: brightness(1.2);
}
/*#Play-Next.visible {
  opacity: 1;
}*/
#Text-Poof {
  display: block;
}
/*#Text-Poof.visible {
  opacity: 1;
}*/
.controlsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.toggleContainer {
  padding: 0 0 50px 0;
}
.toggle {
  border-radius: 3px;
  transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out,
    color 0.2s ease-in-out;
}
#practiceMode {
  width: 300px;
  height: 60px;
}
#rolePlayMode {
  width: 300px;
  height: 60px;
  margin: 10px 0 0 0;
}
#reviewMode {
  width: 300px;
  height: 60px;
  margin: 10px 0 0 0;
}
#audioControlInstructions {
  font-size: 1em;
  margin: 32px auto;
  width: clamp(220px, 60vw, 600px);
}
.on {
  color: #2a2a2a;
  background-color: #56ca44;
  border: 3px solid #56ca44;
  cursor: default !important;
}
.off {
  color: #47494a;
  background-color: transparent;
  border: 3px solid #47494a;
}
.off:hover, .off:focus {
  color: #47494a;
  background-color: #56ca44;
}
.smolToggle {
  width: 120px;
  height: 40px;
  font-size: 20px;
  border: 2px solid #56ca44;
  border-radius: 3px;
  transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out,
    color 0.2s ease-in-out;
}
.transparentBtn {
  color: #56ca44;
  background-color: transparent;
}
.transparentBtn:hover {
  color: #2a2a2a;
  background-color: #56ca44;
}
.filledInBtn {
  color: #2a2a2a;
  background-color: #56ca44;
}
.filledInBtn:hover, .filledInBtn:focus {
  color: #56ca44;
  background-color: transparent;
}
/* GENERAL DIALOGUE STUFF */
.dialogue ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lineLabelCtrlzWrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.lineLabelCtrlzWrapper > div {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.playAudioCtrlzContainer.audioContainer {
  width: 114px;
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.dialogue .metaInfo {
  margin: 0 20px 0 0;
  padding: 2px;
  position: relative;
  display: flex;
  align-items: baseline;
}
.speakerTag {
  padding: 0;
}
.trunkOrBranchTag {
  padding: 0 0 0 10px;
  color: #2e3030;
  font-family: "Courier New", monospace;
  font-weight: normal;
}
.dialogueID {
  padding: 0;
  color: #2e3030;
  font-family: "Courier New", monospace;
  font-weight: normal;
}
.dialogue p {
  margin: 0;
}
.dialogue li {
  padding: 15px 20px;
  border-radius: 40px;
  position: relative;
}
li.line.recordingUnderway {
  outline: 7px solid hsla(111, 56%, 56%, 1);
  outline-offset: -1px;
}
.dialogue .metaInfo button:hover, .dialogue .metaInfo button:focus, .dialogue .metaInfo button:active {
  filter: opacity(75%);
}
@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg)
  }
}
img.spinny {
  animation: 2s infinite rotate linear;
}
.recordAudioCtrlzContainer {
  margin: 0 0 0 42px;
}
button.recordBtn > img.recordIcon {
  margin-bottom: -4px;
}
button.stopRecordBtn {
  border-radius: 20px;
}
@keyframes pulse {
  0% {
    background-color: rgba(255, 0, 0, 0.1);
  }
  50% {
    background-color: rgba(255, 0, 0, 0.7);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.1);
  }
}
.recordingPulse {
  animation: 2s infinite pulse ease-in-out;
}
.recordingIndicator {
  display: flex;
}
div.difficultContainer {
  position: relative;
  display: inline-block;
}
form.difficultLineForm {
  padding: 0 0 0 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
}
form.difficultLineForm label.difficultLabel {
  padding: 3px 0 0 0;
}
form.difficultLineForm input[type=checkbox] {
  accent-color: black;
  height: 20px;
  width: 20px;
}
.difficultTooltip {
  visibility: hidden;
  position: absolute;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  z-index: 2;
  background-color: black;
  color: #ededed !important;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
}
label.difficultLabel:hover ~ .difficultTooltip,
form.difficultLineForm input[type="checkbox"]:focus ~ .difficultTooltip {
  visibility: visible;
}
form.difficultLineForm input[type="checkbox"]:checked ~ .difficultTooltip {
  visibility: hidden;
}
form.difficultLineForm label.difficultLabel:hover ~ input[type="checkbox"]:checked ~ .difficultTooltip {
  visibility: visible;
}
.difficultTooltip::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.recordingPlayback.audioContainer {
  display: flex;
  column-gap: 8px;
  align-items: center;
  width: 202px;
  margin-top: 15px;
  padding: 6px 15px 3px 15px;
  border-left: 1px dotted #18191b;
  border-radius: 10px;
  box-shadow: 2px 2px black
}
img.recordingIcon {
  margin-right: 20px;
}
.footnote-trigger {
  color: black;
  font-size: 0.5em !important;
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  padding: 3px 5px;
  background-color: transparent;
  border: 1px solid black;
  border-radius: 5px;
}
.footnote-trigger:hover, .footnote-trigger:focus, .footnote-trigger:active {
  color: #e2e7e4;
  background-color: #0000009d;
}
.footnote-inLine {
  margin: 0;
  position: relative;
  left: 83%;
}
.footnote-inOption {
  margin: 0 0 0 5px;
}
dialog.footnote-dialog {
  overflow-y: scroll;
  margin: auto 20% !important;
}
dialog.footnote-dialog p {
  font-size: 0.6em !important;
  font-family: 'Courier New', Courier, monospace;
  color: #68f312;
  text-align: justify;
  margin: 15px 0 0 0;
  padding: 3px;
}
#footnote-para1 {
  margin-top: 50px;
}
.footnote-link {
  color: #eff312;
  font-size: inherit !important;
  text-decoration: none;
}
.footnote-link:visited {
  color: #f3dd12;
}
.footnote-link:hover, .footnote-link:focus, .footnote-link:active {
  color: #12f3ec;
}
/* Different types of dialogue chunks */
.stageDirections {
  background-color: #f1d0f5;
  margin: 10px 10% 0 10%;
  box-shadow: 0 5px 3px #18191b;
}
.stageTag {
  padding: 0 0 10px 20px;
  color: #2e3030;
  font-size: 0.8em;
  font-family: "Courier New", monospace;
  font-weight: normal;
}
.stageDirectionsText {
  padding: 0 10px;
  text-align: center;
  color: #2e3030;
  font-style: italic;
  font-weight: lighter;
  font-family: sans-serif;
  text-wrap: balance;
}
.directionsIcon {
  position: absolute;
  top: 33px;
  left: -44px;
}
.int {
  margin: 10px 20% 0 20%;
  box-shadow: 0 5px 3px #18191b;
}
.int-norm {
  background-color: #e2ebf4;
  margin-bottom: 25px;
  margin-top: 5px;
}
.int-int {
  background-color: #a9cae8;
}
.int-textOnly {
  background-color: #a9cae8;
}
.textBoilerPlate {
  text-align: center;
  font-style: italic;
  font-weight: lighter;
  font-size: smaller;
  text-wrap: balance;
}
.simul {
  outline: 7px solid #feb01d;
  outline-offset: -1px;
}
.power {
  background-color: #fcede1;
  margin: 10px 40% 0 0;
  box-shadow: -4px 5px 3px #18191b;
}
.nonPower {
  background-color: #d9eed8;
  margin: 10px 0 0 40%;
  box-shadow: 4px 5px 3px #18191b;
}
.intText {
  padding: 2px 2px 2px 15px;
}
.intTextPerm {
  padding: 2px 2px 2px 15px;
}
.dialogueText {
  padding: 2px 2px 2px 15px;
}
.dialogueTextPerm {
  padding: 2px 2px 2px 15px;
}
/*  Decision stuff in dilemma articles */
.trigger {
  background-color: #edc2c3 !important;
}
li.decision {
  margin: 10px 0 0 0;
  padding: 17px 17px 40px 17px;
  box-shadow: 0 5px 3px #18191b;
  background-color: #edc2c3 !important;
}
.decision h4 {
  font-size: 2em;
  margin: 10px 0 20px 0;
  text-align: center;
}
.decisionList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(300px, 100%/4)), 1fr));
  gap: 25px 0;
  justify-items: center;
}
.decisionList li {
  width: 80%;
  border-left: 1px dotted #18191b;
  margin: 1% 2%;
}
.liNotSelected {
  box-shadow: 4px 4px 4px #18191b;
  transition: filter 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.liNotSelected:hover {
  cursor: pointer;
  box-shadow: 9px 9px 9px #18191b;
  filter: brightness(1.2);
}
.liSelected {
  box-shadow: 8px 8px 8px #18191b;
  filter: brightness(1.2);
  cursor: default;
}
.decisionBtn {
  margin: 10px 0 10px 0;
  padding: 4px 10px;
  border: 2px solid black;
  border-radius: 7px;
}
.notSelected {
  color: #edc2c3;
  background-color: black;
  transition: filter 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.notSelected:hover {
  filter: brightness(1.3);
  box-shadow: 3px 3px 3px #2d3133;
}
.selected {
  color: black;
  background-color: #f0dddd;
  box-shadow: 3px 3px 3px #2d3133;
}
.selected:hover {
  cursor: default;
}
/* Branch articles */
.branch h3 {
  color: white;
  font-size: 1.2em;
  margin: 4% 0 1% 0;
  text-decoration: underline;
}
/* postTrunk articles */
.postTrunk h3 {
  color: white;
  font-size: 1.2em;
  margin: 4% 0 1% 0;
  text-decoration: underline;
}
/* PRACTICE SESH FORM */
#practice-sesh-dialog h4 {
  font-size: 2em;
}
#id_rating, #id_perceived_performance {
  font-family: 'Courier New', Courier, monospace;
  width: 270px;
}
#id_journal_entry {
  font-size: 16px;
}
#id_vid_link {
  font-size: 16px;
  font-family: 'Courier New', Courier, monospace;
}
#id_vid_embed_code {
  font-size: 12px;
}
input.minutesInput {
  width: 60px;
  text-align: center;
}
#practice-sesh-dialog .help-text {
  font-size: 14px;
  margin: 3px 0 0 5px;
}
#practice-sesh-dialog kbd {
  font-size: 14px;
}
/* Playing Animation ----
------------------------------------- */
.playing {
  width: 20px;
  height: 20px;
  margin: 0 0 0 10px;
  text-align: center;
  font-size: 0.4em;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: none;
}
.playing > div {
  background-color: #47494a;
  padding: 0;
  height: 100%;
  width: 4px;
  border-radius: 2px;
  display: inline-block;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-animation: wavy 1s ease infinite forwards;
  animation: wavy 1s ease infinite forwards;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
.playing .rect2 {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.playing .rect3 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
@-webkit-keyframes wavy {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes wavy {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
/* -------------- EVALUATIONS STUFF -------------------- */
.prev {
  background: rgb(9, 9, 9);
  margin: 0;
  padding: 50px max(10%, calc((100% - 1300px) / 2)) 10% max(10%, calc((100% - 1300px) / 2));
}
.prev h1 {
  font-size: 4em;
  text-align: center;
  margin: 0;
}
.prev p.centered {
  font-size: 1.4em;
  margin: 0.5em 0 2em 0;
}
#back-to-community-btn {
  display: inline-block;
  margin: -20px 0 30px 5%;
  padding: 14px 18px;
  font-size: 1.4em;
  font-weight: 500;
  text-decoration: none;
  border-width: 2px;
  border-radius: 12px;
}
#eval-messages {
  position: fixed;
  bottom: 0;
  right: 0;
  max-width: 560px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  margin: 30px;
  padding: 20px 50px;
  background: linear-gradient(70deg, rgb(19,21,20) 0%, rgb(9,9,9) 100%);
  border: solid 3px #56ca44;
  border-radius: 20px;
}
#eval-messages.visible {
  opacity: 1;
}
.messages-list {
  list-style: none;
  color: #bbbfbd;
  font-size: 1.7rem;
  padding: 0;
}
.messages-list .error {
  padding: 20px;
}
#evalData-wrapper {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: auto;
}
.evalData-container {
  margin: 20px 0 20px 50px;
}
.double-wide {
  grid-column: 1 / 3;
}
.stack {
  display: flex;
  flex-direction: column;
}
.evalData {
  font-size: 24px;
}
dt.evalData {
  display: inline;
}
dd.evalData {
  display: inline;
  margin: 0 0 0 9px;
}
#eval-update-btn-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: right;
}
svg.vid-icon {
  color: #d3d3d3;
}
#invite-create-btn-container {
  margin: 0 10%;
  display: flex;
  justify-content: right;
}
.standard-dialog {
  margin: auto;
  background: linear-gradient(250deg, rgb(32, 35, 33), rgb(2, 2, 2) 100%), url(./noise.svg);
  border: none;
  border-radius: 20px;
  color: #ededed;
}
.standard-dialog::backdrop {
  backdrop-filter: blur(5px) brightness(30%);
  -webkit-backdrop-filter: blur(5px) brightness(30%);
}
.standard-dialog .x-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 1px 0 0 1px;
  font-size: 16px;
  color: #56ca44;
  background-color: transparent;
  border: solid 1px #56ca44;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.standard-dialog .x-btn:hover, .standard-dialog .x-btn:focus {
  color: black;
  background-color: #56ca44;
}
#eval-update-dialog {
  width: 400px;
  padding: 30px 50px;
}
#eval-update-dialog h2 {
  font-size: 2.3rem;
}
#clearExpDate {
  width: 80px;
  margin-top: 10px;
}
.btn-smol {
  display: inline-block;
  padding: 4px 6px;
  font-size: 0.7em;
  text-decoration: none;
  border-width: 1px !important;
  border-radius: 8px;
}
.btn-big {
  padding: 15px 20px;
  font-size: 24px;
  border-radius: 10px;
}
.btn-green.invite-code-btn {
  padding: 6px 7px 6px 10px;
  border-width: 1px;
  letter-spacing: 3px;
  position: relative;
  top: -3px;
}
#eval-invite-dialog {
  width: 400px;
  padding: 30px 50px;
}
#invitee {
  margin: 0 0 0 40px;
}
#invitee-email {
  font-size: 1.2em !important;
}
#eval-invite-dialog dl {
  margin: 50px 0 20px 0;
}
#eval-invite-dialog dt {
  font-size: 2em;
}
#invitee-data dt {
  font-size: 2.3em;
}
#invitee-data dd {
  font-size: 1.8em;
}
#copy-invite-code-btn {
  font-size: 18px;
  height: 40px;
  width: 80px;
  position: relative;
  top: -10px;
  padding-bottom: 2px;
  left: 90px;
}
#invite-code-display {
  font-size: 3em;
  letter-spacing: 4px;
  font-stretch: 102%;
}
.inviz {
  visibility: hidden;
}
#eval-update-dialog label {
  font-size: 1.3em;
}
#id_attempt_limit {
  width: 60px;
  font-size: 1.5em;
  text-align: center;
}
#eval-info-article {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 100px;
}
#eval-info-article h3 {
  font-size: 36px;
  font-weight: 300;
  margin: 1.2em 0 0.7em 0;
  text-decoration: none;
}
.eval-info-area * {
  display: inline;
}
.eval-info-area dd {
  font-size: 48px;
  letter-spacing: .3rem;
}
.lesser-before-table-heading {
  margin: 60px 0 0 10%;
  text-decoration: underline;
}
article.scenario-table-container {
  margin: 15px 5% 0 5%;
  padding: 25px 20px;
  background: linear-gradient(0deg, rgb(9, 9, 9), rgb(32, 35, 33)), url(./noise.svg);
  border-radius: 15px;
  overflow: auto;
}
table.scenario-table {
  width: 100%;
}
table.scenario-table thead {
  font-size: 1.6em;
}
table.scenario-table tr:hover, table.scenario-table tr:focus {
  filter: brightness(110%);
  box-shadow: 0 0 2px 1px rgba(190, 190, 190, 0.634);;
}
/* to make tables rows rounded, thanks stack exchange */
table.scenario-table td:first-child { border-top-left-radius: 8px; }
table.scenario-table td:last-child { border-top-right-radius: 8px; }
table.scenario-table td:first-child { border-bottom-left-radius: 8px; }
table.scenario-table td:last-child { border-bottom-right-radius: 8px; }
table.scenario-table .long {
  text-align: right;
}
table.scenario-table .short {
  text-align: center;
}
table.scenario-table .odd {
  background-color: #202020;
}
table.scenario-table td {
  padding: 7px 10px 3px 10px;
}
#stopRecordBtn, #doneBtn {
  color: #fd2b40;
  padding:6px 8px;
  background: transparent;
  border: solid 1px #fd2b40;
  border-radius: 5px;
  text-decoration: none;
}
#stopRecordBtn:hover, #stopRecordBtn:focus, #stopRecordBtn:active, #doneBtn:hover, #doneBtn:focus, #doneBtn:active {
  color: black;
  background-color: #fd2b40;
}
.full-page-dialog {
  margin: 5% auto;
  width: 75%;
  background-color: black;
  border: none;
  border-radius: 10px;
  color: #ededed;
  font-size: 1.8em;
}
.full-page-dialog::backdrop {
  backdrop-filter: blur(10px) brightness(30%);
  -webkit-backdrop-filter: blur(10px) brightness(30%);
}
#instructions {
  padding: 50px 90px 80px 90px;
}
#instructions h4 {
  font-size: 1.9em;
  margin: 0.5em 0 1em 0;
}
#instructions ol {
  font-family: monospace;
}
#evalAttemptHeading {
  margin-bottom: 0;
}
#triggerDialogBtn {
  padding: 7px 10px;
  font-size: 18px;
}
#instructionsForm button {
  border-radius: 10px;
  margin: 25px 0 0 40px;
  padding: 10px 14px;
  font-size: 24px;
}
#vidContainer {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 5;
}
#countdown-wrapper {
  display: flex;
  justify-content: start;
  margin: 0 0 10px 0;
}
#countdown-wrapper p {
  margin: 0;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
.countdownLow {
  color: #db562a !important;
}
#vidDisplay {
  height: 162px;
  width: 288px;
  border-radius: 20px;
}
#doneRecordingForm {
  text-align: right;
  padding: 0 15px 10px 0;
}
#doneRecordingForm button {
  font-size: 1.3em;
  padding: 8px 10px;
}
#stopRecordBtn, #doneBtn {
  margin-left: 5px;
}
#sendVidDialog h4 {
  font-size: 1.9em;
  margin: 0.3em 0 1em 0;
}
#sendVidDialog textarea {
  font-size: 0.8em;
}
#sendBtn, #finishBtn {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 24px;
}
#end-eval-art {
  margin: 80px 0 20px 0;
  display: flex;
  justify-content: center;
}
/* MIXED-EVAL STUFF */
#mixed-eval {
  background: rgb(9, 9, 9);
  margin: 0;
  padding: 100px 0 50px 0;
}
#mixed-eval h1 {
  text-align: center;
  font-size: 4em;
}
#mixed-eval-container {
  height: 570px;
  width: 100%;
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-rows: 1fr;
}
#btnWrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-rows: 1fr;
}
#mixed-eval-container nav {
  padding: 40px 0 0 30px;
  text-align: right;
}
#mixed-eval-container nav h2 {
  margin: 0;
}
#mixed-eval-sections-indicator {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
#mixed-eval-sections-indicator li {
  margin: 25px 0 0 0;
}
.indicatedAsActive {
  text-decoration: underline;
  text-decoration-color: #56ca44;
  text-decoration-style: double;
  transition: text-decoration 0.5s ease-in-out;
}
.transparent{
  opacity: 0;
}
.mixed-eval-cards-wrapper {
  list-style-type: none;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 30px 0 20px;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out;
}
#prevChunkBtn {
  height: 50px;
  width: 70px;
  margin: auto 0;
}
#nextChunkBtn {
  height: 60px;
  width: 90px;
}
#prevChunkBtn, #nextChunkBtn {
  transition: filter 0.3s ease-in-out;
  font-weight: bolder;
}
#prevChunkBtn svg {
  height: 30px;
  width: 30px;
  position: relative;
  top: 2px;
  left: 1px;
}
#nextChunkBtn svg {
  height: 50px;
  width: 50px;
  position: relative;
  top: 2px;
  left: -2px;
  transform: rotateY(180deg);
}
#btnContainer {
  padding: 20px 30px 0 20px;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 1fr 2fr;
  justify-content: space-between;
}
#progBarOuter {
  display: grid;
  margin: 10px auto 0 auto;
  height: 10px;
  max-width: 860px;
  min-width: 700px;
  border: 1px solid #56ca44;
  border-radius: 5px;
}
#progBarInner {
  background-color: #56ca44;
  transition: width 0.7s ease-in-out;
}
.mixed-eval-cards-wrapper > li {
  border-radius: 30px;
  box-sizing: border-box;
  margin: 10px 0;
  padding: 40px 70px;
  width: 100%;
  height: 550px;
  color: rgb(2, 2, 2);
  transition: transform 0.7s ease;
}
.mixed-eval-cards-wrapper > li > div > h3 {
  font-size: 2.5em;
}
.mixed-eval-cards-wrapper > li > div > h4 {
  font-size: 2em;
  margin: 1.5em 0 0.3em 0;
}
.mixed-eval-cards-wrapper > li > div > p {
  font-size: 2em;
  margin: 0.3em 0 1em 0;
}
.chunk-section-heading {
  display: flex;
}
.chunk-section-title {
  margin-left: 10px;
}
table.mixed-eval-dialogue-participants-table {
  margin: 0 auto;
  border-radius: 8px;
  background: linear-gradient(70deg, rgb(9, 9, 9), rgb(32, 35, 33));
  border-spacing: 10px;
}
table.mixed-eval-dialogue-participants-table th {
  text-align: center;
  color: #ededed;
}
table.mixed-eval-dialogue-participants-table tbody {
  height: 35px;
  overflow: scroll;
}
table.mixed-eval-dialogue-participants-table td {
  color: black;
  border-radius: 5px;
}
table.mixed-eval-dialogue-participants-table .power-participants {
  background-color: #fcede1;
}
table.mixed-eval-dialogue-participants-table .nonpower-participants {
  background-color: #d9eed8;
}
.limit-width {
  display: inline-block;
  margin: 0 auto;
  max-width: 660px;
}
li.instructions {
  background: linear-gradient(250deg, rgb(206, 226, 245), rgb(58, 158, 251));
}
li.instructions > div > p {
  font-size: 1.8em;
}
li.term-quiz-chunk {
  background: linear-gradient(250deg, rgb(241, 208, 245), rgb(234, 131, 244));
}
.mixed-eval-cards-wrapper > li > div > p.termquiz-instructions {
  font-size: 1.8em;
  font-style: italic;
  font-weight: lighter;
  color: rgb(40, 40, 40);
}
.mixed-eval-cards-wrapper > li > div > p.termquiz-terms {
  font-size: 3em;
  margin-left: 30px;
}
span.pos {
  font-size: 0.6em;
  font-style: italic;
}
.mixed-eval-cards-wrapper > li > div > dl {
  margin-left: 30px;
  font-size: 1.8em;
  font-style: italic;
  color: rgb(30, 30, 30);
}
li.dialogue-chunk {
  background: linear-gradient(70deg, rgb(9, 9, 9), rgb(32, 35, 33));
  color: #ededed;
}
li.dialogue-chunk ol.dialogue {
  background: none;
  padding: 0;
  color: black;
  list-style: none;
}
li.dialogue-chunk ol.dialogue > li {
  margin: 0;
}
.mixed-eval-cards-wrapper > li.dialogue-chunk > p.dialogue-pre-instructions {
  margin: 0 0 36px 24px;
  font-size: 1.8em;
  font-style: italic;
  font-weight: lighter;
  color: rgb(200, 200, 200);
}
p.bit-dialogue-instructions {
  margin-left: 50px;
  font-size: 1.5em;
  font-style: italic;
}
li.simul-chunk {
  background: linear-gradient(250deg, rgb(217, 238, 216), rgb(143, 244, 138));
}
li.translation-chunk {
  background: linear-gradient(250deg, rgb(226, 235, 244), rgb(88, 164, 245));
}
li.prompt-chunk {
  background: linear-gradient(250deg, rgb(252, 237, 225), rgb(250, 164, 94));
}
.mixed-eval-cards-wrapper > li > div > p.prompt-instructions {
  margin: 0 0 36px 24px;
  font-size: 1.8em;
  font-style: italic;
  font-weight: lighter;
  color: rgb(40, 40, 40);
}
.bit-speak-icon {
  position: relative;
  top: 10px;
}
.bit-countdown {
  position: relative;
  top: -20px;
  right: -20px;
  margin: 24px 0 0 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 32px;
  color: rgba(40, 40, 40, 70%);
  text-align: right;
}
li.end-chunk {
  background: linear-gradient(250deg, rgb(217, 238, 216), rgb(143, 244, 138));
}
li.end-chunk h3 {
  margin-bottom: 0.5em;
}
#endCardBtn {
  margin: 50px 0 0 0;
}
/* On screens that are 1060px or less... */
@media screen and (max-width: 1060px) {
  dialog.smol-dialog {
    margin: auto 20%;
  }
  #contributorsContainer {
    padding: 0;
  }
  #actorsDiv {
    margin-left: 0;
  }
  .actors {
    margin-right: 0;
  }
  #legend-container {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "power nonpower"
  "int int"
  "stage decision"
  "simul simul";
  gap: 35px 60px;
}
  .footnote-inLine {
    left: 78%;
  }
  .footnote-inOption {
    margin: 0 0 14px 5px;
  }
  dialog.footnote-dialog {
    margin: auto 10% !important;
  }
}
/* On screens that are 992px or less... */
@media screen and (max-width: 992px) {
  .edit-or-create-btn {
    margin: 10px;
    font-size: 14px;
    padding: 6px 8px;
  }
  /* INTRO SECTION ---------------------------------------*/
  .intro {
    font-size: 28px;
  }
  dialog {
    margin: auto 15%;
  }
  #in-body-nav {
    display: block;
  }
  #context {
    padding: 2% 50px 10% 50px;
  }
  #info-dom {
    justify-self: right;
    margin: 0 0 0 auto;
  }
  #info-subdom {
    justify-self: left;
    margin: 0 auto 0 0;
  }
  .card {
    margin: 0 -20px;
    padding: 20px 50px 40px 50px;
  }
  .terpInfo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px 120px;
    grid-template-areas:
    "diff diff"
    "dom subdom"
    "env env";
    justify-content: space-around;
  }
  .terpInfo div {
    margin: 0 auto;
  }
  .interlocutors dt {
    text-align: center;
  }
  dd#participantsContainer {
    overflow: auto;
  }
  table.participants {
    width: 100%;
  }
  #Extra-Context-Poof {
    font-size: 0.9em;
    width: 300px;
    height: 60px;
  }
  dd.supp {
    font-size: 0.6em;
    margin: 12px 0 0 30px;
  }
  .dialogue {
    padding: 0 5% 5% 5%;
  }
  .dialogue * {
    font-size: 1.5rem;
  }
  .controls h2 {
    font-size: 4em;
  }
  #start-sesh-msg {
    padding: 12px 0 12px 16%;
  }
  #start-sesh-msg.error {
    padding: 12px 15px;
    font-size: 16px;
  }
  #Play-Next {
    margin: 0 auto 2px auto;
  }
  #Play-Next-Icon {
    width: 50px;
    aspect-ratio: 1 / 1;
  }
  .smolToggle {
    width: 90px;
    height: 30px;
  }
  #Text-Poof {
    font-size: 0.7em;
  }
  .controlsContainer .toggle {
    font-size: 1.3em;
  }
  .dialogue li {
    padding: 15px;
    border-radius: 30px;
  }
  .int {
    margin: 10px 17% 0 17%;
  }
  .int-norm {
    margin-top: 5px;
    margin-bottom: 20px;
  }
  .power {
    margin: 10px 36% 0 0;
  }
  .nonPower {
    margin: 10px 0 0 36%;
  }
  .directionsIcon {
    top: 27px;
    left: -38px;
  }
  li.decision {
    padding: 15px 15px 30px 15px;
  }
  img.playIcon {
    height: 20px;
    aspect-ratio: 1 / 1;
  }
  img.replayIcon {
    height: 20px;
    aspect-ratio: 1 / 1;
  }
  .playing {
    height: 20px;
    text-align: center;
    font-size: 0.4em;
  }
  button.stopRecordBtn {
    padding: 4px 5px 1px 5px;
  }
  img.simpleCheckIcon {
    height: 28px;
    aspect-ratio: 1 / 1;
    margin-bottom: -1px;
  }
  img.difficultIcon {
    height: 20px;
    aspect-ratio: 1 / 1;
  }
  .difficultTooltip {
    font-size: 12px;
    width: 80px;
    margin-left: -40px;
  }
  .footnote-inOption {
    margin: 0 0 20px 5px;
  }
  #footnote-para1 {
    margin-top: 40px;
  }
  /* ------------------ EVALUATIONS STUFF ------------------*/
  #eval-info-article {
    margin: 0 20px;
    padding: 20px 100px;
  }
  #eval-update-btn-container {
    margin: 0 20px;
  }
  #invite-create-btn-container {
    margin: 0 5%;
  }
  #mixed-eval {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  #mixed-eval-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  #mixed-eval-container nav {
    padding: 20px;
    text-align: left;
  }
  #mixed-eval-container nav > h2 {
    font-size: 48px;
    margin: 0 0 18px 0;
  }
  #mixed-eval-sections-indicator {
    display: flex;
    flex-direction: row;
  }
  #mixed-eval-sections-indicator > li {
    margin: 0 15px;
    width: 120px;
  }
  .mixed-eval-cards-wrapper {
    height: 570px;
    padding: 0 30px;
  }
  li.instructions > div > p {
    font-size: 1.7em;
  }
  #btnWrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "progBarOuter"
    "btnContainer";
  }
  #progBarOuter {
    max-width: 860px;
    min-width: 500px;
  }
}
/* On screens that are 700px or less... */
@media screen and (max-width: 700px) {
  dialog.smol-dialog {
    margin: auto 5%;
  }
  dialog.footnote-dialog {
    margin: auto 5% !important;
  }
  #footnote-para1 {
    margin-top: 30px;
  }
  /* CONTEXT SECTION ---------------------------------------- */
  .interlocutors dd {
    margin: 7% 0 5% 5%;
  }
  td.roleAbbrev {
    padding: 8px 15px;
  }
  #contributorsContainer {
    padding: 0 0 0 2%;
  }
  .actors dd {
    margin: 0 0 0 15px;
  }
  /* DIALOGUE SECTION ------------------------------------ */
  .footnote-inLine {
    left: 75%;
  }
}
/* On screens that are 600px or less... */
@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
  .med-big-btn {
    font-size: 24px !important;
    margin: 0 auto 10px auto;
    padding: 5px 12px;
    text-align: left;
  }
  .expanderButton {
    padding: 0 0 0 5px;
  }
  /* forms stuff */
  .row-input-wrapper label, .row-input-wrapper span {
    font-size: 14px;
  }
  .input-wrapper select {
    font-size: 0.9em;
  }
  input[type=radio] {
    height: 14px;
    width: 14px;
  }
  .radio-input-wrapper label {
    font-size: 14px;
  }
  /* REST OF STUFF ------------------------- */
  dialog h4 {
    margin: 10px 25px 15px 25px;
    font-size: 1.5rem;
  }
  dialog h5 {
    margin: 10px 25px 0 25px;
    font-size: 1.4rem;
  }
  dialog h6 {
    margin: 0 25px 15px 25px;
    font-size: 1.4rem;
  }
  dialog.base-dialog {
    padding: 40px;
  }
  dialog.base-dialog .x-btn {
    font-size: 14px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    padding: 1px 0 0 1px;
    top: 17px;
    right: 17px;
  }
  dialog.smol-dialog .x-btn {
    top: 10px;
    right: 10px;
    padding: 1px 0 0 0;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }
  .intro {
    font-size: 24px;
  }
  #in-body-nav ul {
    margin: 0 0 24px 0;
  }
  #in-body-nav a {
    padding: 8px;
    font-size: 0.7em;
    border-radius: 8px;
  }
  #in-body-back-arrow {
    height: 26px;
    width: 26px;
    top: 8px;
    margin: 0 2px 0 0;
  }
  #tutorialVidContainer {
    margin: 12px auto 60px auto;
  }
  #context {
    padding: 10% 20px 25% 20px;
  }
  .intro h1 {
    font-size: 2em;
    margin: 1em 0 1.25em 0;
  }
  .intro h1.practiceSeshTag::after {
    font-size: 18px;
    top: -20px;
    right: 5%;
  }
  .card {
    padding: 30px 20px;
  }
  .terpInfo {
    grid-template-columns: 1fr;
    gap: 20px 0;
    grid-template-areas:
    "diff"
    "dom"
    "subdom"
    "env";
    justify-content: center;
  }
  #info-diff {
    margin: 0 auto;
  }
  #info-dom {
    margin: 0 auto;
  }
  #info-subdom {
    margin: 0 auto;
  }
  #info-env {
    margin: 0 auto;
  }
  .spaceBelow {
    margin: 0 0 10px 0;
  }
  .stats {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 15px;
    margin-bottom: 50px;
    padding: 15px 0;
  }
  .stats div:nth-child(1) {
    justify-self: center;
  }
  .stats div:nth-child(2) {
    justify-self: center;
  }
  #contrHeader {
    margin: 50px 0 0 0;
  }
  .contributors {
    flex-direction: column;
  }
  .contrFlex {
    margin: 15px 0 0 5%;
  }
  #Extra-Context-Poof {
    width: 260px;
    height: 52px;
    border-width: 2px;
  }
  .contextControlsContainer {
    justify-content: center;
  }
  .terms {
    margin-left: 0.5em;
  }
  .suppHeader {
    margin: 50px 0 15px 0 !important
  }
  .supp {
    list-style-type: disc;
  }
  dd.supp {
    font-size: 0.5em;
    margin: 8px 0 0 10px;
  }
  #sign-up-to-see {
    padding: 0;
  }
  #sign-up-to-see h2 {
    font-size: 6em;
  }
  #free-trial-wrapper {
    padding: 0 0 50px 0;
  }
  #trial-info {
    padding-bottom: 70px;
  }
  #trial-info h3 {
    margin-top: 0;
    margin-bottom: 5px;
  }
  #trial-info h4 {
    margin-top: 5px;
  }
  .controls {
    padding: 5% 0 20% 0;
  }
  .controlsContainer .toggle {
    font-size: 1.5em;
  }
  .smolLeftBigRight {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 20px;
  }
  .smolLeftBigRight.disappearingFirstDiv {
    grid-template-rows: auto;
  }
  .smolLeftBigRight.disappearingFirstDiv > :nth-child(1) {
    display: none;
  }
  #start-sesh h3 {
    margin: 0;
    font-size: 36px;
    text-align: left;
  }
  .smolLeftBigRight > :nth-child(2) {
    justify-self: start;
    align-self: start;
  }
  .smolLeftBigRight > :nth-child(2) p {
    margin-bottom: 20px;
    text-align: left;
  }
  #sesh-details-container h4 {
    font-size: 2rem;
  }
  #sesh-details-container dl .defListRow {
    margin: 0 0 20px 0;
  }
  #sesh-details-container dt {
    font-size: 14px;
  }
  #sesh-details-container dd {
    font-size: 12px;
  }
  #micDialog h4 {
    font-size: 24px;
  }
  #micDialog label {
    font-size: 22px;
  }
  #micDialog select {
    font-size: 18px;
  }
  input.minutesInput {
    width: 30px;
  }
  #practice-sesh-dialog h4 {
    margin: 0.6em 0 1.4em 0;
  }
  #beforeReviewDialog h4 {
    margin: 1em 0 0.4em 0;
    font-size: 24px;
  }
  #btnEditSeshDetailsContainer {
    position: unset;
    width: unset;
    height: unset;
  }
  #btnEditSeshDetails {
    position: unset;
  }
  #cornerCtrlz {
    bottom: 2%;
  }
  #Play-Next {
    margin: 0 auto;
  }
  #Play-Next-Icon {
    width: 45px;
    aspect-ratio: 1 / 1;
  }
  #Text-Poof {
    width: auto;
    height: 25px;
  }
  #practiceMode {
    width: 250px;
    height: 50px;
  }
  #rolePlayMode {
    width: 250px;
    height: 50px;
    margin: 10px 0 0 0;
  }
  #reviewMode {
    width: 250px;
    height: 50px;
    margin: 10px 0 0 0;
  }
  .dialogue li {
    padding: 12px;
    border-radius: 25px;
    position: relative;
  }
  form.difficultLineForm {
    padding: 0 0 0 6px;
  }
  .recordingPlayback.audioContainer {
    margin-top: 10px;
  }
  li.decision {
    padding: 12px 12px 25px 12px;
  }
  .decisionList {
    grid-template-columns: repeat(auto-fit, minmax(min(100%/1, max(80px, 100%/2)), 1fr));
    gap: 20px 0;
  }
  .decisionBtn {
    margin: 5px 0 10px 0;
  }
  .footnote-inOption {
    margin: 0 0 0 5px;
  }
  .stageDirections {
    margin: 10px 5% 0 5%;
  }
  .directionsIcon {
    height: 26px;
    width: 26px;
    top: 22px;
    left: -28px;
  }
  .int {
    margin: 10px 10% 0 10%;
  }
  .int-norm {
    margin-top: 5px;
    margin-bottom: 20px;
  }
  .power {
    margin: 10px 20% 0 0;
  }
  .nonPower {
    margin: 10px 0% 0 20%;
  }
  .playing > div {
    width: 3px;
  }
  img.playIcon {
    height: 19px;
  }
  img.replayIcon {
    height: 19px;
  }
  .playing {
    height: 16px;
  }
  button.recordBtn > img.recordIcon {
    height: 23px;
    aspect-ratio: 1 / 1;
  }
  img.stopIcon {
    height: 16px;
    aspect-ratio: 1 / 1;
  }
  img.simpleCheckIcon {
    height: 22px;
  }
  img.difficultIcon {
    height: 18px;
  }
  form.difficultLineForm input[type=checkbox] {
    height: 18px;
    width: 18px;
    margin: 0;
  }
  .input-wrapper select option {
    font-size: 12px !important;
  }
  #id_vid_link {
  font-size: 12px;
  }
  .help-text {
    font-size: 10px;
  }
  .dialogueText {
    padding: 12px 2px 2px 15px;
  }
  #practice-sesh-dialog .help-text {
    font-size: 12px;
  }
  footer {
    padding: 10% 0 3% 0;
    font-size: 1.3rem;
  }
  /* ------------- EVALUATIONS STUFF ---------------- */
  #instructions {
    padding: 20px 30px 60px 30px;
  }
  #instructions ol {
    font-size: 0.9em;
  }
  #eval-info-article {
    margin: 0;
    padding: 20px;
  }
  #eval-messages {
    max-width: 260px;
    padding: 5px 25px;
  }
  #evalData-wrapper {
    flex-direction: column;
  }
  .evalData-container {
    margin: 20px 0;
  }
  .eval-info-area dd {
    font-size: 36px;
  }
  #eval-update-dialog {
    width: 100%;
    margin: auto 0;
    padding: 30px 10px 30px 17px;
    border-radius: 0;
  }
  #eval-update-dialog h2 {
    font-size: 2.8rem;
  }
  #eval-update-dialog h3 {
    font-size: 2em;
  }
  #eval-invite-dialog {
    width: 300px;
    padding: 30px;
  }
  .standard-dialog .x-btn {
    font-size: 1em;
  }
  #invitee-data dd {
    margin-left: 10px;
  }
  #copy-invite-code-btn {
    left: 30px;
  }
  #mixed-eval-container nav > h2 {
    font-size: 28px;
    margin: 0 0 6px 0;
  }
  #mixed-eval-sections-indicator {
    flex-wrap: wrap;
    margin: 0 0 12px 0;
  }
  #mixed-eval-sections-indicator > li {
    margin: 0 10px;
  }
  .mixed-eval-cards-wrapper {
    padding: 0 20px;
  }
  .mixed-eval-cards-wrapper > li {
    padding: 20px;
  }
  .chunk-section-heading {
    flex-direction: column;
  }
  .bit-countdown {
    right: 4px;
    font-size: 24px;
  }
  .bit-speak-icon {
    height: 32px;
    width: 32px;
  }
  #progBarOuter {
    max-width: 560px;
    min-width: 300px;
  }
}
/* On screens that are 500px or less... */
@media screen and (max-width: 500px) {
  .lineLabelCtrlzWrapper {
    flex-direction: column;
    align-items: start;
  }
}
/* On screens that are 450px or less... */
@media screen and (max-width: 450px) {
  html {
    font-size: 11px;
  }
  li.decision {
    padding: 12px 12px 35px 12px;
  }
  .decisionList {
    gap: 15px 15px;
  }
  #id_rating, #id_perceived_performance {
    width: 230px;
  }
}
/* On screens that are 350px or less... */
@media screen and (max-width: 350px) {
  html {
    font-size: 10px;
  }
  #header-logo {
    height: 60px;
    width: 60px;
  }
  #header-logo-container h1 {
    font-size: 54px;
  }
  #hamburger-checkbox {
    height: 70px;
    width: 70px;
  }
  header .hamburger-lines {
    height: 35px;
    width: 44px;
  }
  dialog.base-dialog {
    padding: 30px;
  }
  .intro h1 {
    font-size: 1.7em;
  }
  .sesh-block {
    width: unset;
    margin: 40px 10px 0 10px;
    padding: 30px;
  }
  #start-sesh-msg {
    padding: 12px 0 12px 10%;
  }
  #start-sesh-msg.error {
    padding: 12px 8px;
  }
  .playAudioCtrlzContainer.audioContainer {
    column-gap: 4px;
  }
  img.playIcon {
    height: 16px;
  }
  img.replayIcon {
    height: 16px;
  }
  .playing {
    height: 14px;
  }
  .recordAudioCtrlzContainer {
    margin: 0 0 0 15px;
  }
  button.recordBtn > img.recordIcon {
    height: 20px;
  }
  button.stopRecordBtn {
    padding: 3px 5px 1px 5px;
  }
  img.stopIcon {
    height: 13px;
  }
  img.simpleCheckIcon {
    height: 20px;
    margin-bottom: -2px;
  }
  img.difficultIcon {
    height: 17px;
    margin-bottom: -2px;
  }
  form.difficultLineForm input[type=checkbox] {
    height: 17px;
    width: 17px;
  }
  .recordingPlayback.audioContainer {
    width: 180px;
  }
  img.recordingIcon {
    height: 24px;
    aspect-ratio: 1 / 1;
    margin-right: 14px;
  }
}