@import url("https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css");
@import "conjuguemos-icon-font.css";
/* --- Every page must have this CSS on first place --- */
:root {
  /* Naming must be ABSTRACT !!! */
  /* Base */
  --color__b1: #23375D;
  --color__b2: #125690;
  --color__b3: #0F9CF1;
  --color__b4: #0E5991;
  --color__b5: #334D6E;
  /* Highlights */
  --color__h1:  #524DFF;
  --color__h2:  #EA4892;
  --color__h3:  #FFBF03;
  --color__h3d: #FF961A;
  --color__h4:  #48CFC3;
  --color__h5:  #DBD9FF;
  --color__h6:  #FFCCD7;
  --color__h7:  #FFEBB3;
  --color__h8:  #B3FFF9;
  --color__h9l: #1DD3BD;
  --color__h9:  #1CB0A4;
  --color__h10: #15847B;
  --color__h11: #F7685B;
  --color__h12: #05BD65;
  --color__h13: #774FDA;
 /* Monochrome */
  --color__w:  #FFFFFF;
  --color__b:  #000000;
  --color__m1: #7A8599;
  --color__m2: #EDF1F7;
  --color__m3: #FCFCFD;
  --color__m4: #C2CFE0;
  --color__m5: #D5E6F2;
  --color__m6: #DFE3EB;
  --color__m7: #E4EAF4;
  --color__m8: #FAFAFA;
}

[data-theme="theme-2"] {
  --color__b1: #A30707;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  outline: none;
  vertical-align: baseline;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.display-title:after {
  content: attr(title);
}

.login-iframe {
  width: 100%;
  height: 350px;
}

.login-iframe--error {
  height: 420px;
}

button,
input[type="button"],
input[type="reset"],
input[type="text"],
input[type="search"],
input[type="submit"] {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}

button::-moz-focus-inner {
  border: 0;
}

html {
  width: 100%;
  height: auto;
  min-height: 100%;
}

body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Rubik', sans-serif;
  color: var(--color__b5);
  background: var(--color__w);
  padding: 0;
  margin: 0;
  position: relative; /* for footer */
}

h1, h2, h3, h4 {
  font-size: 44px;
  line-height: 48px;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

.h2,
h2 {
  font-size: 35px;
  line-height: 44px;
}

.font-30 {
  font-size: 30px;
}

.font-26 {
  font-size: 26px;
}

.font-24 {
  font-size: 24px;
}

.font-21 {
  font-size: 21px;
}

.h3,
h3 {
  font-size: 22px;
  line-height: 28px;
  /* font-size: 32px;
  line-height: 35px; */
  letter-spacing: -0.03em;
}

h4 {
  font-size: 18px;
  line-height: 22px;
}

.h--underline {
  padding: 0 0 12px;
  margin: 0 0 40px;
  border-bottom: 1px solid var(--color__m6);
}

.h--table-title {
  line-height: 38px;
  color: var(--color__m1);
  font-weight: 600;
}

.h--optional {
  position: relative;
}

.h--optional::after {
  content: 'Optional';
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: var(--color__m1);
  position: absolute;
  left: 0;
  top: -22px;
}

p {
 font-size: 16px;
 line-height: 24px;
 font-weight: normal;
 color: var(--color__b5);
}

strong {
  font-weight: 600;
}

a {
  vertical-align: baseline;
  text-decoration: none;
  color: var(--color__h1);
}

.cookie-confirm {
  width: 100%;
  padding: 23px;
  background: var(--color__b1);
  position: fixed;
  bottom: 0;
  z-index: 10000;
}

.cookie-confirm-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cookie-confirm h3 {
  align-self: flex-start;
  white-space: pre;
}

.cookie-confirm p {
  padding: 0 50px;
}

.hide-on-splash,
.hide,
.hidden,
.display-none {
  display: none !important;
}

/* for NON important */
.x-hide {
  display: none;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

.clear-both {
  clear: both;
}

.h--up {
  position: relative;
}

.h--up span {
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
  color: var(--color__h3);
  position: absolute;
  top: -14px;
}

.fsty--italic {
  font-style: italic;
}

.txtd--underline {
  text-decoration: underline;
}

.cursor-pointer {
  cursor: pointer;
}

.disabled,
[disabled],
.btn[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  /* background-color: transparent; */
  box-shadow: none;
  opacity: .65;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.just-label,
.form-label {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color__b5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.form-label {
  padding: 0 0 4px;
}

.label--pink {
  color: var(--color__h2);
}

.label--yellow {
  line-height: 100%;
  padding: 0;
  color: var(--color__h3);
  text-transform: initial;
  letter-spacing: initial;
}

.label--quiz {
  color: var(--color__m1);
  padding: 0;
}

.label--optional::after {
  content: 'OPTIONAL';
  color: var(--color__h1);
  font-size: 12px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  float: right;
}

ul {
  list-style-type: none;
  margin: 0;
}

ul, ol {
  padding: 0px;
  color: var(--color__m1);
}

.classic {
  padding: 0 0 0 20px;
}

.list-disc {
  padding: 0 0 0 30px;
  list-style-type: disc;
}

.list-disc li {
  padding: 0 0 10px;
}

.container {
  width: 100%;
  max-width: 1200px;
  /* padding: 0 15px; */
  padding-left: 15px;
  padding-right: 15px;
  /* margin: 0 auto; */
  margin-left: auto;
  margin-right: auto;
  position: relative;
  /* overflow: hidden; */ /* this can never be */
}

/* --- Basic 12 Col Grid --- */
.row {
  margin-left: -15px;
  margin-right: -15px;
}

.row-w {
  width: 100%;
}

.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

[class*='col-']::after {
  clear: both;
  content: "";
  display: table;
}

/* cannot be named col- */
.column--np {
  padding: 0;
}

.col-1 {
  width: calc(8.3333333333 * 1%);
}

.col-1\.5 {
  width: calc(8.3333333333 * 1.5%);
}

.col-2 {
  width: calc(8.3333333333 * 2%);
}

.col-2\.5 {
  width: calc(8.3333333333 * 2.5%);
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: calc(8.3333333333 * 4%);
}

.col-5 {
  width: calc(8.3333333333 * 5%);
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: calc(8.3333333333 * 7%);
}

.col-8 {
  width: calc(8.3333333333 * 8%);
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: calc(8.3333333333 * 10%);
}

.col-11 {
  width: calc(8.3333333333 * 11%);
}

.col-12 {
  width: 100%;
}

.d-flex,
.flex-grid {
  display: flex;
}

.flex-1-1-0 {
  flex: 1 1 0;
}

.col {
  flex: 1;
}

/* --- Basic 12 Col Grid - END --- */

.txt-trim {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.br__3 {
  border-radius: 3px;
}

.br__16 {
  border-radius: 16px;
}

.br__100 {
  border-radius: 100px;
}

hr {
  width: 100%;
  height: 1px;
  background-color: var(--color__m6);
  display: block;
  margin: 20px 0;
}

hr.dark {
  background-color: var(--color__b1);
}

hr.dashed {
  background-color: transparent;
  border: 1px dashed var(--color__m1);
}

/* --- BUTONS --- */
.btn {
  height: 64px;
  padding: 0 32px;
  color: var(--color__m8);
  background: var(--color__b3);
  border-radius: 8px;
  font: bold 18px/20px 'Rubik', sans-serif;
  text-align: center;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
}

.btn--sq,
.btn--cir,
.nbtn--slim,
.nbtn--outline,
.nbtn--flat,
.nbtn {
  height: 53px;
  padding: 0 18px;
  color: var(--color__m8);
  background: var(--color__b4);
  box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.12);
  border-radius: 11px;
  text-transform: uppercase;
  font: bold 16px/18px 'Rubik', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
}

.btn--sq,
.btn--cir,
.nbtn--slim,
.nbtn--flat {
  box-shadow: none;
  text-transform: none;
}

.nbtn--slim {
  height: initial!important;
  padding: 0!important;
  color: inherit;
  background: transparent;
}

.nbtn--outline {
  background: transparent;
  border: 2px solid var(--color__w);
  box-shadow: none;
}

.btn--sq,
.btn--cir {
  width: 53px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--color__w);
  background: transparent;
}

.btn--sq {
  border-radius: 11px;
}

.btn--sq:after,
.btn--cir:after {
  right: -22px;
}

.nbtn-shadow {
  box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.12);
}

.btn--like-select {
  width: 100%;
  height: auto;
  padding: 15px;
  justify-content: flex-start;
  color: var(--color__b1);
  background: var(--color__w);
  border: 1px solid rgba(35,55,93,0.2);
  font-weight: normal;
}

.nbtn--like-select {
  width: 100%;
  padding: 26px 72px 0 16px;
  font-size: 18px;
  line-height: 32px;
  text-align: left;
  background: var(--color__w);
  border: 1px solid var(--color__m4);
  box-sizing: border-box;
  border-radius: 11px;
  cursor: pointer;
}

.nbtn--like-select.active {
  padding-bottom: 1px;
  color: var(--color__b3);
  border-radius: 11px 11px 0 0;
  border-bottom: none;
}

.nbtn--like-select.active.reverse {
  padding-top: 27px;
  padding-bottom: 0;
  color: var(--color__b3);
  border-radius: 0 0 11px 11px;
  border-bottom: 1px solid var(--color__m4);
  border-top: none;
}

.nbtn--like-select:after {
  width: 24px;
  height: 24px;
  line-height: 24px;
  content: "\e92f";
  font-size: 16px;
  font-family: 'coqui';
  text-align: center;
  background: rgba(15,156,241,0.1);
  border-radius: 4px;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translate(0, -50%);
}

.nbtn--like-select.active:after {
  transform: translate(0, -50%) rotate(180deg);
}

.nbtn--like-select__tag {
  font-size: 12px;
  line-height: 13px;
  text-transform: uppercase;
  position: absolute;
  top: 8px;
  left: 16px;
  pointer-events: none;
}

.gp-custom-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.gp-disabled-settings {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.gp-disabled-msg {
  background: var(--color__w);
  border-radius: 15px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12);
}

.gp-disabled-msg p {
  padding: 36px 32px;
  background: #F0F9FF;
}

.btn--small {
  height: 38px;
  padding: 0 15px;
  font: 500 16px/18px 'Rubik', sans-serif;
}

.btn--min {
  height: 38px;
  padding: 0 10px;
}

.btn--radius {
  border-radius: 100px;
}

.btn--radius-big {
  border-radius: 100px;
}

.btn--slim {
  color: var(--color__m1);
  background: transparent;
}

.btn--gray {
  color: var(--color__m1);
  background: #f6f8fb;
  border: none;
}

.btn--purple {
  color: var(--color__h1);
  background: #edebfe;
  border: none;
}

.btn--cyan {
  color: var(--color__w);
  background: var(--color__h4);
}

.btn--sky {
  color: var(--color__w);
  background-color: var(--color__b3);
}

.btn--yellow {
  color: var(--color__w);
  background: var(--color__h3);
}

.btn--yellow-invert {
  color: var(--color__h3);
  background: var(--color__w);
  border: 2px solid var(--color__h3);
}

.btn--yellow-invert:hover {
  color: var(--color__w);
  background: var(--color__h3);
}

.btn--pink {
  color: var(--color__w);
  background: var(--color__h2);
}

.btn--pink-invert {
  color: var(--color__h2);
  background: var(--color__w);
  border: 2px solid var(--color__h2);
}

.btn--pink-invert:hover {
  color: var(--color__w);
  background: var(--color__h2);
}

.btn--white {
  color: var(--color__h4);
  background: var(--color__w);
}

.btn--transparent {
  color: var(--color__b1);
  background: transparent;
}

.btn--blank {
  color: var(--color__m1);
  background: var(--color__w);
  border: 2px solid rgba(122,133,153,0.6);
}

.btn--outline-code {
  color: var(--color__b3);
  background: var(--color__w);
  border: 2px solid var(--color__b3);
}

.btn--upgrade,
.btn--downgrade {
  min-width: 138px;
  height: 38px;
  padding: 0 15px 0 40px;
  color: var(--color__w);
  background: var(--color__h3) url("../images-r/icons/u-arrow-icon.svg") center left 8px no-repeat;
}

.btn--downgrade {
  color: var(--color__m1);
  background: var(--color__w) url("../images-r/activities/downgrade-icon.svg") center left -5px no-repeat;
  border: 2px solid rgba(122,133,153,0.6);
}

.btn--navy {
  color: var(--color__w);
  background: var(--color__b2);
}

.btn--navy-invert {
  color: var(--color__b2);
  background: var(--color__w);
  border: 2px solid var(--color__b2);
}

.btn--midnightblue {
  color: var(--color__w);
  background: var(--color__b1);
}

.btn--grey {
  color: var(--color__w);
  background: var(--color__m1);
}

.btn--add-lines {
  width: 100%;
  height: 50px;
  padding: 16px 12px;
  color: var(--color__b1);
  background: rgba(246,247,249,.4);
  border: 2px solid rgba(35,55,93,0.2);
}

.btn--round {
  width: 40px;
  min-width: initial;
  height: 40px;
  line-height: 40px;
  padding: 0;
  text-align: center;
  border-radius: 50%;
  background: var(--color__w);
  cursor: pointer;
}

.btn--round img {
  display: block;
  margin: 0 auto;
}

.btn--pill {
  min-width: initial;
  height: 40px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  border: none;
  border-radius: 50px;
  color: var(--color__b2);
  background-color: var(--color__w);
  display: flex;
  align-items: center;
}

.btn--wire {
  color: var(--color__w);
  background: transparent;
  border: 1px solid var(--color__w);
}

.btn--quiz-back {
  padding: 0;
  position: absolute;
  /* left: 0px; */
  left: -60px;
  top: 14px;
}

.btn--quiz-bottom {
  padding: 0;
  position: absolute;
  right: 15px;
  bottom: 24px;
}

.btn--comprehension-quiz {
  color: var(--color__b3);
  background: var(--color__m4);
  border: 1px solid rgba(33,138,230,0.2);
}

.btn--comprehension-quiz:hover,
.btn--comprehension-quiz.current {
  color: var(--color__w);
  background-color: var(--color__b3);
  border: 1px solid rgba(33,138,230,0.2);
}

.btn.current ~ p {
  color: var(--color__b1);
  font-weight: 600;
}

.btn--listening-quiz {
  color: var(--color__h4);
  background: var(--color__m4);
  border: 1px solid rgba(24,154,143,0.2);
}

.btn--listening-quiz:hover,
.btn--listening-quiz.current {
  color: var(--color__w);
  background: var(--color__h4);
  border: 1px solid transparent;
}

.circle {
  border-radius: 50%;
}

.sq-36 {
  width: 36px;
  height: 36px;
  border-radius: 2px;
}

.c-36 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.c-53 {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.add-icon {
  position: relative;
}

.add-icon:after {
  content: '+';
  width: 12px;
  height: 12px;
  line-height: 10px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
  color: inherit;
  background: inherit;
  text-align: center;
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 10;
}

/* --- Drop Button Menu --- */
.btn--drop__wrap {
  position: relative;
  display: inline-block;
}

.btn--drop {
  margin-right: 24px;
  font-size: 16px;
  line-height: 18px;
  font-family: inherit;
  font-weight: 700;
  /* text-transform: uppercase; */
  cursor: pointer;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn--drop:after {
  width: 16px;
  height: 16px;
  line-height: 16px;
  content: "\e92f";
  font-size: 16px;
  font-family: 'coqui';
  text-align: center;
  position: absolute;
  top: calc(50% - 7px);
  right: -22px;
}

.btn--drop.btn--transparent {
  min-width: initial;
  padding: 10px 20px 10px 10px;
}

.btn--drop-nlp {
  min-width: initial;
  padding: 0 20px 0 0;
  color: var(--color__w);
  background: transparent;
}

.btn--drop-nlp:after,
.btn--drop.btn--transparent:after {
  right: 2px;
}

/* leave it like this. for now */
.btn--img,
.btn--drop-no-arrow {
  /* min-width: 20px;
  height: 40px;
  padding: 0;
  background: initial;
  cursor: pointer; */
}

.btn--img img,
.btn--drop-no-arrow img {
  display: block;
  margin: 0 auto;
}

.btn--drop-no-arrow:after {
  display: none;
}
/* - end - */

.btn--drop-pill {
  min-width: initial;
  height: 40px;
  padding: 0 30px 0 15px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  border: none;
  border-radius: 50px;
  color: var(--color__b2);
  background-color: var(--color__w);
}

.drop__content {
  /* add individual class .min-w-200 */
  min-width: 100%; /* not to be short then button */
  padding: 0px;
  background: var(--color__w);
  box-shadow: 0px 48px 64px 4px rgba(11, 79, 130, 0.33);
  white-space: nowrap;
  border-radius: 15px;
  position: absolute;
  top: calc(100% + 21px);
  left: 0px;
  display: none;
  z-index: 50;
  overflow: hidden;
}

.drop__content--left,
.drop__content--bubble-center,
.drop__content--bubble-left,
.drop__content--bubble-right {
  /* top: 50px; */
  top: calc(100% + 21px);
  left: 0;
}

.drop__content--right,
.drop__content--bubble-right {
  left: auto;
  right: 24px;
}

.ndrp__content {
  max-width: 100%;
  padding-top: 1px;
  border: 1px solid var(--color__m4);
  border-top: none;
  border-radius: 0 0 11px 11px;
  box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.12);
  top: 100%;
}

.ndrp__content.reverse {
  padding-top: 0;
  padding-bottom: 1px;
  border: 1px solid var(--color__m4);
  /* border-top: initial; */
  border-bottom: none;
  border-radius: 11px 11px 0 0;
  box-shadow: inset 0px 4px 0px rgba(0, 0, 0, 0.12);
  /* top: 100%; */
}

.brd-top {
  border-top: 1px solid var(--color__m6);
}

.brd-top-lt {
  border-top: 1px solid var(--color__m2);
}

.brd-rgt {
  border-right: 1px solid var(--color__m6);
}

.brd-btm {
  border-bottom: 1px solid var(--color__m6);
}

.brd-lft {
  border-left: 1px solid var(--color__m6);
}

.brd-x-lt {
  border-left: 1px solid var(--color__m2);
  border-right: 1px solid var(--color__m2);
}

.brd-all {
  border: 1px solid var(--color__m6);
}

.brd-radius {
  border-radius: 4px;
}

.drop__content--title {
  padding: 21px 32px;
  font-size: 20px;
  line-height: 36px;
  font-weight: bold;
  color: var(--color__b5);
  background: #F0F9FF;
}

.drop__content__menu {
  font-size: 18px;
  line-height: 32px;
  display: block;
  padding: 8px 27px 8px 32px;
  color: var(--color__b5);
  display: flex;
  align-items: center;
  overflow: hidden; /* necessary for Verb Settings modal */
}

.drop__content__menu.active,
.drop__content__menu:hover {
  background: var(--color__m2);
}

.drop__content__menu img {
  width: 20px;
  /* height: auto; */
  height: 20px;
  margin: 0 10px 0 0;
}

.drop__content__menu small {
  display: inline;
  line-height: 14px;
  color: #AAAAAA;
  margin: 4px 0 0 3px;
}

.drop__content__menu--lang {
  padding: 4px;
}

/* --- BUTONS END --- */

/* --- Coqui Static --- */
.coqui-happy:after {
  width: 100px;
  height: 100px;
  content: '';
  background: url('/images-r/coqui/coqui-happy.svg') center/100% auto no-repeat;
  position: absolute;
  left: 10px;
  top: 0px;
}

.coqui-happy-2:after {
  width: 100px;
  height: 100px;
  content: '';
  background: url('/images-r/coqui/coqui-happy-2.svg') center/100% auto no-repeat;
  position: absolute;
  left: 10px;
  top: 0px;
}

.coqui-showing:after {
  width: 100px;
  height: 100px;
  content: '';
  background: url('/images-r/coqui/coqui-showing.svg') center/100% auto no-repeat;
  position: absolute;
  left: 10px;
  top: 0px;
}

.coqui-sitting:after {
  width: 100px;
  height: 100px;
  content: '';
  background: url('/images-r/coqui/coqui-sitting.svg') center/100% auto no-repeat;
  position: absolute;
  left: 10px;
  top: 0px;
}

.coqui-waving:after,
.coqui-thumb-up:after {
  width: 100px;
  height: 100px;
  content: '';
  background: url('/images-r/coqui/coqui-thumb-up.svg') center/100% auto no-repeat;
  position: absolute;
  left: 10px;
  top: 0px;
}

.coqui-worried:after,
.coqui-wondering:after {
  width: 100px;
  height: 100px;
  content: '';
  background: url('/images-r/coqui/coqui-wondering.svg') center/100% auto no-repeat;
  position: absolute;
  left: 10px;
  top: 0px;
}

.coqui-sad:after {
  width: 100px;
  height: 100px;
  content: '';
  background: url('/images-r/coqui/coqui-sad.svg') center/100% auto no-repeat;
  position: absolute;
  left: 10px;
  top: 0px;
}

.coqui-shocked:after {
  width: 100px;
  height: 100px;
  content: '';
  background: url('/images-r/coqui/coqui-shocked.svg') center/100% auto no-repeat;
  position: absolute;
  left: 10px;
  top: 0px;
}

.coqui-smile:after {
  width: 100px;
  height: 100px;
  content: '';
  background: url('/images-r/coqui/coqui-smile.svg') center/100% auto no-repeat;
  position: absolute;
  left: 10px;
  top: 0px;
}

/* --- END - Coqui Static --- */

.warning-message--x-modal {
  width: 100%;
  padding: 17px 20px 21px 24px;
  display: flex;
  align-items: center;
  font: normal 18px/21px 'Rubik', sans-serif;
  border-radius: 17px;
  color: var(--color__w);
  background-color: var(--color__h11);
  box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.12);
}

.coqui-smile--input:after {
  width: 120px;
  height: 120px;
  /* -webkit-transform: scaleX(-1);
  transform: scaleX(-1); */
  left: auto;
  bottom: auto;
  right: 10px;
  top: -63px;
}

.coqui-with-dots:after {
  width: 242px;
  height: 182px;
  content: '';
  background: url('../images-r/coqui/coqui-with-dots.svg') center/100% auto no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

.coqui-with-dots-2:after {
  width: 323px;
  height: 143px;
  content: '';
  background: url('../images-r/coqui/coqui-with-dots-2.svg') center/100% auto no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

.coqui-ale:after {
  width: 210px;
  height: 146px;
  content: '';
  background: url('../images-r/coqui/coqui-ale.svg') center/100% auto no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

/* --- Coqui END --- */

/* --- NEW GRADEBOOK DESIGN --- */
.activity-type-pill {
  padding: 2px 10px;
  display: inline-block;
  background: #DDDDDD;
  border-radius: 30px;
  min-width: 100px;
  text-align: center;
}

.activity-type-pill.verb {
  background: #e5f1f0;
}

.activity-type-pill.verb,
.icon.verb {
  color: #189a8f;
}

.activity-type-pill.vocabulary {
  background: #eaf5ff;
}

.activity-type-pill.vocabulary,
.icon.vocabulary {
  color: var(--color__b3);
}

.activity-type-pill.grammar {
  background: var(--color__m5);
}

.activity-type-pill.grammar,
.icon.grammar {
  color: var(--color__h1);
}
.activity-type-pill.tube {
  background: hsl(350 87% 97% / 1);
}
.activity-type-pill.tube,
.icon.tube {
  color: hsl(350 100% 69% / 1);
}
/* --- NEW GRADEBOOK DESIGN END --- */
/* --- Everyday Helpers --- */
.flex-start-between {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

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

.flex-end-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.flex-equal-items > * {
  flex-grow: 1;
  flex-basis: 0;
}

.flex-grow--1 {
  flex-grow: 1;
}

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

.flex-vertical-center {
  display: flex;
  align-items: center;
}

.flex-horizontal-center {
  display: flex;
  justify-content: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}

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

.flex-start-end {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

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

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

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

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

.flex-start-evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

.flex-column {
  flex-flow: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-row {
  flex-flow: row;
}

.flex-row-reverse {
  flex-flow: row-reverse;
}

.flex-self-center {
  align-self: center;
}

.flex-self-end {
  align-self: flex-end;
}

.justify-start {
  justify-content: start;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.show-flex {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.display-block {
  display: block;
}

.display-inline-block {
  display: inline-block;
}

.prefetch {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  right: 0x;
  opacity: 0;
}

.pos-rel {
  position: relative;
}

.rotate180 {
  transform: rotate(180deg);
}

.rotate-cc90 {
  transform: rotate(-90deg);
}

/* --- HEADER --- */
/* - this should be on the bottom of main.css - */
.header {
  width: 100%;
  /* min-height: 80px; */
  padding: 13px 24px 14px;
  background: var(--color__b3);
  display: flex; 
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

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

/* STICKY HEADER FOR GRAMMAR ACTIVITY */
.header-wrap.activity {
  position: sticky;
  top: 0px;
  /* z-index: 1000; */
  z-index: 999;
}

.header__logo {
  height: 53px;
  display: flex;
  align-items: center;
  margin-right: 40px;
}

.header__logo img {
  width: auto;
  height: 100%;
  margin-right: 8px;
}

.header__logo span {
  color: var(--color__w);
  font-size: 20px;
  font-weight: bold;
}

.header-subbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 0;
  background: var(--color__m4);
}

.header-subbar .active .header__nav__a,
.header-subbar .header__nav__a:hover,
.header-subbar .header__nav__a {
  color: var(--color__text);
}

.btn--drop__wrap--library {
  margin-left: auto;
}

.btn--library {
  padding: 10px 30px 10px 40px;
  color: var(--color__w);
  background-color: transparent;
}

.btn--library:before {
  content: "\e918";
  width: 16px;
  height: 12px;
  font-family: 'coqui';
  position: absolute;
  top: calc(50% - 7px);
  left: 14px;
}

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

.drop__content--mob__inner {
  width: 100%;
  min-width: 155px;
  display: flex;
  flex-flow: row; /* this is natural order */
}

.btn--user {
  width: 53px;
  height: 53px;
  line-height: 53px;
  min-width: initial;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border-radius: 50%;
  color: var(--color__w);
  background: transparent;
  border: 2px solid var(--color__w);
  margin-right: 20px;
  z-index: 5;
}

.btn--notification {
  width: 24px;
  min-width: initial;
  height: 24px;
  padding: 0;
  margin: 0 20px 0 0;
  background: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18' height='18' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath d='M16.6 13.4v-4a4.8 4.8 0 0 0-9.6 0v4c0 .583-.156 1.13-.428 1.6h10.456a3.185 3.185 0 0 1-.428-1.6zm3.2 3.2h-16c-1.067 0-1.067-1.6 0-1.6a1.6 1.6 0 0 0 1.6-1.6v-4a6.4 6.4 0 0 1 12.8 0v4a1.6 1.6 0 0 0 1.6 1.6c1.067 0 1.067 1.6 0 1.6zm-5.924 2.801a2.4 2.4 0 0 1-4.152 0 .8.8 0 0 1 .692-1.201h2.768a.8.8 0 0 1 .692 1.201z' id='a'/%3e%3c/defs%3e%3cg transform='translate(-3 -3)' fill='none' fill-rule='evenodd'%3e%3cmask id='b' fill='%23fff'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cuse fill='%23FFF' fill-rule='nonzero' xlink:href='%23a'/%3e%3cg mask='url(%23b)' fill='%23FFFFFF' fill-rule='nonzero'%3e%3cpath d='M0 0h24v24H0z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") center/24px 24px no-repeat;
}

.drop__content--notification {
  width: 280px;
  padding: 20px 20px 0 20px;
  border-radius: 3px;
  left: auto;
  right: 11px;
  top: 40px;
}

.drop__content--notification label {
  padding: 0 0 13px;
  border-bottom: 1px solid rgba(182, 199, 230, 0.2);
}

.drop__content--notification label span {
  width: 24px;
  line-height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--color__w);
  background: var(--color__h1);
}

.drop__content--notification li {
  display: block;
  padding: 15px 0 12px 30px;
  border-bottom: 1px solid rgba(182, 199, 230, 0.2);
}

.drop__content--notification li p {
  color: var(--color__b1);
  white-space: normal;
}

.notification__message {
  background: url('../images-r/icons/message-icon.svg') left top 20px no-repeat;
}

.notification__activity {
  background: url('../images-r/icons/file-icon.svg') left top 20px no-repeat;
}

.notification__time {
  font-size: 14px;
  line-height: 20px;
  padding: 4px 0 0 0;
  color: var(--color__m1);
}

.notification__all {
  width: 100%;
  padding: 11px 0 12px;
  display: block;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.header__nav__a {
  font-size: 18px;
  line-height: 20px;
  font-weight: normal;
  text-transform: none;
  color: rgba(255, 255, 255, 0.7);
}

.active .header__nav__a,
.header__nav__a:hover {
  color: rgba(255, 255, 255, 1);
}

/* --- Library drop menu --- */
.drop__content--library {
  width: 600px;
  padding: 20px 0;
}

.drop__content--library .col {
  padding: 0 15px;
  border-right: 1px solid rgba(166,176,195,0.2);
}

.drop__content--library .col:last-of-type {
  border-right: none;
}

.drop__content--library ul {
  padding: 0 0 30px;
}

.drop__content--library ul:last-of-type {
  padding-bottom: 0;
}

.drop__content--library li {
  padding-left: 40px;
  line-height: 28px;
}

.drop__content--library li a {
  display: block;
  padding: 0;
  line-height: 28px;
  color: var(--color__b5);
}

.drop__content--library li a:hover {
  background: initial;
  color: var(--color__h11);
}

.drop__content--library [class*='flag-'] {
  color: var(--color__b5);
  font-size: 18px;
  line-height: 32px;
  text-transform: uppercase;
}

.center-header__icon--portuguese,
.portuguese,
.flag-pt {
  background: url('../images-r/flags/pt.svg') top left/28px 28px no-repeat;
}

.center-header__icon--spanish,
.spanish,
.flag-es {
  background: url('../images-r/flags/es.svg') top left/28px 28px  no-repeat;
}

.center-header__icon--german,
.german,
.flag-de {
  background: url('../images-r/flags/de.svg') top left/28px 28px  no-repeat;
}

.center-header__icon--french,
.french,
.flag-fr {
  background: url('../images-r/flags/fr.svg') top left/28px 28px  no-repeat;
}

.center-header__icon--italian,
.italian,
.flag-it {
  background: url('../images-r/flags/it.svg') top left/28px 28px  no-repeat;
}

.center-header__icon--korean,
.korean,
.flag-kr {
  background: url('../images-r/flags/kr.svg') top left/28px 28px  no-repeat;
}

.center-header__icon--latin,
.latin,
.flag-lat {
  background: url('../images-r/flags/lat.svg') top left/28px 28px  no-repeat;
}

.language-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  /* border: 2px solid var(--color__w); */
  border: 1px solid var(--color__w);
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--color__w);
  border-radius: 50%;
}

.activities-mobile-selector {
  display: none;
}
/* --- Library drop menu - END --- */

.header-ac-title {
  display: flex;
  flex-flow: column;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.header-ac-title p {
  color: var(--color__w);
}

.header-wrap {
  display: flex;
  flex-wrap: wrap;
  z-index: 10;
}

.header__close {
  width: 32px;
  height: 32px;
  display: flex;
  margin-right: 20px;
  color: var(--color__w);
  cursor: pointer;
}

.header__close a {
  color: var(--color__w);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  padding: 9px 24px 9px 0;
  background: var(--color__b1);
  background: rgba(35,55,93,1);
  padding: 0;
  background: transparent;
}

.breadcrumbs.teacher {
  background: #E4EAF4;
  position: relative;
}

.breadcrumbs.teacher a {
  color: initial;
}

.breadcrumbs a {
  font-size: 18px;
  height: 20px;
  line-height: 20px;
  color: var(--color__w);
  display: flex;
  font-weight: 400;
  letter-spacing: -0.02em;
  opacity: 0.8;
  text-decoration: none;
}

.breadcrumbs a:after {
  content: "\e939";
  width: 32px;
  height: 20px;
  line-height: 20px;
  display: flex;
  justify-content: center;
  font-size: 8px;
  font-family: 'coqui';
}

.breadcrumbs a:last-of-type {
  opacity: 1;
  font-weight: bold;
}

.breadcrumbs a:last-of-type:after {
  display: none;
}

.breadcrumbs.teacher a {
  color: var(--color__b1);
}

.header-new {
  font-size: 12px;
  line-height: 15px;
  padding: 2px 8px;
  color: var(--color__w);
  font-weight: bold;
  border-radius: 12px;
  background-color: var(--color__h1);
}

/* - Hamburger Menu - */
.hamburger-icon {
  width: 17px;
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  /* position: absolute;
  top: 23px;
  left: 24px; */
  /* z-index: 6; */
  z-index: 16;
  display: none;
}

.hamburger-icon > .line {
  display: block;
  background: var(--color__w);
  /* height: 4px; */
  height: 2px;
  position: relative;
  margin: 0 auto;
  transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

.hamburger-icon > .line:nth-child(1) {
  margin-bottom: 4px;
}

.hamburger-icon > .line:nth-child(3) {
  margin-top: 4px;
}

.hamburger-icon.active .line:nth-child(1) {
  transform: translateY(6px) translateX(0) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(0) rotate(45deg);
  -moz-transform: translateY(6px) translateX(0) rotate(45deg);
  /*background: var(--color__b2);*/
}

.hamburger-icon.active .line:nth-child(3) {
  transform: translateY(-6px) translateX(0) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-6px) translateX(0) rotate(-45deg);
  /*background: var(--color__b2);*/
}

.hamburger-icon.active .line:nth-child(2) {
  opacity: 0;
}

/* - Hamburger Menu - END - */

.header-dashboard {
  width: 100%;
  height: 165px;
  background-image: url('../images-r/leaves/leaves-two-left.svg'), url('../images-r/leaves/leaves-three-bottom-2.svg');
  background-size: auto, 87px 44px;
  background-position: left top 60px, right 185px bottom;
  background-repeat: no-repeat;
  background-color: var(--color__b2);
}

.header-dashboard > .container {
  height: 100%;
  min-height: 120px;
}

.header-dashboard__middle {
  width: 100%;
}

.header-dashboard__middle h2 {
  color: var(--color__w);
  display: flex;
  align-items: center;
}

.header-dashboard__options > * {
  margin-left: 28px;
  float: left;
}

.header-dashboard__options > *:first-child {
  margin-left: 0;
}

.header-dashboard__nav {
  position: absolute;
  left: 15px;
  bottom: 0;
}

.header-dashboard__nav a {
  padding-bottom: 8px;
  margin-right: 40px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 4px solid transparent;
  float: left;
}

.header-dashboard__nav a.current,
.header-dashboard__nav a:hover {
  color: rgba(255, 255, 255, 1);
  border-color: var(--color__h2);
}

.teacher-code {
  line-height: 32px;
  padding: 0 10px;
  margin: 0 0 0 16px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: var(--color__w);
  background-color: var(--color__h3);
  border-radius: 16px;
  white-space: nowrap;
  display: inline-block;
}

/* Account status alert */
.account-status-alert {
  padding-top: 32px;
}

.account-status-info {
  width: 100%;
  padding: 7px 24px 12px;
  color: var(--color__b5);
  font-weight: normal;
  font-size: 12px;
  line-height: 13px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  top: 0;
  z-index: 1;
  background: var(--color__h3);
  box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.12);
}

.account-bg-unpaid {
  color: var(--color__w);
  background-color: var(--color__h11);
}

.account-bg-paid {
  color: var(--color__w);
  background-color: var(--color__h12);
}

.cg-overlay {
  width: 100%;
  height: 100%;
  display: block;
  /* background: rgba(48, 177, 149, 0.8); */
  background: rgba(0, 0, 0, .5);
  visibility: hidden;
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  /* z-index: 2000; too much */
  z-index: 4;
  transition: opacity .3s;
  /* pointer-events: none; */
}

.cg-overlay.visible {
  visibility: visible;
  opacity: 1;
}

/* - Login - */
.billing-plan-wrapper,
.register-wrapper,
.login-wrapper {
  max-width: 500px;
  margin: 80px auto 100px;
  padding: 0 16px;
}

.greyscale {
  filter: grayscale(100%);
  transition: all .5s;
}

.no-filter-on-hover:hover {
  filter: none;
  transition: all .5s;
}

.register-wrapper--wide {
  max-width: 670px;
}

.billing-plan-wrapper {
  max-width: 832px;
}

/* - Teacher Library - */
.library-wrapper {
  padding: 60px 16px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.school-billing-info {
  width: 100%;
  padding: 23px 50px 24px;
  border-radius: 4px;
  background: var(--color__m2);
  margin: 0 0 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.h2--sbi {
  font-size: 32px;
  line-height: 28px;
  font-weight: 600;
  color: var(--color__b1);
}

.sbi-item {
  width: 33.33%;
  min-width: 120px;
}

.library-filters {
  width: 100%;
  padding-bottom: 15px;
  /* margin-bottom: 60px; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.library-filters__search {
  width: 270px;
  position: relative;
}

.library-filters__search--grades {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.library-filters__search--grades select {
  background: transparent;
}

input[type="text"].filter-search-input--no-icon,
input[type="text"].filter-search-input {
  border-radius: 0;
  border: initial;
  padding: 5px 24px 5px 24px;
  background: url('../images-r/icons/search-icon.svg') left center no-repeat;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input[type="text"].filter-search-input--filled {
  /* padding-left: 44px; */
  padding-left: 24px;
}

input[type="text"].filter-search-input--no-icon:focus,
input[type="text"].filter-search-input--no-icon {
  background: initial;
  border-left: 1px solid rgba(35,55,93,0.2);
}

.select-wrapper--library-filters {
  max-width: 180px;
}

.select-wrapper.simple.select-wrapper--library-filters::after {
  width: 16px;
  height: 16px;
  line-height: 16px;
  content: '▾';
  font-size: 12px;
  text-align: center;
  position: absolute;
  top: calc(50% - 8px);
  right: 2px;
  background: none;
}

.select-wrapper--library-filters select {
  padding: 8px 20px 8px 5px;
  border-radius: 0;
  border: none;
  font-weight: bold;
  /* border-left: 1px solid rgba(35,55,93,0.2); */
}

.select-wrapper--library-filters select:focus {
  border-color: rgba(35,55,93,0.2);
}

/* Search on Activities */
.search-input__clear {
  width: 20px;
  height: 32px;
  display: inline-block;
  font-size: 30px;
  line-height: 32px;
  text-align: center;
  color: var(--color__m6);
  position: absolute;
  top: 0;
  right: 0;
}

.library-filters__sort {
  display: flex;
  align-items: center;
}

.library-filters__sort p {
  display: inline-block;
}

.btn--drop__wrap--folders {
  display: none;
}

.library-sidebar {
  width: 260px;
  margin-right: 30px;
}

.library-sidebar ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  /* This breaks Activities Folder Sidebar */
  margin: 16px 0;
  /* margin: 0 0 16px 0; */
  padding: 0;
  background: var(--color__m8);
  border-radius: 0 5px 5px 0;
}

.library-sidebar ul li {
  position: relative;
}

.library-sidebar ul li .library-sidebar__folder-options {
  display: block;
}

.library-sidebar__link {
  display: block;
  padding: 15px 70px 15px 40px;
  font-size: 16px;
  line-height: 32px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  border-left: 4px solid transparent;
  color: var(--color__m1);
  background: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='14' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath d='M20 17.444c0 .86-.716 1.556-1.6 1.556H5.6c-.884 0-1.6-.696-1.6-1.556V6.556C4 5.696 4.716 5 5.6 5h4l1.6 2.333h7.2c.884 0 1.6.697 1.6 1.556v8.555z' id='a'/%3e%3c/defs%3e%3cg transform='translate(-4 -5)' fill='none' fill-rule='evenodd'%3e%3cmask id='b' fill='%236761FF'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cuse fill='%236761FF' xlink:href='%23a'/%3e%3cg mask='url(%23b)' fill='%236761FF' fill-rule='nonzero'%3e%3cpath d='M0 0h24v24H0z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") left 10px center no-repeat;
}

.library-sidebar ul li:first-child a {
  background-image: initial;
}

.library-sidebar__link:hover,
.library-sidebar__link[current] {
  color: var(--color__h1);
  background-color: var(--color__m2);
  border-left-color: var(--color__h1);
}

.library-sidebar__link .folder-items-count {
  font-weight: 600;
  position: absolute;
  top: 15px;
  right: 40px;
}

.library-sidebar__folder-options {
  position: absolute;
  top: calc(50% - 20px);
  right: 10px;
  display: none;
}

.create-folder {
  line-height: 32px;
  font-weight: 600;
  text-align: center;
  color: var(--color__b1);
}

.create-folder img {
  width: 16px;
  height: 16px;
  margin: 0 10px 0 0;
}

.library-activities {
  width: calc(100% - 290px);
  flex-grow: 1;
}

.gradebook-wrapper {
  /* width:  calc(100% - 160px); */
  flex-grow:  1;
  display: flex;
  align-items:  start;
}

.gradebook-filters-wrapper {
  width: 260px;
  margin-right: 30px;
}

.gradebook-wrapper .checkbox-label input[type=checkbox] {
  background: #d5dae3;
  border-color: #d5dae3;
}

.gradebook-wrapper .table {
  font-size:  15px;
}

.gradebook-wrapper .table-head__cell {
  padding: 0;
}

.gradebook-wrapper .table-head {
  padding:  20px;
}

.gradebook-filters [data-toggle] {
  cursor: pointer;
}

.gradebook-table-wrapper .table-body {
  background: #f6f7f9;
}

.gradebook-table-wrapper .table-head {
  border-bottom: none;
  padding:  0;
}

.gradebook-table-wrapper .table-head__cell {
  padding: 20px 10px 20px 20px;
}

.gradebook-table-wrapper .table-head__cell.current-sort {
  background: var(--color__b3);
}

.gradebook-table-wrapper .table-head__cell.current-sort a {
  color: #FFFFFF;
}

.gradebook-table-wrapper .table-head__cell.current-sort.sort-dir-asc .table-sort {
  background-image: url(/images-r/icons/sort-asc.svg);
}

.gradebook-table-wrapper .table-head__cell.current-sort.sort-dir-desc .table-sort {
  background-image: url(/images-r/icons/sort-desc.svg);
}

.gradebook-filters label {
  cursor: pointer;
}

.gradebook-table .pagination,
.table--activities .pagination {
  display: flex;
  width: auto;
  margin: unset;
}

.gradebook-table .score-col {
  width:  15%;
}

.gradebook-table .pagination a {
  color: var(--color__b1);
}

.gradebook-table .pagination .active span {
  background-color: var(--color__b1);
}

.gradebook-activity-type {
  padding: 5px 10px;
  border-radius: 8px;
  background: red;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.gradebook-activity-type--quiz {
  background: var(--color__h3d);
}

.gradebook-activity-type--homework {
  background: var(--color__h9l);
}

.gradebook-activity-type--game {
  background: var(--color__h2);
}

.gradebook-activity-type--flashcard {
  background: var(--color__h3);
}

.gradebook-activity-type--assignment {
  background: var(--color__h13);
}

.gradebook-activity-type--tube {
  background: var(--color__h1);
}

.table--activities {
  margin: 16px 0;
}

.table--activities .open {
  background: var(--color__w);
  box-shadow: 0 1px 4px 0 #C5CAD3;
}

.table-head {
  height: 62px;
  background: var(--color__m2);
  border-bottom: 1px solid #D1D7E2;
  display: flex;
}

.table-head__cell {
  padding: 20px;
  font-size: 12px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}

.table-body__row {
  display: flex;
  background: var(--color__m8);
  border-bottom: 1px solid var(--color__m6);
}

.table-body__row.highlight {
  background: var(--color__h8);
}

.table-body__row.group-one {
  background: var(--color__m2);
}

.gradebook-table .table-body__row.group-one {
  background: #f5f5f5;
}

.table-body__row.group-two {
  background: var(--color__m3);
}

.table-sort {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  letter-spacing: 1px;
  padding: 0 20px 0 0px;
  color: var(--color__b1);
  background: url("data:image/svg+xml;charset=UTF-8,%3csvg width='8' height='10' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath d='M8.667 13.667h6.666L12 17l-3.333-3.333zm0-3.334L12 7l3.333 3.333H8.667z' id='a'/%3e%3c/defs%3e%3cg transform='translate(-8 -7)' fill='none' fill-rule='evenodd'%3e%3cmask id='b' fill='%23fff'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cuse fill='%23A6B0C3' xlink:href='%23a'/%3e%3cg mask='url(%23b)' fill='%237A8599' fill-rule='nonzero'%3e%3cpath d='M0 0h24v24H0z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") right center no-repeat;
  background-size: 12px auto;
}

.table-body__cell {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  position: relative;
}

.cell-center {
  justify-content: center;
}

.table:not(.table--disable-hover) .table-body__cell:hover {
  background: var(--color__m2);
}

.table-head__cell--score,
.table-body__cell--score {
  padding: 10px 0 10px 40px;
}

.row-number {
  min-width: 100px;
  margin-left: 20px;
  counter-increment: row-counter;
}

.row-number--no-margin {
  margin: 0;
}

.row-number:before {
  content: counter(row-counter) ".";
  min-width: 30px;
  margin-right: 10px;
  display: inline-block;
}

text-ellipsis {
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

text-no-ellipsis {
  max-width: 200px;
  word-break: break-all;
}

.assign-button {
  min-width: 36px;
  height: 36px;
  padding: 0;
  margin-right: 5px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  background: transparent;
}

.assign-button:hover {
  background-color: rgba(0, 0, 0, .1);
}

.settings--changed {
  position: relative;
}

.settings--changed:before {
  content: "\e92b";
  font-family: 'coqui';
  font-size: 20px;
  font-weight: normal;
  position: absolute;
  left: 2px;
  top: 0;
}

.table .settings--changed {
  position: absolute;
  left: 0;
  cursor: pointer;
  background: none;
}

/* --- Add Student Table adaptation --- */
.table--add-student .table-head__cell {
  padding: 20px 6px;
}

.table--add-student .table-body__cell {
  padding: 6px;
}

.table--add-student .table-body__cell input[type="text"] {
  padding: 10px 15px;
}

.table--add-student .table-head__cell:first-of-type,
.table--add-student .table-body__cell:first-of-type {
  min-width: 36px;
  justify-content: flex-end;
}

.table--add-student .table-body__row:hover {
  background-color: var(--color__h3);
}

.features--premium,
.features--limited {
  min-width: 90px;
  letter-spacing: 0.2px;
  color: var(--color__h1);
  padding: 0 0 0 24px;
  background: url('/images-r/icons/medal-icon-2.svg') left center no-repeat;
}

.features--limited {
  color: var(--color__b1);
  background: url('/images-r/icons/lock-icon-2.svg') left center no-repeat;
}

/* --- GRADES SPECIAL TABLE --- */
.rest-of-the-page {
  width: 100%;
}

.rest-of-the-page .table-head {
  /* display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); */
  position: relative;
  z-index: 3;
}

.rest-of-the-page .table-head__cell,
.rest-of-the-page .table-body__cell {
  flex-grow: 1;
  flex-basis: 0;
}

.rest-of-the-page .table-head .table-head__cell:nth-child(1) {
  padding: 12px 28px !important;
  position: relative;
  z-index: 2;
}

.rest-of-the-page .table-body .table-body__cell:nth-child(1) {
  position: relative;
  z-index: 2;
}

.rest-of-the-page div[style^="top"]:after,
.rest-of-the-page div[style^="left"]:after,
.rest-of-the-page div[style*="left: 0px;"]:after {
  content: '';
  width: 4px;
  height: 100%;
  transition: all 0.25s ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
}

.rest-of-the-page div[style^="left"]:after {
  box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.2);
}

.rest-of-the-page div[style*="left: 0px;"]:after {
  box-shadow: none;
}

.late-grade {
  width: 0;
  height: 0;
  border-top: 18px solid var(--color__h2);
  border-left: 18px solid transparent;
  position: absolute;
  top: 0;
  right: 0;
}

.incomplete-score {
  background: #FFF0F3;
}

/* total score */
.grades-total-score {
  width: 400px;
  font-size: 16px;
  color: var(--color__b1);
  /* font-family: "Source Sans Pro"; */
  background-color: rgba(246,247,249,0.4);
  float: left;
  overflow: hidden;
}

.grades-total-score .td {
  width: 55%;
  height: 90px;
  line-height: 20px;
  padding: 25px 28px;
  background-color: transparent;
  float: left;
}

.grades-total-score .td:nth-child(even) {
  padding: 35px 28px;
}

.grades-total-score .td span {
  display: block;
  color: #8790A2;
}

.grades-total-score .td score:last-of-type {
  margin-right: 0px;
}

/* - Registration - */
.register-wrapper {
  max-width: 588px;
}

.register-item {
  width: 250px;
  height: 140px;
  color: var(--color__h1);
  font-size: 32px;
  line-height: 28px;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid #DFE5F1;
  border-top: 6px solid var(--color__h1);
  box-shadow: 0 3px 15px 0 rgba(31,61,77,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.register-item:hover {
  color: var(--color__w);
  background-color: var(--color__h1);
}

.register-item--edu {
  color: var(--color__h3d);
  border-top-color: var(--color__h3d);
}

.register-item--edu.active,
.register-item--edu:hover {
  color: var(--color__w);
  background-color: var(--color__h3d);
}

.register-account {
  width: 100%;
}

.register-account__type {
  position: relative;
  display: block;
  padding: 16px 16px 16px 112px;
  margin-bottom: 24px;
  border-radius: 4px;
  background: var(--color__m2);
}

.search-result-icon:after,
.register-account__type:after {
  content: '\f549';
  font-family: "Font Awesome 5 Pro";
  font-size: 35px;
  font-weight: 100;
  line-height: 1;
  color: var(--color__m1);
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translate(0,-50%);
}

.register-account__type--teacher:after {
  content: '\f501';
  left: 47px;
}

.search-result {
  padding: 24px 32px;
  border: 2px solid #D3D7DF;
  box-shadow: 0 2px 10px 0 rgba(23,47,58,0.1);
  margin-bottom: 40px;
  border-radius: 8px;
}

.search-result-icon {
  position: relative;
  padding: 0 0 0 70px;
}

.search-result-icon:after {
  left: 0;
  top: 5px;
  transform: none;
}

.grades-single-quiz .th a:hover,
.grades-single-quiz .th a {
  font-size: 20px;
  line-height: 20px;
  /* float: right; */
  position: absolute;
  top: 0;
  right: 0;
}

.grades-single-quiz .th p {
  margin: 0;
  color: rgba(18,86,144,0.7);
  position: relative;
}

.grades-single-quiz .td:last-of-type {
  border-right: none;
}

.grades-single-quiz :not(.thead) .tr:hover,
.grades-single-quiz .td.col-light {
  background-color: rgba(255,248,229,1);
}

/* --- Drag n Drop Columns in Tables --- IS THIS STILL IN USE ? */
.dragtable-sortable {
  list-style-type: none; margin: 0; padding: 0; -moz-user-select: none;
}
.dragtable-sortable li {
  margin: 0; padding: 0; float: left; font-size: 1em; background: white;
}

.dragtable-sortable th, .dragtable-sortable td{
  border-left: 0px;
}

.dragtable-sortable li:first-child th, .dragtable-sortable li:first-child td {
  border-left: 1px solid #CCC;
}

.ui-sortable-helper {
  opacity: 0.7;filter: alpha(opacity=70);
}
.ui-sortable-placeholder {
  -moz-box-shadow: 4px 5px 4px #C6C6C6 inset;
  -webkit-box-shadow: 4px 5px 4px #C6C6C6 inset;
  box-shadow: 4px 5px 4px #C6C6C6 inset;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
  visibility: visible !important;
  background: #EFEFEF !important;
  visibility: visible !important;
}
.ui-sortable-placeholder * {
  opacity: 0.0; visibility: hidden;
}

/* --- GRADES SPECIAL TABLE - END --- */

/* --- X-Modal aka PopUps ---  */
.x-modal-wrap {
  display: none;
  padding-top: 62px;
  padding-bottom: 0px;
  opacity: 0;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 0, 0, .32);
  transition: opacity .3s;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  overflow-y: auto;
}

._show {
  display: flex;
  opacity: 1;
}

.x-modal-close {
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index:  10000;
}

.x-modal-close > * {
  pointer-events: none;
}

.x-modal-content {
  width: 95vw;
  max-width: 620px;
  /* padding: 40px 60px 56px; */
  padding: 30px 30px 28px;

  background-color: var(--color__w);
  box-shadow: 0px 48px 64px 4px rgba(11, 79, 130, 0.33);
  border-radius: 39px;
  position: relative;
}

.no-leaves {
  background: var(--color__w) !important;
}

.quick-edit-cont {
  width: 100%;
  padding: 13px 0 13px 66px;
  margin: 40px 0;
  border-radius: 8px;
  font-size: 16px;
  line-height: 32px;
  font-weight: 600;
  color: var(--color__h1);
  background: url('/images/admin/file-icon-purple.svg') center left 24px no-repeat, url('/images/admin/arrow-right-icon.svg') center right 24px no-repeat;
  background-color: var(--color__m5);
  background-size: 18px 22px, 13px 10px;
  border: 2px solid var(--color__h1);
  display: block;
  text-decoration: none;
  stroke: var(--color__h1);
}

.x-modal-content.x-modal-content--coqui {
  max-width: 520px;
  padding: 200px 40px 40px;
  background-image: initial;
  position: relative;
}

.x-modal-content--coqui::after {
  width: 199px;
  height: 150px;
  top: 23px;
  left: calc(50% - 100px);
}

.x-modal-content--coqui::before {
  content: '';
  height: 160px;
  width: 100%;
  background-color: #F6F7F9;
  background-image: url("/images-r/leaves/leaves-two-left.svg"), url("/images-r/leaves/leaves-three-bottom.svg");
  background-position: left center, right 20px bottom;
  background-size: 40px auto, 87px auto;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px 16px 0 0;
}

.x-modal-content--center {
  /* max-width: 390px;
  min-height: 320px;
  padding: 40px 60px; */
  display: flex;
  flex-flow: column;
  justify-content: center;
}

/* --- Pagination --- */
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px auto;
  width: 100%;
  font-size: 16px;
  line-height: 22px;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: var(--color__b3);
  text-decoration: none;
  background-color: var(--color__w);
  border: 1px solid var(--color__m4);
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  background-color: var(--color__m5);
  border-color: var(--color__m5);
}

.pagination > li > a,
.pagination > li > span {
  color: var(--color__b2);
  border-color: var(--color__m5);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: var(--color__w);
  cursor: default;
  background-color: var(--color__b2);
  border-color: var(--color__b2);
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* - List item - */
.quiz-list__item,
.activity-list__item {
  padding: 15px 0;
  margin: 0;
  border-bottom: 1px solid rgba(35,55,93,0.1);
}

.library-sidebar__link-icon {
  width: 14px;
  vertical-align: middle;
  opacity: 0.5;
  margin-right: 4px;
  cursor: pointer;
}

.library-sidebar ul li:first-child a {
  background-image: initial;
}

/* - My Account - */
.mid-wrap,
.narrow-wrap,
.mob-wrap {
  width: 100%;
  max-width: 588px;
  margin-left: auto;
  margin-right: auto;
}

.mob-wrap {
  max-width: 468px;
}

.mid-wrap {
  max-width: 820px;
}

.user-initials {
  width: 56px;
  min-width: 56px;
  height: 56px;
  line-height: 56px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: var(--color__w);
  background-color: var(--color__h3);
  border-radius: 50%;
  margin: 0 16px 0 0;
  float: left;
}

.user-name {

  max-width: calc(100% - 72px);
}

.user-name h3 {
  width: 100%;
}

.settings-name {
  width: 200px;
  padding: 0 24px 0 0;
  text-align: right;
}

.settings-value {
  width: 100%;
  max-width: 590px;
  cursor: pointer;
}

/* --- School Billing --- */
.plan-info {
  padding: 30px 40px;
  background-color: #FFF8E5;
  border: 1px solid var(--color__h3);
  position: relative;
}

.plan-info:after {
  width: 91px;
  height: 82px;
  left: calc(50% - 41px);
  top: -69px;
}

.premium-plan {
  width: 100%;
  max-width: 588px;
  border-radius: 0 0 3px 3px;
  position: relative;
}

.premium-plan:after {
  width: 100px;
  height: 85px;
  left: auto;
  right: 15px;
  top: -73px;
  transform: scaleX(-1);
}

.premium-plan--expired:after {
  width: 80px;
  height: 80px;
  left: calc(50% - 40px);
  top: -69px;
}

.premium-plan__head {
  padding: 25px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFF8E5;
  border: 1px solid var(--color__h3);
}

.premium-plan__head--expired {
  flex-flow: column;
  background: var(--color__m5);
  border: 1px solid var(--color__h1);
}

.premium-reasons {
  padding: 40px;
  border: 1px solid var(--color__h3);
  border-top: none;
}

.premium-plan--expired .premium-reasons {
  border: 1px solid var(--color__h1);
  border-top: none;
}

.checkbox-list li {
  font-weight: 600;
  padding: 0 0 0 40px;
  margin-bottom: 20px;

  /* color: var(--color__b1); */
  position: relative;
}

.checkbox-list li:after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color__h1) url('../images-r/icons/check-icon-2.svg') center/9px auto no-repeat;
  position: absolute;
  top: 1px;
  left: 0;
}

/* --- Activity List aka Sticky-Anchor List --- */

#listing-page {
  overflow: hidden;
}

.activities-titles {
  width: 280px;
  margin: 0px;
  position: absolute;
  top: 80px; /* inline with list */
  left: auto;
}

.activities-titles--listening {
  position: static;
  float: left;
}

.activities-list--listening {
  max-width: 790px;
}

.activities-titles.sticky {
  position: fixed;
  top: 30px;
}

.activities-titles.sticky--bottom {
  position: absolute;
  top: auto;
  bottom: 80px;
}

.activities-titles ul {
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.activities-titles ul li {
  height: 42px;
  width: 282px;
}

.activities-titles__anchor {
  font-size: 14px;
  line-height: 22px;
  padding: 10px 12px;
  display: block;
  font-weight: 600;
  color: #8790A2;
  /* text-transform: uppercase; */
  background-color: var(--color__w);
  border-left: 2px solid var(--color__w);
  cursor: pointer;
}

.activities-titles__anchor[current],
.activities-titles__anchor.active,
.activities-titles__anchor:hover {
  color: var(--color__h1);
  background-color: var(--color__m5);
  border-left: 2px solid var(--color__h1);
}

.activities-list {
  width: calc(100% - 300px);
  /* margin-top: 80px; this breaks Create Listening */
  float: right; /* no-flex */
}

.activities-list__item {
  width: 100%;
  margin: 0 0 80px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color__b1);
}

.activities-list__row {
  padding: 20px 0;
  border-bottom: 1px solid var(--color__m6);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Student Quiz Score --- */
.frog-bar-wrap {
  width: 100%;
  margin: 0 0 80px;
  padding: 88px 0 0 0;
  position: relative;
}

.frog-bar {
  width: 100%;
  height: 68px;
  border-radius: 4px 4px 0 0;
  background: rgba(103,97,255,0.5);
  box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.1);
  position: relative;
}

.frog-bar span {
  width: 100%;
  height: 68px;
  line-height: 68px;
  font-size: 35px;
  font-weight: bold;
  color: var(--color__w);
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

.frog-bar-measure {
  width: 0%;
  height: 68px;
  border-radius: 4px 4px 0 0;
  background-color: var(--color__h1);
  float: left;
}

.frog-bar::before {
  content: '';
  width: 125px;
  height: 63px;
  background: url('/images-r/leaves/leaves-three-bottom.svg') center no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -62px;
  left: 20px;
}

.frog-bar::after {
  content: '';
  width: 82px;
  height: 56px;
  background: url('/images-r/leaves/leaves-two-bottom.svg') center no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -55px;
  right: 20px;
}

.frog-bar-wrap::after {
  width: 100px;
  height: 90px;
  top: 11px;
  left: calc(50% - 50px);
}

.grades-total-score .tbody {
  width: 420px; /* hiding scrollbar */
  /* width: 400px; */
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

.grades-total-score .tr {
  border-bottom: 1px solid #EBEBEB;
  /* overflow: hidden; */
  display: flex;
}

.grades-total-score .thead .tr {
  border-bottom: 4px solid #E0E4EB;
}

.grades-total-score .th {
  width: 55%;
  padding: 21px 28px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0.6px;
  background: var(--color__m2);
}

.grades-total-score .td:nth-child(even),
.grades-total-score .th:nth-child(even) {
  width: 45%;
  /* text-align: center; */
}

.quiz-question {
  /* width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline; */
}

.quiz-question .answer {
  font-size: 18px;
  line-height: 28px;
  font-weight: normal;
  color: var(--color__b1);
  padding: 0;
  margin: 0;
  text-align: left;
  word-break: break-all;
}

.quiz-question .answer--correct,
.quiz-question .answer {
  padding: 0 28px 0 0;
  float: right;
  position: relative;
  color: var(--color__h4);
  text-align: right;
}

.quiz-grammar-review .correct,
.quiz-grammar-detail .correct {
  color: var(--color__h4);
}

.quiz-grammar-review .wrong,
.quiz-grammar-detail .wrong,
.quiz-question .answer--wrong {
  color: var(--color__h2);
}

.quiz-grammar-detail .show_valid_answer:after {
  content: "(" attr(data-title) ")";
  color: var(--color__h4);
}

.quiz-questions-wrap .wrong-answer,
.quiz-questions-wrap .correct-answer,
.tube.quiz .wrong-answer,
.tube.quiz .correct-answer {
  padding: 0 28px 0 0;
}


.quiz-questions-wrap .wrong-answer::after,
.quiz-questions-wrap .correct-answer::after,
.tube.quiz .wrong-answer::after,
.tube.quiz .correct-answer::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color__h4) url("data:image/svg+xml;charset=UTF-8,%3csvg width='11' height='8' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='none' d='M-5-6h20v20H-5z'/%3e%3cpath d='M9.4 1L3.625 7 1 4.273' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3e%3c/g%3e%3c/svg%3e") center/10px auto no-repeat;
  position: absolute;
  top: 50%;
  right: 0;
  /* margin-top: -8px; */
  margin-top: -7px;
}

.quiz-questions-wrap .wrong-answer::after,
.tube.quiz .wrong-answer::after {
  background: var(--color__h2) url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath d='M13.212 12l4.537 4.537a.857.857 0 0 1-1.212 1.212L12 13.212 7.463 17.75a.857.857 0 1 1-1.212-1.212L10.788 12 6.25 7.463a.857.857 0 1 1 1.212-1.212L12 10.788l4.537-4.537a.857.857 0 0 1 1.212 1.212L13.212 12z' id='a'/%3e%3c/defs%3e%3cg transform='translate(-6 -6)' fill='none' fill-rule='evenodd'%3e%3cmask id='b' fill='%23fff'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cuse fill='%23FFF' fill-rule='nonzero' xlink:href='%23a'/%3e%3cg mask='url(%23b)' fill='%23FFF' fill-rule='nonzero'%3e%3cpath d='M0 0h24v24H0z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") center/8px auto no-repeat;
}

.grades-total-score .td score {
  font-weight: 600;
}

.tooltip {
  color: #FDFDFD;
  background: #717171;
  font-size: 12px;
  line-height: 23px;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 1000;
}

.tooltip:after {
  widows: 0;
  height: 0;
  content: '';
  border-color: transparent;
  border-style: solid;
  border-width: 5px 5px 0;
  border-top-color: #717171;
  position: absolute;
  bottom: -5px;
  left: calc(50% - 5px);
}

.translation-tooltip {
  max-width: 300px;
  white-space:pre-wrap;
  text-align: center;
  background: rgb(57, 155, 143);
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

/* single quizzes */
.grades-single-quiz-wrap {
  width: calc(100% - 400px);
  font-size: 16px;
  color: #6B768A;
  /* font-family: "Source Sans Pro"; */
  float: left;
  position: relative;
}

.grades--single-quiz-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.grades-single-quiz__nav-left,
.grades-single-quiz__nav-right {
  width: 40px;
  height: calc(100% - 68px);
  background: transparent;
  position: absolute;
  top: 68px;
  left: 0;
  /* z-index: 10; */
  z-index: 3;
  cursor: pointer;
}

.grades-single-quiz__nav-right {
  left: auto;
  right: 0;
}

.nav-step {
  width: 100%;
  height: 100%;
  background: rgba(237,241,247,1) url("../images/admin/arrow-right.svg");
  background-position: center;
  background-size: 10px auto, 100%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--color__m6);
  border-left: 4px dashed var(--color__m1);
}

.grades-single-quiz {
  min-width: 100%;
  background-color: rgba(246,247,249,0.4);
  z-index: 1;
  overflow: hidden; /* this sloves us tooltip problem */
}

.grades-single-quiz .tbody {
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

.grades-single-quiz .tr {
  display: flex;
  border-bottom: 1px solid #EBEBEB;
  /* overflow: hidden; */
}

/* test of tightness */
.grades-single-quiz .thead {
  /* background-color: red; */
}

.grades-single-quiz .thead .tr {
  border: none;
}

.grades-single-quiz .th {
  width: 140px;
  padding: 12px 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  background-color: var(--color__m2);
  border-bottom: 4px solid #E0E4EB;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.grades-single-quiz .th p,
.grades-single-quiz .th text-ellipsis {
  width: 100%;
  height: 20px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.6px;
  font-weight: 600;
  color: var(--color__m1);
}

.grades-single-quiz .th a:hover,
.grades-single-quiz .th a {
  font-size: 20px;
  line-height: 20px;
  position: absolute;
  z-index: 1000;
}

.grades-single-quiz .th p {
  margin: 0;
  color: var(--color__b1);
  position: relative;
}

.grades-toolip {
  width: 235px;
  padding: 6px 12px;
  background: #1A1A1A;
  border-radius: 4px;
  transition: all 0.2s ease-in;
  text-align: left;
  display: flex;
  flex-flow: column;
  position: absolute;
  left: 0;
  top: 70px;
  z-index: 5;
  transform: scale(0);
  opacity: 0;
}

.grades-single-quiz .th .grades-toolip p {
  color: var(--color__w);
  font-weight: 400;
  font-size: 14px;
  height: auto;
}

.grades-single-quiz .th.col-light,
.grades-single-quiz .th:hover {
  background-color: var(--color__b2);
  border-bottom: 4px solid var(--color__b1);
}

.grades-single-quiz .th:hover .grades-toolip {
  opacity: 1;
  transform: scale(1);
}

.grades-single-quiz .th:last-child:hover .grades-toolip {
  left: auto;
  right: 0;
}

.grades-single-quiz .th.col-light > *,
.grades-single-quiz .th:hover > * {
  color: var(--color__w);
}

.grades-single-quiz .td {
  min-width: 140px;
  height: 90px;
  line-height: 20px;
  /* padding: 35px 10px; */
  padding: 0 10px;
  /* font-weight: 600; */
  text-align: center;
  background-color: transparent;
  border-right: 1px solid var(--color__m6);
}

.grades-single-quiz .expand {
  position: relative;
}

.grades-single-quiz .expand:after {
  content: '\f737';
  font-family: "Font Awesome 5 Pro";
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  position: absolute;
  top: 5px;
  right: 5px;
  /* transform: translate(-50%,-50%); */
  z-index: 0;
  opacity: 0;
  transition: all 0.3s ease-in;
}

.grades-single-quiz .expand:hover {
  color: var(--color__h1);
}

.grades-single-quiz .expand:hover:after {
  opacity: 1;
}

.translation-tooltip:after {
  left: 20px;
  border-top-color: rgb(57, 155, 143);
}

.quiz-sum-questions,
.quiz-sum-score {
  padding: 25px 15px 25px 0;
  border-bottom: 1px solid var(--color__h5);
  border-top: 1px solid var(--color__h5);
}

.grades-single-quiz :not(.thead) .tr:hover,
.grades-single-quiz .td.col-light {
  background-color: #f7f8fa;
}

/* --- Teacher Grades --- */

.library-recent-grades {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 40px;
}

.library-recent-grade {
  width: 24%;
  padding: 14px;
  border-radius: 5px;
  background: var(--color__h5);
}

.library-recent-grade__top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* --- HOMEWORK GRADEBOOK DETAILS --- */
.quiz-previous, .quiz-next {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--color__w) url('../images/admin/arrow-slim-icon.svg') center/7px auto no-repeat;
  border: none;
  cursor: pointer;
  position: absolute;
  top: calc(50% - 22px);
  right: -64px;
}

.quiz-previous {
  transform: rotate(-180deg);
  position: absolute;
  right: auto;
  left: -64px;
}

.quiz-submited .quiz-previous,
.quiz-submited .quiz-next {
  background-color: var(--color__h5);
}

.x-modal-content.homework-gradebook-details {
  max-width: 588px;
  padding: 40px 60px;
}

.homework-gradebook-details-name {
  margin-bottom: 60px;
}

.homework-gradebook-details-wrap {
  overflow: hidden;
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(166,176,195,0.2);
  margin: 0 0 9px;
  display: flex;
  /* this breaks teacher/quizzes Score analysis */
  /* justify-content: flex-end; */
  align-items: center;
}

.data-detail {
  width: 140px;
  padding: 0 0 0 52px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  color: var(--color__b1);
  position: relative;
}

.homework-gradebook-details-wrap .data-detail {
  width: 33.33%;
}

.data-detail .svg-wrap {
  width: 36px;
  height: 36px;
  font-weight: 600;
  border-radius: 50px;
  background-color: #F6F7F9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.data-detail .svg-wrap svg {
  width: 16px;
  height: auto;
  display: block;
  margin: 0;
}

.data-detail .svg--grade svg {
  width: 13px;
  height: 20px;
  margin: 8px auto 0;
}

.data-detail .svg--time svg {
  width: 18px;
  height: 18px;
  margin: 9px auto 0;
}

.data-detail label {
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 0;
  color: #A6B0C3;
  display: block;
  text-transform: uppercase;
}

.homework-gradebook-details-settings {
  padding: 0 0 0 32px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color__h2);
  display: flex;
  justify-content: space-between;
}

.homework-gradebook-details-settings a {
  min-width: 85px;
  margin: 0;
  color: var(--color__h2);
  text-decoration: none;
  position: relative;
}

#changed_settings {
  margin: 0 0 40px;
  display: none;
}

#changed_settings ol {
  font-size: 16px;
  margin: 0;
  padding: 0 0 0 21px;
}

#changed_settings ol li {
  padding: 0 0 0 12px;
}

.homework-gradebook-details-data {
  /* for inevitable scrollbar */
  width: calc(100% + 20px);
  max-height: 350px;
  overflow-y: auto;
  margin: 0 -20px 0 0;
  padding: 0 20px 0 0;
}

.x-modal-content.homework-gradebook-details.tube {
  max-width: 650px;
}

.tube .table-head {
  height: 50px;
}

.tube .table-body__row {
  background: #fff;
  border: none;
}

.tube .table-head__cell,
.tube .table-body__cell {
  padding: 0 10px;
}

.tube .table-body__cell {
  height: auto;
  min-height: 50px;
}

.wrong-answer,
.correct-answer {
  position: relative;
  color: var(--color__h4);
  font-weight: bold;
}

.wrong-answer {
  color: var(--color__h2);
}

.x-modal-wrap--flex-start {
  align-items: flex-start;
  padding-top: 100px;
}

.x-modal-content--stats {
  max-width: 1000px;
  padding: 75px 60px 50px;
}

.stats-desc {
  margin-right: 95px;
}

.stats-detail {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 4px;
  background-color: var(--color__m2);
  margin-bottom: 20px;
}

.label--stats {
  line-height: 12px;
  margin: 0 0 7px;
  color: var(--color__m1);
  text-align: right;
}

.stats--errors li {
  min-width: 33.33%;
  padding: 0 10px;
  font-size: 18px;
  margin-bottom: 5px;
  list-style: none;
}

.qm-icon {
  color: var(--color__b1);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in;
  display: inline-block;
}

.qm-icon:after {
  content: "\e941";
  font-family: 'coqui';
  font-size: 12px;
  font-weight: normal;
  border-radius: 50%;
  border: 2px solid;
  padding: 2px;
  margin: 0 0 0 3px;
  transition: all 0.2s ease-in;
}

.qm-icon:hover {
  color: var(--color__h1);
  text-decoration: underline;
}

.qm-icon:hover:after {
  color: var(--color__w);
  background-color: var(--color__h1);
  border-color: var(--color__h1);
}

.correct-rollover {
  width: 250px;
  padding: 20px;
  border-radius: 4px;
  border-top: 4px solid var(--color__h1);
  background: #FFF;
  box-shadow: 0 5px 5px 3px rgba(0,0,0,0.15);
  position: absolute;
  transform: translate(-50%,-100%);
}

.correct-rollover:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--color__w);
  position: absolute;
  bottom: -10px;
  left: calc(50% - 5px);
}

/* --- partially copy from activities.css --- */
.barcontainer-wrapper {
  width: 100%;
  padding: 0;
  text-align: center;
  margin: 0 0 80px;
  display: flex;
  justify-content: space-between;
  position: relative;
  border-bottom: 2px solid #F6F7F9;
}

.barcontainer-wrapper-gp {
  justify-content: space-around;
}

.barcontainer {
  width: 30%;
  max-width: 120px;
  height: 150px;
  border-radius: 4px 4px 0 0;
  margin: 50px 0 0;
  position: relative;
}

.barcontainer.your-score .bar {
  background-color: var(--color__h3);
}

.barcontainer.your-score-avg .bar {
  background-color: var(--color__h1);
}

.barcontainer.conjugemos-score .bar {
  background-color: var(--color__h4);
}

/* it needs space for coqui message */
.barcontainer-grammar {
  margin: 130px 0 0;
}

.record-coqui {
  width: 60px;
  height: auto;
  position: absolute;
  top: -44px;
  left: calc(50% - 30px);
}

.score-0 .record-coqui,
[class*="score-1"] .record-coqui,
[class*="score-2"] .record-coqui,
[class*="score-3"] .record-coqui,
[class*="score-4"] .record-coqui {
  display: none;
}

.score-100 .record-coqui {
  display: initial;
}

.score-number {
  width: 100%;
  padding: 8px;
  color: var(--color__w);
  font-size: 32px;
  line-height: 44px;
  font-weight: 600;
  text-shadow: 1px 1px 7px rgba(0, 0, 0, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  border-radius: 4px 4px 0px 0px;
}

.bar .score-number {
  text-shadow: none;
}

.score-0.your-score .score-number,
[class*="score-1"].your-score .score-number,
[class*="score-2"].your-score .score-number,
[class*="score-3"].your-score .score-number,
[class*="score-4"].your-score .score-number {
  color: var(--color__w);
}

.score-0.your-score-avg .score-number,
[class*="score-1"].your-score-avg .score-number,
[class*="score-2"].your-score-avg .score-number,
[class*="score-3"].your-score-avg .score-number,
[class*="score-4"].your-score-avg .score-number {
  color: var(--color__w);
}

.score-0.conjugemos-score .score-number,
[class*="score-1"].conjugemos-score .score-number,
[class*="score-2"].conjugemos-score .score-number,
[class*="score-3"].conjugemos-score .score-number,
[class*="score-4"].conjugemos-score .score-number {
  color: var(--color__w);
  /* color: var(--color__h4); */
}

.score-0 .barcontainer.your-score .bar,
.barcontainer.your-score .bar[style="height: 0%;"] {
  height: 4px !important;
  background-color: var(--color__h1) !important;
}

.score-name {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  position: absolute;
  left: 0;
}

.score-name--bottom {
  bottom: -26px;
  padding: 0;
}

.score-total-students {
  bottom: -48px;
}
/* --- copy from activities.css END --- */

.improvement-area {
  padding: 0 0 20px;
  overflow: hidden;
}

.improvement-area h4 {
  margin: 0 0 4px;
}

.improvement-area p {
  font-size: 14px;
  line-height: 22px;
  color: #8790A2;
  margin: 0 0 33px;
}

.chart-wrap {
  width: 260px;
  position: relative;
  float: left;
}

.chart-wrap .chart-info {
  width: 100%;
  padding: 0 12px;
  overflow: hidden;
}

.chart-wrap p {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: #8790A2;
  margin: 0;
  float: left;
}

.chart-wrap p:last-of-type {
  float: right;
}

#chart {
  float: left;
}

.area {
  opacity: 0.1;
  border-bottom: 1px solid var(--color__h2);
}

.dot {
  stroke: var(--color__w);
  stroke-width: 2px;
}

.chart-wrap .tooltip {
  width: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #8790A2;
  opacity: 1;
  text-align: center;
  display: none;
  position: absolute;
}

.chart-improving {
  margin: 35px 0 0 0;
  float: right;
}

.chart-improving label {
  display: none;
}

.chart-improving .data-detail .svg-wrap svg {
  width: 18px;
  margin: 0;
}

.chart-improving.UP .improving,
.chart-improving.SAME .same,
.chart-improving.DOWN .worsen {
  display: block;
}

.UP .data-detail {
  color: var(--color__h4);
}

.UP .svg-wrap {
  background-color: #DAFDFA;
}

.UP .svg-wrap svg path {
  stroke: var(--color__h4);
}

.DOWN .data-detail {
  color: var(--color__h2);
}

.DOWN .svg-wrap {
  background-color: rgba(174,28,28,0.1);
}

.DOWN .svg-wrap svg {
  transform: rotate(90deg);
}

.DOWN .svg-wrap svg path {
  stroke: var(--color__h2);
}

.SAME .data-detail {
  color: var(--color__h1);
}

.SAME .svg-wrap {
  background-color: rgba(103,97,255,0.1);
}

.svg-wrap.stagnate {
  display: none;
}

.SAME .svg-wrap {
  display: none;
}

.SAME .svg-wrap.stagnate {
  display: flex;
}

#chartContainer.loading canvas,
#chartContainer.loading a {
  display: none;
}

#chartContainer.loading:before {
  content: "Loading";
}

#chartContainer.loading:after {
  content: "...";
  display: inline-block;
  width: 20px;
  animation: chart-loading 1s infinite;
}

@keyframes chart-loading {
  0% { content: ""; }
  33% { content: "."; }
  66% { content: ".."; }
  100% { content: "..."; }
}

/* Homework stats */
.stats-worst {
  background-color:var(--color__h6) !important;
}

.stats-best {
  background-color:#9AE5DE !important;
}

.stats-trend--up,
.stats-trend--down,
.stats-trend--same {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.stats-trend--up,
.stats-trend--down {
  background-image: url(/images-r/icons/u-arrow-icon-2.svg);
}

.stats-trend--down {
  transform: rotate(135deg);
}

.stats-trend--same {
  background-image: url(/images-r/icons/same-arrow-icon.svg);
}
/* -- Grammar Details -- */
.homework-gradebook-details-grammar {
  margin: 50px 0 40px;
}

.homework-gradebook-details-grammar h3 span,
.tube.transcript h3 span {
  padding: 0 0 0 11px;
  margin: 0 0 0 25px;
  color: rgba(135,144,162,1);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  float: right;
  position: relative;
}

.homework-gradebook-details-grammar h3 span:after,
.tube.transcript h3 span:after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: rgba(234,72,146,1);
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 0;
}

.homework-gradebook-details-grammar h3 span:last-of-type:after,
.tube.transcript h3 span:last-child:after {
  background-color: rgba(72,207,195,1);
}

/* .homework-gradebook-details-grammar p {
  font-size: 18px;
  line-height: 28px;
  color: #8790A2;
} */

.homework-gradebook-details-grammar p .wrong {
  color: var(--color__h2);
}

.homework-gradebook-details-grammar p .correct {
  color: var(--color__h4);
}

.homework-gradebook-details-grammar p br {
  display: none;
}
/* --- HOMEWORK GRADEBOOK DETAILS - END --- */
/* --- Teacher Grades - END --- */

/* --- About Us --- */
.about-col {
  width: 100%;
  max-width: 450px;
  padding: 14px;
  margin: 0 15px;
}

.about-col h1 {
  letter-spacing: -1px;
}

.about-col--img {
  box-shadow: 0 1px 4px 1px rgba(0,0,0,0.25);
  transform: rotate(-4deg);
}

.about-col--img:nth-child(even) {
  transform: rotate(4deg);
}

.about-col--img img {
  width: 100%;
  height: auto;
  display: block;
}

.about-col.coqui-ale {
  position: relative;
}

.about-col.coqui-ale:after {
  transform: rotate(-4deg);
  left: auto;
  right: -10px;
  top: -127px;
}


/* --- Pricing Plan --- */
.plans-wrap {
  display: flex;
}

.pricing-plan {
  height: 100%;
  border-radius: 6px;
  background-color: var(--color__w);
  border: 1px solid #DFE5F1;
  box-shadow: 0 3px 15px 0 rgba(31,61,77,0.1);
}

/* .plan-head {
  width: 100%;
  line-height: 48px;
  font-size: 20px;
  font-weight: 600;
  border-radius: 6px 6px 0 0;
  color: var(--color__h1);
  background-color: #F1F0FF;
  text-align: center;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.plan-head {
  width: 100%;
  line-height: 48px;
  font-size: 21px;
  font-weight: 600;
  border-radius: 6px 6px 0 0;
  color: var(--color__h1);
  background-color: #F1F0FF;
  text-align: center;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.plan-head--gold {
  color: #c29614;
  background-color: var(--color__h7);
}

.plan-head--pink {
  color: var(--color__h2);
  background-color: #FFE6EB;
}

.pricing-plan-duo,
.plan-body {
  height: calc(100% - 48px);
}

.pricing-plan-duo .plan-body {
  height: 100%;
}

.plan-body {
  width: 100%;
  padding: 0 20px 25px;
}

.plan-sup {
  width: 100%;
  color: var(--color__b1);
  font-weight: 600;
  text-align: center;
  margin-top: 15px;
}

.plan-price {
  display: inline-block;
  color: var(--color__b2);
  font-size: 48px;
  line-height: 60px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.yearly,
.fusnote {
  position: relative;
}

.fusnote:after {
  content: '*';
  font-size: 0.5em;
  line-height: 1.8;
  color: var(--color__h2);
  position: absolute;
  left: auto;
  right: -10px;
  z-index: 2;
}

.plan-time,
.plan-price.yearly:before {
  height: 18px;
  line-height: 18px;
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  color: var(--color__b1);
}

.plan-price.yearly:before {
  content: ' / Year';
  position: absolute;
  bottom: 12px;
  right: -42px;
}

.plan-plus {
  line-height: 60px;
  color: var(--color__b2);
  font-size: 36px;
  font-weight: bold;
  align-self: flex-end;
  margin-bottom: 10px;
}

.plan-price--free {
  font-size: 38px;
  margin: 38px 0 45px;
}

.plan-list li {
  margin-bottom: 22px;
}

.plan-list li:last-of-type {
  margin-bottom: 0;
}

.score-number {
  width: 100%;
  padding: 8px;
  color: var(--color__w);
  /* font-size: 32px; */
  font-size: 26px;
  line-height: 44px;
  font-weight: 600;
  text-shadow: 1px 1px 7px rgba(0, 0, 0, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.plan-list {
  text-align: left;
}

.plan-list li {
  padding-left: 30px;
}

.plan-list--free li {
  background: url('../images-r/icons/check-icon-3.svg') top 5px left/12px auto no-repeat;
}

.plan-list--free-teacher li,
.plan-list--premium li {
  background: url('../images-r/icons/check-icon-4.svg') top 5px left/12px auto no-repeat;
}

.plan-list--school li {
  background: url('../images-r/icons/check-icon-5.svg') top 5px left/12px auto no-repeat;
}

.plan-list--premium li:last-of-type,
.plan-list--school li:last-of-type {
  background: none;
}

.plan-list .fusnote:after {
  font-size: 2em;
  line-height: 0.8em;
  top: 0.15em;
  left: 0;
  right: auto;
}

.plan-list.bigger li {
  background-size: 15px auto;
  background-position: 0 8px;
}

/* #myModalRestricted, */
#userInfo {
  display: none;
}

/* --- Fake Print Page --- */
#printable_container {
  max-width: 1200px;
  padding: 0 15px;
  margin: 40px auto;
}

#printable_container p,
#printable_container .question-wrap {
  color: var(--color__b1);
}

.print-instructions {
  padding: 15px;
  background: var(--color__m2);
}

.question-wrap {
  display: block;
  align-items: center;
  margin-bottom: 15px;
}

.answer-wrapp {
  display: inline-block;
  margin-bottom: 15px;
}

.answer-wrapp strong {
  margin-left: 10px;
}

input[type="text"].printable-input {
  width: 200px;
  font-size: 16px;
  line-height: 24px;
  padding: 3px 10px;
  font-weight: 600;
  background: var(--color__m2);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color__b1);
  margin: 0 10px;
}

.print_footer {
  max-width: 1200px;
  margin: 55px auto 25px;
  padding: 0 15px;
}

.print_footer p {
  font-size: 12px;
  color: var(--color__b1);
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid var(--color__m1);
}

.panel-heading {
  padding: 20px;
  border: 1px solid var(--color__b1);
  border-radius: 5px;
  background: var(--color__m2);
}

.panel-body {
  padding: 20px 5px;
}

.card-item {
  width: 100%;
  display: flex;
  flex-flow: column;
  margin-bottom: 16px;
}

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

.card-head {
  padding: 18px 24px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 21px;
  line-height: 25px;
  font-weight: 700;
  color: var(--color__w);
  background: #885AF8;
  border-radius: 17px 17px 0 0;
}

.card-cont {
  padding: 16px 21px 22px;
  display: flex;
  align-items: center;
  font: normal 18px/21px 'Rubik', sans-serif;
  letter-spacing: -0.03em;
  color: var(--color__b4);
  background: #F0F9FF;
  box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.12);
  border-radius: 0 0 17px 17px;
}

.card-item.continue .card-head {
  background: #B396FB;
}

.card-item.continue .card-cont {
  box-shadow: none;
  border: 2px solid #B396FB;
}

.card-item.finished .card-head {
  background: var(--color__h12);
}

@media all and (max-width: 1160px) {

  .header__logo {
    height: 35px;
    margin-right: 15px;
  }

  .header__logo img {
    margin-right: 0;
  }

  .header__logo span {
    display: none;
  }

  .plans-wrap {
    flex-wrap: wrap;
  }

  .pricing-plan-wrap {
    margin-bottom: 40px;
  }

  .pricing-plan {
    display: flex;
    align-items: center;
    flex-flow: column;
  }

  .pricing-plan-duo {
    width: 100%;
    justify-content: space-around;
  }

  .pricing-plan-wrap:nth-child(1),
  .pricing-plan-wrap:nth-child(3) {
    width: 50%;
  }

  .pricing-plan-wrap:nth-child(2) {
    width: 100%;
    order: -1;
  }

}
/* End of media 1160px */

@media all and (min-width: 1101px) {

  .btn--drop__wrap-folders .btn--drop__wrap {
    display: none;
  }

  .library-sidebar ul.drop__content {
    min-width: initial;
    position: static;
    box-shadow: none;
  }

  .library-sidebar ul.drop__content .drop__content__menu {
    padding: 0;
    display: initial;
  }

}

@media all and (max-width: 1100px) {

  .flex-row-lg {
    flex-flow: row;
  }

  .flex-column-lg {
    flex-flow: column
  }

  .flex-align-center-lg {
    align-items: center;
  }

  .flex-align-star-lg {
    align-items: flex-start;
  }

  .table {
    width: 100%;
    overflow-x: auto;
  }

  .table-head,
  .table-body {
    /* not good */
    min-width: 980px;
  }

  .rest-of-the-page .table {
    overflow-x: initial;
  }

  .rest-of-the-page .table-head,
  .rest-of-the-page .table-body {
    min-width: initial;
  }

  .btn--drop__wrap-folders {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    padding-bottom: 10px;
    position: relative;
    border-bottom: 1px solid var(--color__m6);
  }

  .library-activities {
    width: 100%;
  }

  .library-sidebar ul.library-sidebar--links {
    display: none;
    min-width: initial;
  }

  .library-sidebar__link {
    padding: 0 70px 0 40px;
  }

  .library-sidebar__link .folder-items-count {
    top: 0;
  }

}
/* End of media 1100px */

@media all and (max-width: 900px) {

  .x-modal-content.homework-gradebook-details.tube {
    max-width: inherit;
  }

  .quiz-previous,
  .quiz-next {
    right: 8px;
    background-color: var(--color__h5);
  }

  .quiz-previous {
    right: auto;
    left: 8px;
  }

  .school-billing-info {
    padding: 16px;
    margin-bottom: 30px;
    flex-flow: column;
  }

  .school-billing-info > div {
    width: 100%;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--color__m1);
    margin: 0 0 20px;
  }

  .school-billing-info > div:last-of-type {
    border: none;
    padding: 0;
    margin: 0;
  }

  .sbi-item {
    margin: 10px 0;
  }

}

@media all and (max-width: 800px) {

  .header-dashboard__middle--activities .header-dashboard__nav,
  .header-dashboard__middle--activities .lang-drop {
    display: none;
  }

  .header-dashboard__middle--activities {
    flex-direction: column;
    align-items: center;
  }

  .activities-mobile-selector {
    display: flex;
    justify-content: space-between;
    width: 400px;
  }

  .activities-mobile-selector > div button {
    width: 190px;
  }

  .activities-mobile-selector .language-icon {
    width: 22px;
    height: 22px;
  }

  .library-wrapper {
    padding: 30px 16px;
  }

  .library-filters {
    align-items: flex-start;
    flex-flow: column;
    margin-bottom: 30px;
  }

  .h--table-title-800 {
    display: none;
  }

  .table-head {
    height: 52px;
  }

  .table-head__cell {
    padding: 5px 10px;
  }

  .table-counter {
    min-width: 80px;
    margin-left: 5px;
  }

  .table-counter::before {
    margin-right: 0;
  }

  .table-body__cell {
    /*height: 46px;*/
    padding: 5px 10px;
  }

  .table-body__cell text-ellipsis {
    white-space: inherit;
  }

  .activities-list .coqui-message {
    display: none;
  }

  .row-number {
    margin-left: 10px;
  }

}
/* End of media 800px */

/* --- Desktop ONLY --- */
@media all and (min-width: 721px) {

  .mob-only {
    display: none !important;
  }

}

@media all and (max-width: 720px) {

  .btn {
    height: 50px;
    padding: 0 20px;
    font: bold 16px/18px 'Rubik', sans-serif;
  }

  .btn--small {
    height: 38px;
    padding: 0 15px;
    font-weight: 500;
  }

  .btn--sq,
  .btn--cir,
  .nbtn--slim,
  .nbtn--outline,
  .nbtn--flat,
  .nbtn {
    height: 42px;
    padding: 0 10px;
    font: bold 14px/15px 'Rubik', sans-serif;
  }

  .btn--sq,
  .btn--cir {
    width: 42px;
    padding: 0;
  }

  *[class^="nbtn"] .icon {
    font-size: 24px;
  }

  .cookie-confirm-inner {
    flex-flow: column;
    align-items: flex-end;
  }

  .cookie-confirm p {
    padding: 10px 0;
  }

  body.no-scroll,
  body.menu-open {
    height: 100vh;
    overflow-y: hidden;
  }

  .col-xs-12 {
    width: 100%;
  }

  .header {
    padding: 13px 16px 14px;
  }

  .header-ac-title {
    position: static;
    transform: none;
    align-items: flex-start;
  }

  .header__logo {
    display: none;
  }

  .header__close {
    margin-right: 16px;
  }

  .hamburger-icon {
    display: block;
  }

  .btn--drop__wrap--notification,
  .drop__content--user:after {
    display: none;
  }

  /* slide from left */
  .header__nav__inner {
    transform: translate3d(-100vw, 0, 0);
  }

  /* necessary for dropdown's full width */
  .btn--drop__wrap--library {
    position: static;
    margin: 0 auto;
  }

  /* on mobile 720 */
  .drop__content--mob {
    width: 100vw;
    height: calc(100vh - 60px);
    padding: 6px 40px;
    color: var(--color__b2);
    background: var(--color__w);
    border-radius: 0;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    /*text-align: center;*/
    /*position: fixed;*/
    box-shadow: none;
    position: absolute;
    top: 65px;
    left: 0;
    bottom: initial;
    right: initial;
    z-index: 15;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .drop__content--mob__close {
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg width='14' height='14' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath d='M13.2121831,12 L17.7489487,16.5367656 C18.0836838,16.8715007 18.0836838,17.4142136 17.7489487,17.7489487 C17.4142136,18.0836838 16.8715007,18.0836838 16.5367656,17.7489487 L12,13.2121831 L7.46323438,17.7489487 C7.12849928,18.0836838 6.58578644,18.0836838 6.25105133,17.7489487 C5.91631622,17.4142136 5.91631622,16.8715007 6.25105133,16.5367656 L10.7878169,12 L6.25105133,7.46323438 C5.91631622,7.12849928 5.91631622,6.58578644 6.25105133,6.25105133 C6.58578644,5.91631622 7.12849928,5.91631622 7.46323438,6.25105133 L12,10.7878169 L16.5367656,6.25105133 C16.8715007,5.91631622 17.4142136,5.91631622 17.7489487,6.25105133 C18.0836838,6.58578644 18.0836838,7.12849928 17.7489487,7.46323438 L13.2121831,12 Z' id='a'/%3e%3c/defs%3e%3cg transform='translate(-6 -6)' fill='none' fill-rule='evenodd'%3e%3cmask id='b' fill='%23fff'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cuse fill='%2323375D' fill-rule='nonzero' xlink:href='%23a'/%3e%3cg mask='url(%23b)' fill='%2323375D' fill-rule='nonzero'%3e%3cpath d='M0 0H24V24H0z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") center no-repeat;
    position: absolute;
    top: 26px;
    right: 28px;
    cursor: pointer;
  }

  .drop__content--mob__inner {
    width: 100%;
    flex-flow: column;
  }

  /*.header__nav__a,*/
  .drop__content--mob .header__nav__a,
  .drop__content--mob .btn,
  .drop__content--user a {
    width: 100%;
    font-size: 20px!important;
    line-height: 36px;
    color: var(--color__b5)!important;
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--color__m6);
    margin: 0;
  }

  .drop__content--mob .btn {
    height: initial;
    text-align: left;
  }

  .drop__content--mob .drop__content {
    position: static;
    box-shadow: none;
    padding: 12px 0;
    border-bottom: 1px solid var(--color__m6);
    border-radius: 0;
  }

  .drop__content--mob .drop__content__menu:last-of-type {
    border: none;
  }

  .drop__content--mob .active {
    border-bottom: none;
  }

  .drop__content--mob .btn--drop::after {
    color: var(--color__b5);
  }

  /* slide from right */
  /* CANNOT be short like hamburger menu */
  /* must be full height */
  .drop__content--user {
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 17;
    transform: translate3d(100vw, 0, 0);
  }

  .slide-in {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  .btn--library {
    background: transparent;
  }

  .drop__content--mob-pos,
  .drop__content--library {
    width: 90vw;
    min-width: 90vw;
    padding: 0;
    top: 65px !important;
    left: 5vw !important;
  }

  .drop__content--library {
    padding-bottom: 30px;
  }

  .header__nav__a {
    font-size: 14px;
    line-height: 16px;
  }

  .header-dashboard {
    height: auto;
    min-height: 120px;
    background: var(--color__b2) url('../images-r/leaves/leaves-three-bottom.svg') right 10% bottom/60px auto no-repeat;
  }

  .header-dashboard__middle {
    margin: 0 0 25px;
  }

  .header-dashboard__middle h2 {
    display: block;
    font-size: 26px;
    line-height: 30px;
    font-weight: 400;
  }

  .header-dashboard__options > * {
    margin-left: 10px;
  }

  .teacher-code {
    margin: 5px 0 0 0;
    font-size: 16px;
    line-height: 22px;
    display: block;
    color: var(--color__h3);
    background: transparent;
  }

  .header-dashboard__nav a {
    padding-bottom: 4px;
    margin-right: 20px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
  }

  .header-dashboard__middle--activities {
    margin: 10px auto;
  }

  .breadcrumbs {
    display: none;
  }

  /* --- BUTTONS --- */
  .btn--drop-pill {
    height: 30px;
    width: 50px;
    /* padding: 0 30px; */
    padding: 0 10px;
  }

  .btn--drop-pill:after {
    right: 4px;
  }

  .btn--drop-no-text div {
    display: none;
  }

  .btn--drop-no-text img {
    margin-right: 10px;
  }

  .btn--round {
    width: 30px;
    height: 30px;
  }

  .btn--square {
    min-width: 38px;
    padding: 10px 15px;
  }

  .btn--upgrade,
  .btn--downgrade {
    text-indent: -9999px;
    min-width: 38px;
    padding: 0;
    background-position: center;
  }

  .btn--add-new-act {
    position: relative;
  }

  .btn--add-new-act:after {
    content: "";
    width: 19px;
    height: 19px;
    background: url("../images-r/icons/add-activity-icon.svg") center no-repeat;
    position: absolute;
    bottom: 10px;
  }

  .btn--add-new-folder:after {
    content: "";
    width: 20px;
    height: 16px;
    background: url("../images-r/icons/folder-plus-outline-icon.svg") center no-repeat;
    position: absolute;
  }

  .library-filters__sort {
    flex-flow: column;
  }

  .slim-footer,
  .slim-footer > * {
    flex-flow: column;
  }

  .billing-plan {
    width: 95%;
    margin-bottom: 2%;
  }

  .library-recent-grades {
    flex-wrap: wrap;
  }

  .library-recent-grade {
    width: 49%;
    padding: 8px;
    margin-bottom: 2%;
  }

  .library-recent-grade__top {
    margin-bottom: 5px;
  }

  .about-col--img:nth-child(even),
  .about-col--img {
    transform: initial;
  }

  .about-col.coqui-ale {
    margin-top: 130px;
  }

  .quiz-sum-questions,
  .quiz-sum-score {
    padding: 0 0 25px;
    border: none;
  }

  .quiz-question {
    /* border-bottom: 1px solid var(--color__h5); */
    margin: 0 0 20px;
  }

  .quiz-question > * {
    width: 100%;
  }

  .btn--quiz-back {
    display: none;
  }

  .btn--quiz-bottom {
    position: absolute;
    right: initial;
    left: calc(50% - 80px);
    bottom: -20px;
  }

  .x-modal-content--stats {
    padding: 40px;
  }

  .stats-desc {
    max-width: 100%;
    margin-right: 0;
  }

  .x-modal-content {
    padding: 20px 30px 28px;
  }

  .x-modal-close {
    top: 20px;
    right: 20px;
  }

  .gp-custom-settings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

}
/* End of media 720px */

/* Media WIDTH 650px */
@media all and (max-width: 650px) {

  .activities-titles {
    display: none;
  }

  .activities-list {
    width: 100%;
    margin-top: 32px;
  }

  .activities-list__item {
    margin: 0 0 40px;
  }

  .table--teachers {
    width: 100%;
    overflow-x: auto;
  }

  .table--teachers .table-head,
  .table--teachers .table-body {
    width: 618px;
  }

}
/* End of media WIDTH 650px */

/* --- Media HEIGHT a.k.a. Compact view --- */
@media all and (max-height: 650px) {

  .btn {
    height: 56px;
    padding: 0 25px;
    font: bold 16px/18px 'Rubik', sans-serif;
  }

  .btn--small {
    height: 38px;
    padding: 0 15px;
    font-weight: 500;
  }

  .btn--sq,
  .btn--cir,
  .nbtn--slim,
  .nbtn--outline,
  .nbtn--flat,
  .nbtn {
    height: 49px;
    padding: 0 16px;
    font: bold 14px/15px 'Rubik', sans-serif;
  }

  .btn--sq,
  .btn--cir {
    width: 49px;
    padding: 0;
  }

  .btn--min {
    height: 38px;
    padding: 0 10px;
  }
  
  .header {
    padding: 10px 24px 10px;
  }
  
  .header__logo {
    height: 49px;
  }
  
  .drop__content__menu {
    /* font-size: 16px;
    line-height: 24px; */
  }

  .x-modal-wrap {
    padding-top: 27px;
  }

  .x-modal-content {
    padding: 30px 30px 28px;
  }

  .x-modal-content--coqui {
    padding: 200px 20px 20px;
  }

  .x-modal-content--stats {
    padding: 40px;
  }

  .quiz-gradebook-details .quiz-grammar-detail,
  .quiz-gradebook-details .quiz-questions-wrap {
    max-height: 300px;
  }

  .homework-gradebook-details-data {
    max-height: 250px;
  }

}
/* End of media HEIGHT 650px */

@media all and (max-width: 580px) {

  .pricing-plan-duo {
    flex-flow: column-reverse;
    align-items: center;
  }

  .pricing-plan-duo > div:last-of-type {
    margin-bottom: 40px;
  }

  .pricing-plan-wrap:nth-child(1),
  .pricing-plan-wrap:nth-child(3) {
    width: 100%;
  }

}

@media all and (max-width: 560px) {

  .drop__content--library .flex-grid {
    flex-flow: column;
  }

  .drop__content--library .col {
    padding: 0 30% 0 30px;
    border: none;
  }

  .drop__content--library ul:last-of-type,
  .drop__content--library ul {
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(166,176,195,0.2);
    margin: 0 0 20px;
  }

  .drop__content--library .col:last-of-type ul:last-of-type {
    border: none;
    padding: 0;
    margin: 0;
  }

  .drop__content--library .col:last-of-type ul:last-of-type li:last-of-type {
    padding-bottom: 0;
  }

  .drop__content--library li {
    padding: 0 0 10px 40px;
  }

  .library-wrapper {
    padding: 16px;
  }

  .library-filters {
    margin-bottom: 15px;
  }

  .table--activities .col-2 {
    justify-content: center;
  }

  .table--activities .quick-edit {
    display: none;
  }

  .activities-mobile-selector {
    width: auto;
    flex-direction: column;
  }

  .activities-mobile-selector > div:first-of-type {
    margin-bottom: 10px;
  }


  .x-modal-content.homework-gradebook-details {
    max-height: initial !important;
    padding: 30px;
    background-size: 35px auto, 35px auto;
    background-position: left bottom, right top;
  }

  .quiz-previous, .quiz-next {
    width: 20px;
    height: 20px;
    right: 5px;
  }

  .quiz-previous {
    right: auto;
    left: 5px;
  }

  .homework-gradebook-details-name {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 20px;
  }

  .homework-gradebook-details-wrap {
    align-items: flex-start;
    flex-flow: column;
    padding: 0;
  }

  .homework-gradebook-details-wrap .data-detail,
  .data-detail {
    width: 100%;
    margin-bottom: 10px;
  }

  .score-number {
    font-size: 28px;
  }

  .score-name--bottom {
    line-height: 13px;
  }

}
/* End of media 560px */

@media all and (max-width: 480px) {

  .flex-column-sm {
    flex-flow: column;
  }

  .mb-20-sm {
    margin-bottom: 20px;
  }

  .chart-improving {
    float: left;
  }

  .x-modal-content--stats {
    padding: 20px;
  }

}

@media all and (max-width: 380px) {

  .btn--drop__wrap-folders .btn {
    align-self: flex-start;
  }

}
/* End of media 380px */

@media all and (max-width: 359px) {

  .header-dashboard__middle h2 {
    width: 100%;
    text-align: center;
  }

  .header-dashboard__options > div,
  .header-dashboard__options > button {
    display: none;
  }

  .header-dashboard__options .activities-mobile-selector {
    display: flex;
  }

}
/* End of media 359px */

/* print styles go here */
@media print {

  @page {
    size: A4 Portrait;
    margin: 12.7mm !important;
  }

  * {
    overflow: visible !important;
  }

  body {
    font-size: 10pt;
    color: var(--color__b) !important;
    -webkit-print-color-adjust: exact !important;
  }

  .no-print {
    display: none !important;
  }

  .flex-column-print {
    flex-flow: column;
    align-items: flex-start;
  }

  .print_footer p {
    border-top: 1px solid var(--color__b) !important;
  }

  table {
    border: 1px solid var(--color__b) !important;
  }

  table th,
  table td {
    border: initial;
  }

  .table-invoice {
    border: none !important;
  }

  .table-invoice th,
  .table-invoice td {
    font-size: 8pt;
    padding: 5px !important;
    border-bottom: 1px solid var(--color__b) !important;
    box-shadow: none !important;
  }

  .table-invoice__amount-wrap > div {
    padding: 5px !important;
    border-bottom: 1px solid var(--color__b) !important;
  }

  .table-invoice th:not(:first-of-type) {
    width: 12.5% !important;
  }

  .table-invoice__amount-wrap {
    width: 37.5% !important;
  }

  .table-title {
    padding: 5px 0 !important;
  }

  .table.table--fat,
  .table.table--fat td,
  .table.table--fat th {
    font-size: 14pt;
    line-height: 16pt;
    padding: 5px;
  }

  .table.print-no-x-border th,
  .table.print-no-x-border td {
    border-left: none;
    border-right: none;
  }

  hr.dark {
    box-shadow: inset 0 0 0 1000px var(--color__b1);
  }

  .panel-heading,
  table th {
    box-shadow: inset 0 0 0 1000px var(--color__m2);
  }

  .grammar_worksheet {
    break-before: all;
  }

  .break-before {
    page-break-before: always;
  }

  .break-after {
    page-break-after: always;
  }

  .break {
    break-inside: auto;
    page-break-inside: auto;
  }

  .no-break {
    page-break-inside: avoid;
  }

  #printable_container .just-label,
  #printable_container h4,
  #printable_container h3,
  #printable_container h2,
  #printable_container h1,
  #printable_container .question-wrap,
  #printable_container a,
  #printable_container p,
  .print_footer p {
    color: var(--color__b) !important;
  }

  #printable_container .just-label {
    font-size: 6pt;
  }

  #printable_container h4,
  #printable_container .question-wrap,
  #printable_container p {
    font-size: 10pt;
  }

  #printable_container h3,
  #printable_container .p--big {
    font-size: 12pt;
  }

  .print-score {
    border-color: var(--color__b);
  }

  .print-instructions {
    display: block;
    padding: 10px;
    text-align: center;
    box-shadow: inset 0 0 0 1000px var(--color__m2);
  }

  input[type="text"].printable-input {
    width: 150px;
    font-size: 10pt;
    line-height: 18px;
    border-bottom: 1px solid var(--color__b);
    box-shadow: inset 0 0 0 1000px var(--color__m2);
  }

  /* Table of registered students */
  .printable-registered-students > * { display: none; }
  .printable-registered-students .modal-content { border: none; }
  .printable-registered-students x-modal .alert.alert-success,
  .printable-registered-students x-modal button { display: none; }
  .printable-registered-students .x-modal-content {
    max-width: initial!important;
    background: none;
    box-shadow: none;
  }
  .printable-registered-students x-modal { background: #fff!important; }
  .printable-registered-students x-modal .icon-message {
    max-width: initial;
    background: white;
  }

}

/* print styles - END */

.score-number {
  font-size: 21px;
  font-weight: 400;
}

/* --- HELPERS --- */
/* This should be on the very bottom of this file */

.w-0 {
  width: 0!important;
}

.w-1\/2 {
  width: 50%!important;
}

.w-1\/3 {
  width: 33.333333%!important;
}

.w-2\/3 {
  width: 66.666667%!important;
}

.w-1\/4 {
  width: 25%!important;
}

.w-2\/4 {
  width: 50%!important;
}

.w-3\/4 {
  width: 75%!important;
}

.w-1\/5 {
  width: 20%!important;
}

.w-2\/5 {
  width: 40%!important;
}

.w-3\/5 {
  width: 60%!important;
}

.w-4\/5 {
  width: 80%!important;
}

.w-1\/6 {
  width: 16.666667%!important;
}

.w-2\/6 {
  width: 33.333333%!important;
}

.w-3\/6 {
  width: 50%!important;
}

.w-4\/6 {
  width: 66.666667%!important;
}

.w-5\/6 {
  width: 83.333333%!important;
}

.w-1\/12 {
  width: 8.333333%!important;
}

.w-2\/12 {
  width: 16.666667%!important;
}

.w-3\/12 {
  width: 25%!important;
}

.w-4\/12 {
  width: 33.333333%!important;
}

.w-5\/12 {
  width: 41.666667%!important;
}

.w-6\/12 {
  width: 50%!important;
}

.w-7\/12 {
  width: 58.333333%!important;
}

.w-8\/12 {
  width: 66.666667%!important;
}

.w-9\/12 {
  width: 75%!important;
}

.w-10\/12 {
  width: 83.333333%!important;
}

.w-11\/12 {
  width: 91.666667%!important;
}

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

.w-screen {
  width: 100vw!important;
}

.w-120 {
  width: 120px;
}

.ml-a,
.ml-auto {
  margin-left: auto;
}

.mr-a {
  margin-right: auto;
}

.mx-a {
  margin-left: auto;
  margin-right: auto;
}

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

.m-5 {
  margin: 5px;
}

.m-7 {
  margin: 7px;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-5 {
  margin-left: 5px;
}

.mr-5 {
  margin-right: 5px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mr-7 {
  margin-right: 7px;
}

.ml-8 {
  margin-left: 8px;
}

.mr-8 {
  margin-right: 8px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mt-10 {
  margin-top: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mr-12 {
  margin-right: 12px;
}

.mr-14 {
  margin-right: 14px;
}

.mt-15 {
  margin-top: 15px;
}

.mr-15 {
  margin-right: 15px;
}

.ml-15 {
  margin-left: 15px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mt-16 {
  margin-top: 16px;
}

.mr-16 {
  margin-right: 16px;
}

.ml-16 {
  margin-left: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-17 {
  margin-bottom: 17px;
}

.mt-20 {
  margin-top: 20px;
} 

.mr-20 {
  margin-right: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mr-24 {
  margin-right: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

.ml-24 {
  margin-left: 24px;
}

.mt-25 {
  margin-top: 25px;
}

.ml-25 {
  margin-left: 25px;
}

.mr-25 {
  margin-right: 25px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mr-28 {
  margin-right: 28px;
}

.mt-30 {
  margin-top: 30px;
}

.mr-30 {
  margin-right: 30px;
}

.ml-30 {
  margin-left: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.my-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mr-40 {
  margin-right: 40px;
}

.ml-40 {
  margin-left: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.ml-80 {
  margin-left: 80px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mt-100 {
  margin-top: 100px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-200 {
  margin-top: 200px;
}

.mx-10,
.mlr-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.mlr-20 {
  margin-left: 20px;
  margin-right: 20px;
}

.my-10,
.mtb-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.mr-n-15 {
  margin-right: -15px;
}

.my-25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.mx-40 {
  margin-left: 40px;
  margin-right: 40px;
}

.my-50 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.my-80 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.p-5 {
  padding: 5px;
}

.p-10 {
  padding: 10px;
}

.p-15 {
  padding: 15px;
}

.p-20 {
  padding: 20px;
}

.p-60 {
  padding: 60px;
}

.py-2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.px-5,
.plr-5 {
  padding-left: 5px;
  padding-right: 5px;
}

.py-5,
.ptb-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.px-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.px-24 {
  padding-left: 24px;
  padding-right: 24px;
}

.py-10,
.ptb-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-15,
.ptb-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.py-20,
.ptb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.py-30,
.ptb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.px-40 {
  padding-left: 40px;
  padding-right: 40px;
}

.py-40,
.ptb-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.px-68 {
  padding-left: 68px;
  padding-right: 68px;
}

.py-100,
.plr-100 {
  padding-left: 100px;
  padding-right: 100px;
}

/* padding-left */
.pl-0\! {
  padding-left: 0!important;
}

.pl-0 {
  padding-left: 0;
}

.pl-20 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-24 {
  padding-left: 24px;
}

.pl-40 {
  padding-left: 40px;
}

.pr-10 {
  padding-right: 10px;
}

.pb-12 {
  padding-bottom: 12px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-24 {
  padding-right: 24px;
}

.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.pb-26 {
  padding-bottom: 26px;
}

.pb-32 {
  padding-bottom: 32px;
}

.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}

.pr-40 {
  padding-right: 40px;
}

.pb-50 {
  padding-bottom: 50px;
}

.py-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-200 { /* used with slim footer */
  padding-bottom: 200px;
}

/* Paragraph aka Text */
.fs-40 {
  font-size: 40px;
}

.fs-36 {
  font-size: 36px;
}

.fs-34 {
  font-size: 34px;
}

.fs-32 {
  font-size: 32px;
}

.fs-30 {
  font-size: 30px;
}

.fs-28 {
  font-size: 28px;
}

.fs-26 {
  font-size: 26px;
}

.fs-25 {
  font-size: 25px;
}

.fs-24 {
  font-size: 24px;
}

.fs-22 {
  font-size: 22px;
}

.fs-20 {
  font-size: 20px;
}

.fs-18 {
  font-size: 18px;
}

.fs-16 {
  font-size: 16px;
}

.fs-14 {
  font-size: 14px;
}

.fs-12 {
  font-size: 12px;
}

.p--big {
  font-size: 18px;
  line-height: 28px;
}

.p--small,
.p--footnote {
  font-size: 14px;
  line-height: 20px;
}

.p--footnote {
  margin-top: 4px;
}

.p--tiny {
  font-size: 12px;
  line-height: 15px;
}

.text--up {
  text-transform: uppercase;
}

.text--cap {
  text-transform: capitalize;
}

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

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.vertical-middle {
  vertical-align: middle;
}

.color-w {
  color: var(--color__w);
}

.color-b {
  color: var(--color__b);
}

.color-b1 {
  color: var(--color__b1);
}

.color-b2 {
  color: var(--color__b2);
}

.color-b3 {
  color: var(--color__b3);
}

.color-b4 {
  color: var(--color__b4);
}

.color-b5,
.color-text {
  color: var(--color__b5);
}

.color-b2c {
  color: #005892;
}

.color-b2w {
  color: #007AFF;
}

.color-h1 {
  color: var(--color__h1);
}

.color-h2 {
  color: var(--color__h2);
}

.color-h3 {
  color: var(--color__h3);
}

.color-h3d {
  color: #FB9A0C;
}

.color-h4 {
  color: var(--color__h4);
}

.color-h9,
div p.color-h9 {
  color: var(--color__h9);
}

.color-h9d {
  color: #06A890;
}

.color-h10 {
  color: var(--color__h10);
}

.color-h11 {
  color: var(--color__h11);
}

.color-h12,
.color-success {
  color: var(--color__h12);
}

.color-h13 {
  color: var(--color__h13);
}

.color-m1 {
  color: var(--color__m1);
}

.color-m2 {
  color: var(--color__m2);
}

.color-m3 {
  color: var(--color__m3);
}

.color-m4 {
  color: var(--color__m4);
}

.color-m4l {
  color: var(--color__m5);
}

.bg-black {
  background: var(--color__b);
}

.bg-white {
  background: var(--color__w);
}

.bg-b1 {
  background: var(--color__b1);
}

.bg-b2 {
  background: var(--color__b2);
}

.bg-b3 {
  background: var(--color__b3);
}

.bg-b4 {
  background: var(--color__b4);
}

.bg-b5 {
  background: var(--color__b5);
}

.bg-h1 {
  background-color: var(--color__h1);
}

.bg-h2 {
  background-color: var(--color__h2);
}

.bg-h3 {
  background-color: var(--color__h3);
}

.bg-h3d {
  background-color: var(--color__h3d);
}

.bg-h4 {
  background-color: var(--color__h4);
}

.bg-h5 {
  background-color: var(--color__h5);
}

.bg-h6 {
  background-color: var(--color__h6);
}

.bg-h7 {
  background-color: var(--color__h7);
}

.bg-h8 {
  background-color: var(--color__h8);
}

.bg-h9 {
  background-color: var(--color__h9);
}

.bg-h10 {
  background-color: var(--color__h10);
}

.bg-h11 {
  background: var(--color__h11);
}

.bg-success,
.bg-h12 {
  background: var(--color__h12);
}

.bg-h13 {
  background: var(--color__h13);
}

.bg-m1 {
  background: var(--color__m1);
}

.bg-m2 {
  background: var(--color__m2);
}

.bg-m3 {
  background: var(--color__m3);
}

.bg-m4 {
  background: var(--color__m4);
}

.bg-m5 {
  background: var(--color__m5);
}

.bg-m6 {
  background: var(--color__m6);
}

.bg-m7 {
  background: var(--color__m7);
}

.bg-m8 {
  background: var(--color__m8);
}

.bg-trnsparent {
  background: transparent;
}

.bg-E4F1FF {
  background: #E4F1FF;
}

.bg-DEF3F0 {
  background: #DEF3F0;
}

.bg-FFEFD9 {
  background-color: #FFEFD9;
}

.bg-F8F9FC {
  background: #F8F9FC;
}

.border-tr8 {
  border-radius: 8px 8px 0 0;
}

.border-red {
  border: 1px solid #FF0000;
}

.op--025 {
  opacity: 0.25;
}

.op--05 {
  opacity: 0.5;
}

.op--08 {
  opacity: 0.8;
}

.fw--hairline,
.fw--100 {
  font-weight: 100;
}

.fw--normal,
.fw--400 {
  font-weight: 400;
}

.fw--semibold,
.fw--600 {
  font-weight: 600;
}

.fw--bold,
.fw--700 {
  font-weight: 700;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.space-200 {
  width: 100%;
  height: 200px;
}

.space-500 {
  width: 100%;
  height: 500px;
}

.w-100\%,
.min-w-init {
  min-width: initial;
}

.min-w-130 {
  min-width: 130px;
}

.min-w-200 {
  min-width: 200px;
}

.min-w-270 {
  min-width: 270px;
}

.min-w-290 {
  min-width: 290px;
}

.w-50\% {
  width: 50%;
}

.w-100\%,
.w-100 {
  width: 100%;
}

.h-a {
  height: auto;
}

.h-40 {
  height: 40px;
}

.h-100 {
  height: 100%;
}

.no-bg {
  background: none;
}

.scale-075 {
  transform: scale(0.75);
}

.word-break {
  word-break: break-all;
}

@media (max-width: 1279px) {

  .xl\:flex-column {
    flex-flow: column;
  }

  .xl\:w-0 {
    width: 0!important;
  }

  .xl\:w-1\/2 {
    width: 50%!important;
  }

  .xl\:w-1\/3 {
    width: 33.333333%!important;
  }

  .xl\:w-2\/3 {
    width: 66.666667%!important;
  }

  .xl\:w-1\/4 {
    width: 25%!important;
  }

  .xl\:w-2\/4 {
    width: 50%!important;
  }

  .xl\:w-3\/4 {
    width: 75%!important;
  }

  .xl\:w-1\/5 {
    width: 20%!important;
  }

  .xl\:w-2\/5 {
    width: 40%!important;
  }

  .xl\:w-3\/5 {
    width: 60%!important;
  }

  .xl\:w-4\/5 {
    width: 80%!important;
  }

  .xl\:w-1\/6 {
    width: 16.666667%!important;
  }

  .xl\:w-2\/6 {
    width: 33.333333%!important;
  }

  .xl\:w-3\/6 {
    width: 50%!important;
  }

  .xl\:w-4\/6 {
    width: 66.666667%!important;
  }

  .xl\:w-5\/6 {
    width: 83.333333%!important;
  }

  .xl\:w-1\/12 {
    width: 8.333333%!important;
  }

  .xl\:w-2\/12 {
    width: 16.666667%!important;
  }

  .xl\:w-3\/12 {
    width: 25%!important;
  }

  .xl\:w-4\/12 {
    width: 33.333333%!important;
  }

  .xl\:w-5\/12 {
    width: 41.666667%!important;
  }

  .xl\:w-6\/12 {
    width: 50%!important;
  }

  .xl\:w-7\/12 {
    width: 58.333333%!important;
  }

  .xl\:w-8\/12 {
    width: 66.666667%!important;
  }

  .xl\:w-9\/12 {
    width: 75%!important;
  }

  .xl\:w-10\/12 {
    width: 83.333333%!important;
  }

  .xl\:w-11\/12 {
    width: 91.666667%!important;
  }

  .xl\:w-full {
    width: 100%!important;
  }

} /* max-width: 1279px - END */

@media (max-width: 991px) {

  .lg\:hidden {
    display: none !important;
  }

  .lg\:flex-column {
    flex-flow: column;
  }

  .lg\:hidden {
    display: none !important;
  }

  .lg\:w-0 {
    width: 0!important;
  }

  .lg\:w-1\/2 {
    width: 50%!important;
  }

  .lg\:w-1\/3 {
    width: 33.333333%!important;
  }

  .lg\:w-2\/3 {
    width: 66.666667%!important;
  }

  .lg\:w-1\/4 {
    width: 25%!important;
  }

  .lg\:w-2\/4 {
    width: 50%!important;
  }

  .lg\:w-3\/4 {
    width: 75%!important;
  }

  .lg\:w-1\/5 {
    width: 20%!important;
  }

  .lg\:w-2\/5 {
    width: 40%!important;
  }

  .lg\:w-3\/5 {
    width: 60%!important;
  }

  .lg\:w-4\/5 {
    width: 80%!important;
  }

  .lg\:w-1\/6 {
    width: 16.666667%!important;
  }

  .lg\:w-2\/6 {
    width: 33.333333%!important;
  }

  .lg\:w-3\/6 {
    width: 50%!important;
  }

  .lg\:w-4\/6 {
    width: 66.666667%!important;
  }

  .lg\:w-5\/6 {
    width: 83.333333%!important;
  }

  .lg\:w-1\/12 {
    width: 8.333333%!important;
  }

  .lg\:w-2\/12 {
    width: 16.666667%!important;
  }

  .lg\:w-3\/12 {
    width: 25%!important;
  }

  .lg\:w-4\/12 {
    width: 33.333333%!important;
  }

  .lg\:w-5\/12 {
    width: 41.666667%!important;
  }

  .lg\:w-6\/12 {
    width: 50%!important;
  }

  .lg\:w-7\/12 {
    width: 58.333333%!important;
  }

  .lg\:w-8\/12 {
    width: 66.666667%!important;
  }

  .lg\:w-9\/12 {
    width: 75%!important;
  }

  .lg\:w-10\/12 {
    width: 83.333333%!important;
  }

  .lg\:w-11\/12 {
    width: 91.666667%!important;
  }

  .lg\:w-full {
    width: 100%!important;
  }

  .lg\:my-15- {
    margin-left: -15px;
    margin-right: -15px;
  }

  .lg\:m-0 {
    margin: 0 !important;
  }

  .lg\:mx-0 {
    margin-left: 0;
    margin-right: 0;
  }

  .lg\:mb-24 {
    margin-bottom: 24px;
  }

  .lg\:mt-24 {
    margin-top: 24px;
  }

  .lg\:my-40 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .lg\:mb-40 {
    margin-bottom: 40px;
  }

  .lg\:brd-0 {
    border: none!important;
  }

} /* max-width: 991px - END */

@media (max-width: 720px) {

  .md\:hidden,
  .desk-only {
    display: none !important;
  }

  .md\:overflow-hidden {
    overflow: hidden;
  }

  .md\:flex {
    display: flex;
  }

  .md\:flex-row,
  .flex-row-mob {
    flex-flow: row;
  }

  .md\:flex-column,
  .flex-column-mob {
    flex-flow: column;
  }

  .md\:flex-column-r,
  .flex-column-r-mob {
    flex-flow: column-reverse;
  }

  .md\:items-start,
  .flex-align-start-mob {
    align-items: flex-start;
  }

  .md\:self-start,
  .flex-self-start-mob {
    align-self: flex-start;
  }

  .md\:flex-wrap,
  .flex-wrap-mob {
    flex-wrap: wrap;
  }

  .md\:flex-end {
    justify-content: flex-end;
  }

  .md\:my-45- {
    margin-left: -45px;
    margin-right: -45px;
  }

  .md\:px-15 {
    padding-left: 15px;
    padding-right: 15px;
  }

  .md\:p-0 {
    padding: 0px;
  }

  .md\:p-20 {
    padding: 20px;
  }

  .md\:pt-20 {
    padding-top: 20px;
  }

  .md\:m-0,
  .m-0-mob {
    margin: 0;
  }

  .md\:ml-a {
    margin-left: auto;
  }

  .md\:ml-0 {
    margin-left: 0px;
  }

  .md\:m-5,
  .m-5-mob {
    margin: 5px;
  }

  .md\:mt-15 {
    margin-top: 15px;
  }

  .md\:mt-20,
  .mt-20-mob {
    margin-top: 20px;
  }

  .md\:mb-20,
  .mb-20-mob {
    margin-bottom: 20px;
  }

  .md\:mb-80,
  .mb-80-mob {
    margin-bottom: 80px;
  }

  .md\:w-0 {
    width: 0!important;
  }

  .md\:w-1\/2 {
    width: 50%!important;
  }

  .md\:w-1\/3 {
    width: 33.333333%!important;
  }

  .md\:w-2\/3 {
    width: 66.666667%!important;
  }

  .md\:w-1\/4 {
    width: 25%!important;
  }

  .md\:w-2\/4 {
    width: 50%!important;
  }

  .md\:w-3\/4 {
    width: 75%!important;
  }

  .md\:w-1\/5 {
    width: 20%!important;
  }

  .md\:w-2\/5 {
    width: 40%!important;
  }

  .md\:w-3\/5 {
    width: 60%!important;
  }

  .md\:w-4\/5 {
    width: 80%!important;
  }

  .md\:w-1\/6 {
    width: 16.666667%!important;
  }

  .md\:w-2\/6 {
    width: 33.333333%!important;
  }

  .md\:w-3\/6 {
    width: 50%!important;
  }

  .md\:w-4\/6 {
    width: 66.666667%!important;
  }

  .md\:w-5\/6 {
    width: 83.333333%!important;
  }

  .md\:w-1\/12 {
    width: 8.333333%!important;
  }

  .md\:w-2\/12 {
    width: 16.666667%!important;
  }

  .md\:w-3\/12 {
    width: 25%!important;
  }

  .md\:w-4\/12 {
    width: 33.333333%!important;
  }

  .md\:w-5\/12 {
    width: 41.666667%!important;
  }

  .md\:w-6\/12 {
    width: 50%!important;
  }

  .md\:w-7\/12 {
    width: 58.333333%!important;
  }

  .md\:w-8\/12 {
    width: 66.666667%!important;
  }

  .md\:w-9\/12 {
    width: 75%!important;
  }

  .md\:w-10\/12 {
    width: 83.333333%!important;
  }

  .md\:w-11\/12 {
    width: 91.666667%!important;
  }

  .md\:w-full {
    width: 100%!important;
  }

  .md\:w-42px {
    width: 42px!important;
  }

  .md\:brd-0 {
    border: none!important;
  }

  .md\:pos-stc {
    position: static;
  }

  .md\:fs-24 {
    font-size: 24px;
  }

} /* max-width: 720px - END */

@media (max-width: 480px) {

  .sm\:items-center {
    align-items: center;
  }

  .sm\:flex-column {
    flex-flow: column;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:self-start {
    align-self: flex-start;
  }

  .sm\:hidden {
    display: none !important;
  }

  .sm\:mb-20 {
    margin-bottom: 20px;
  }

  .sm\:ml-a {
    margin-left: auto;
  }

  .sm\:m-5 {
    margin: 5px;
  }

  .sm\:mr-5 {
    margin-right: 5px;
  }

  .sm\:mr-10 {
    margin-right: 10px;
  }

  .sm\:ml-15 {
    margin-left: 15px;
  }

  .sm\:mr-15 {
    margin-right: 15px;
  }

  .sm\:mb-24 {
    margin-bottom: 24px;
  }

  .sm\:w-0 {
    width: 0!important;
  }

  .sm\:w-1\/2 {
    width: 50%!important;
  }

  .sm\:w-1\/3 {
    width: 33.333333%!important;
  }

  .sm\:w-2\/3 {
    width: 66.666667%!important;
  }

  .sm\:w-1\/4 {
    width: 25%!important;
  }

  .sm\:w-2\/4 {
    width: 50%!important;
  }

  .sm\:w-3\/4 {
    width: 75%!important;
  }

  .sm\:w-1\/5 {
    width: 20%!important;
  }

  .sm\:w-2\/5 {
    width: 40%!important;
  }

  .sm\:w-3\/5 {
    width: 60%!important;
  }

  .sm\:w-4\/5 {
    width: 80%!important;
  }

  .sm\:w-1\/6 {
    width: 16.666667%!important;
  }

  .sm\:w-2\/6 {
    width: 33.333333%!important;
  }

  .sm\:w-3\/6 {
    width: 50%!important;
  }

  .sm\:w-4\/6 {
    width: 66.666667%!important;
  }

  .sm\:w-5\/6 {
    width: 83.333333%!important;
  }

  .sm\:w-1\/12 {
    width: 8.333333%!important;
  }

  .sm\:w-2\/12 {
    width: 16.666667%!important;
  }

  .sm\:w-3\/12 {
    width: 25%!important;
  }

  .sm\:w-4\/12 {
    width: 33.333333%!important;
  }

  .sm\:w-5\/12 {
    width: 41.666667%!important;
  }

  .sm\:w-6\/12 {
    width: 50%!important;
  }

  .sm\:w-7\/12 {
    width: 58.333333%!important;
  }

  .sm\:w-8\/12 {
    width: 66.666667%!important;
  }

  .sm\:w-9\/12 {
    width: 75%!important;
  }

  .sm\:w-10\/12 {
    width: 83.333333%!important;
  }

  .sm\:w-11\/12 {
    width: 91.666667%!important;
  }

  .sm\:w-full {
    width: 100%!important;
  }

  .sm\:fs-14 {
    font-size: 14px;
  }
} /* max-width: 480px - END */

/* Error report */
@keyframes warning {
  33% {
    transform: rotate(10deg);
  }

  66% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}

.js-error-log {
  background: var(--color__h2);
}

.js-error-log.animate {
  animation: warning 300ms ease-in-out infinite;
}

/* --- HELPERS - END --- */
/* ---

------ !!! NOTHING BEYOND THIS LINE !!! ------

 --- */