@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 {
  /* 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;

  /* Google Classroom */
 --color__purple:    #673AB7;
 --color__purple-2:  #F0EBF8;

 --color__indigo:    #3F51B5;
 --color__indigo-2:  #ECEEF8;

  --color__blue:     #4285F4;
  --color__blue-2:   #E3EDFD;
  --color__blue-3: #1192E5;

  --color__l-blue:   #03A9F4;
  --color__l-blue-2: #D9F2FD;

  --color__cyan:     #00BCD4;
  --color__cyan-2:   #D9F5F9;

  --color__red:      #DB4437;
  --color__red-2:    #FAE3E1;
  
  --color__red-o:    #FF5722;
  --color__red-o-2:  #FFE6DE;

  --color__orange:   #FF9800;
  --color__orange-2: #FFF0D9;

  --color__teal:     #009688;
  --color__teal-2:   #D9EFED;

  --color__green:    #4CAF50;
  --color__green-2:  #E4F3E5;

  --color__b-gray:   #607D8B;
  --color__b-gray-2: #E7ECEE;

  --color__gray:     #9E9E9E;
  --color__gray-2:   #F0F0F0;

  --color__text:     #202124;
  --color__text-2:   #3C4043;
  --color__text-3:   #5F6368;

  --color__brightest: #F8F9FA;

 /* 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: 1.5;
  font-family: 'Rubik', sans-serif;
  /* color: #3C4043; */
  color: var(--color__text);
  background: var(--color__w);
  padding: 0;
  margin: 0;
  position: relative; /* for footer */
  display: flex;
  flex-direction: column;
}

.no-scroll {
  overflow: hidden;
}

.scroll-space {
  padding-right: 15px;
}

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;
}

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;
  font-weight: 600;
  color: var(--color__m1); */
  /* margin-bottom: 24px; */
  font-size: 32px;
  line-height: 35px;
  font-weight: bold;
  color: var(--color__b5);
}

.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;
}

strong {
  font-weight: 600;
}

a {
  vertical-align: baseline;
  text-decoration: none;
  color: var(--color__blue);
}
.hover--underline:hover {
  text-decoration: underline;
 }
 
.cookie-confirm {
  width: 100%;
  padding: 23px;
  color: var(--color__orange);
  background: var(--color__orange-2);
  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,
.sm-only,
.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;
}

.events-none {
  pointer-events: none!important;
}

.disabled,
[disabled],
.btn[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  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;
}

.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-fluid,
.container {
  width: 100%;
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  /* overflow: hidden; */ /* this can never be */
}

.printable-container {
  min-height: calc(100vh - 105px);
}

#quiz_table {
  white-space: break-spaces;
}

.white-space-normal {
  white-space: normal;
}

.container-fluid {
    max-width: initial;
}

/* --- 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;
}

/* 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;
}

.d-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* --- 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--outline-p,
.btn--outline-2ry,
.btn--outline-lt,
.btn--red-o,
.btn--outline,
.btn--l-blue,
.btn--p,
.btn--2ry,
.btn--attn,
.btn {
  height: 36px;
  padding: 0 10px;
  color: var(--color__m8); background: var(--color__blue);
  border-radius: 4px;
  font: 500 14px/16px 'Rubik', sans-serif;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none;
  transition: all 0.2s ease-in;
}

.btn--auth-button {
  padding: 12px;
  height: auto;
  width: 150px;
}

.login-form {
  width: 500px;
}

.g-signin2:empty {
  display: block;
  width: 500px;
  height: 40px;
  border: 1px solid #dadce0;
}

.g-signin2 div {
  max-width: none!important;
}

.login-button {
  display: flex;
  align-items: center;
  width: 500px;
  height: 40px;
  padding: 0 12px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #dadce0;
  font-size: 14px;
  color: #3c4043;
}

.login-button:hover {
  background: rgba(66, 133, 244, .04);
  border-color: #d2e3fc;
}

.login-button span:not(.icon) {
  margin: auto;
}

.btn:hover {
    color: var(--color__blue); background-color: var(--color__blue-2);
}

.btn--attn {
    background-color: var(--color__red);
}

.btn--attn:hover {
    color: var(--color__red); background-color: var(--color__red-2);
}

.btn--2ry {
    background-color: var(--color__orange);
}

.btn--2ry:hover,
.active .btn--2ry {
    color: var(--color__orange); background-color: var(--color__orange-2);
}

.btn--outline {
    color: var(--color__text-3); background-color: var(--color__brightest);
    border: 1px solid var(--color__text-3);
}

.btn--outline-blue {
    color: var(--color__blue);
    background-color: var(--color__w);
    border: 1px solid var(--color__blue);
}


.btn--outline:hover {
  border: 1px solid var(--color__blue);
  color: var(--color__blue); background-color: var(--color__blue-2);
}

.btn--outline-lt {
  border: 1px solid #E0E0E0;
  color: var(--color__text-3); background-color: #FFFFFF;
}

.btn--outline-2ry,
.btn--outline-lt:hover,
.active .btn--outline-lt {
  border: 1px solid var(--color__orange);
  color: var(--color__orange); background-color: var(--color__orange-2);
}

.btn--cir-2ry,
.btn--cir-outline,
.btn--cir {
  width: 40px;
  min-width: 40px;
  height: 40px;
  color: var(--color__text-3); background-color: var(--color__brightest);
  border-radius: 50%;
  font: 500 14px/16px 'Rubik', sans-serif;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none;
  transition: all 0.2s ease-in;
}

.btn--cir-outline {
  border: 2px solid var(--color__text-3);
}

.btn--cir-outline:hover,
.btn--cir:hover {
  color: var(--color__blue); background-color: var(--color__blue-2);
}

.btn--cir-outline:hover {
  border: 2px solid var(--color__blue);
}

.btn--cir-2ry {
    color: var(--color__orange);
    background-color: transparent;
    border: 1px solid transparent;
}

.btn--cir-2ry:hover {
    background-color: var(--color__orange-2);
    border-color: var(--color__orange);
}

.btn--trn {
  border-color: transparent;
  background-color: transparent;
}

.btn--trn:hover {
  background-color: var(--color__blue-2);
}

.btn--outline-p {
    color: var(--color__purple);
    background-color: var(--color__w);
    border: 1px solid var(--color__purple);
}

.btn--outline-p:hover {
    background-color: var(--color__purple-2);
}

.btn--p {
    color: var(--color__w);
    background-color: var(--color__purple);
}

.btn--p:hover {
    color: var(--color__purple);
    background-color: var(--color__purple-2);
    border: 1px solid var(--color__purple);
}

.btn--l-blue {
    color: var(--color__w);
    background-color: var(--color__l-blue);
}

.btn--l-blue:hover {
    color: var(--color__l-blue);
    background-color: var(--color__l-blue-2);
    border: 1px solid var(--color__l-blue);
}

.btn--red-o {
    color: var(--color__w);
    background-color: var(--color__red-o);
}

.btn--red-o:hover {
    color: var(--color__red-o);
    background-color: var(--color__red-o-2);
    border: 1px solid var(--color__red-o);
}

/* --- Google Login Btn --- */
#my-signin2 > div {
    width: 210px !important;
    box-shadow: none;
}

.nbtn--sq,
.nbtn--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;
}

.nbtn--sq,
.nbtn--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;
}

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

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

.nbtn--sq:after,
.nbtn--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: 36px;
  /* padding: 0 8px; */
  font: 500 14px/16px 'Rubik', sans-serif;
}

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

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

.btn--radius-big {
  height: 48px;
  padding: 0 20px;
  font: 700 16px/20px 'Rubik', sans-serif;
  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__blue);
  background: transparent;
}

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

.btn--bulk {
  color: var(--color__b4);
  background: var(--color__m5);
}

.btn--upgrade,
.btn--downgrade {
  width: 163px;
  height: 38px;
  color: var(--color__w);
  background: var(--color__h3);
}

.btn--downgrade {
  color: var(--color__m1);
  background: var(--color__w);
  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--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: 4px;
}

.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 {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  margin-right: 24px;
  cursor: pointer;
}

.btn--drop:after {
  width: 16px;
  height: 16px;
  content: "\e991";
  font-size: 10px; line-height: 16px; font-family: 'coqui';
  text-align: center;
  position: absolute;
  top: calc(50% - 8px);
  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;
}

.class-selector-dropdown {
  border: 1px solid #bbb;
  padding: 5px 10px;
  border-radius: 5px;
  background: #efefef;
}

.btn--img img,
.no-arrow img {
  display: block;
  margin: 0 auto;
}
/* - 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,
.drop__content--user {
  /* add individual class .min-w-200 */
  min-width: 100%; /* not to be short then button */
  padding: 0px;
  /* background: var(--color__w); */
  background: var(--color__brightest);
  /* box-shadow: 0px 48px 64px 4px rgba(11, 79, 130, 0.33); */
  box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 2px 6px 2px rgba(60, 64, 67, 0.15);
  white-space: nowrap;
  border-radius: 8px;
  position: absolute;
  top: calc(100%);
  left: 0px;
  z-index: 50;
  overflow: hidden;
  display: none;
}

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

.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;
}

.no-arrow:after {
  display: none;
}

.no-arrow + .drop__content--right,
.no-arrow + .drop__content--bubble-right {
  right: 0px;
}

.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%;
  z-index: 10000;
}

.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-none {
    border: none !important;
}

.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; */
  padding: 24px;
  font-size: 20px;
  /* line-height: 36px; */
  line-height: 22px;
  font-weight: bold;
  color: var(--color__text);
  background: var(--color__l-blue-2);
}

.drop__content__menu {
    font: 400 16px/32px 'Rubik', sans-serif;
    display: block;
    padding: 8px 24px 8px 24px;
    color: var(--color__text-2);
    display: flex; align-items: center;
    overflow: hidden; /* necessary for Verb Settings modal */
}

.drop__content__menu:hover {
  background: var(--color__blue-2);
}

.drop__content__menu.active {
  color: var(--color__blue);
}

.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 16px/21px 'Rubik', sans-serif;
  border-radius: 17px;
  color: var(--color__w);
  background-color: var(--color__red);
  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 --- */
/* --- HEADER --- */
.header-wrap {
  width: 100%;
  background: var(--color__w);
  border-bottom: 1px solid #E0E0E0;
  position: fixed; left: 0; top: 0; z-index: 10;
}

.header-wrap.sticky-shadow {
	box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3),0 2px 6px 2px rgba(60,64,67,0.15);
	border-bottom: 0;
}

.header-wrap.activity {
    position: sticky;
    top: 0px;
    z-index: 999;
    border-bottom: none;
}

.header {
    width: 100%;
    height: 64px;
    padding: 0 24px 0 12px;
    display: flex; align-items: center; flex-wrap: wrap;
    position: relative;
}

.header-wrap.activity .header {
    height: initial;
    padding: 13px 24px 14px;
    background: var(--color__b3);
}

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

.header-title {
  font: 400 22px/28px 'Rubik', sans-serif;
}

/* slide from left */
.header-top-nav {
  height: 100%;
  display: flex;
  position: absolute;
  top: 0; left: 50%;
  transform: translate3d(-50%,0,0);
}

.header-top-nav__link,
.header-top-nav > a {
    height: 100%;
    padding: 0 24px;
    font: 500 14px/20px 'Rubik', sans-serif;
    color: var(--color__text);
    display: flex; justify-content: center; align-items: center;
    position: relative;
}

.header-top-nav__link .btn--drop {
    font: 500 14px/20px 'Rubik', sans-serif;
}

.header-top-nav__link:hover:after,
.header-top-nav__link.active:after,
.header-top-nav > a:hover:after,
.header-top-nav > a.active:after {
    content: "";
    width: 100%; height: 0;
    border-top-width: 0.25rem;
    border-top-style: solid;
    border-radius: 0.25rem 0.25rem 0 0;
    border-color: var(--color__blue);
    position: absolute; left: 0; bottom: 0;
}

.header-top-nav__link:not(.active):hover:after,
.header-top-nav > a:not(.active):hover:after {
  border: none;
}

.header-top-nav__link:not(.active):hover,
.header-top-nav > a:not(.active):hover {
  background: #f6f6f6;
}

.header-wrap.student .header-top-nav > a {
    color: var(--color__w);
}

.header-wrap.student .header-top-nav > a:hover:after,
.header-wrap.student .header-top-nav > a.active:after {
    border-color: var(--color__w);
}

.header-spacer {
    width: 100%;
    height: 126px; /* same height as .header-wrap */
}

.header-spacer.student {
    height: 157px;
}

.left-nav {
  width: 200px;
  height: 100vh;
  /* height: calc(100vh - 96px); */
  color: var(--color__b2); background: rgba(0,0,0,0.1);
  border-radius: 0;
  display: flex; justify-content: flex-start;
  box-shadow: none;
  position: fixed; top: 0; left: 0; bottom: initial; right: initial; z-index: 15;
}

.slide-hide {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out;
  animation:hrUiDrawerOut .3s cubic-bezier(0.0,0.0,0.2,1) forwards;
}

.slide-in {
  animation: hrUiDrawerIn .3s cubic-bezier(0.0,0.0,0.2,1) forwards;
}

@keyframes hrUiDrawerIn {
  0% {
    transform:translatex(-310px)
  }
  to {
    ransform:translatex(0)
  }
 }

 @keyframes hrUiDrawerOut {
  0% {
    transform:translatex(0)
  }
  to {
    transform:translatex(-310px)
  }
 }

.left-nav-a,
.sidebar-a {
  width: 100%; max-width: 270px;
  border-radius: 0 32px 32px 0;
  font: 400 14px/55px 'Rubik', sans-serif;
  color: var(--color__text);
  display: flex; align-items: center;
  cursor: pointer;
}

.left-nav-a.active,
.left-nav-a:hover,
.sidebar-a.active,
.sidebar-a:hover {
  color: var(--color__blue);
  /* background: var(--color__blue-2); */
}

.sidebar-a.toggle {
  flex-flow: column;
}

.sidebar-toggle-cont {
  width: 100%;
  padding: 0 24px;
  display: flex;
  flex-flow: column;
  font: 400 14px/16px 'Rubik', sans-serif;
  color: var(--color__text-3);
}

.sidebar-toggle-cont > * {
  font: 400 14px/20px 'Rubik', sans-serif;
  margin: 12px 0;
}

.sidebar-toggle-cont > *:last-of-type {
  margin-bottom: 24px;
}

.sidebar-a.toggle [data-toggle] {
  width: 100%;
  padding: 0 0 0 25px;
  display: flex; align-items: center;
}

.sidebar-separator {
  width: 100%; height: 1px;
  background-color: #E0E0E0;
  margin: 8px 0;
}

.left-nav__inner {
  width: 100%;
  padding: 8px 0;
  display: flex;
  flex-flow: column;
  background-color: var(--color__w);
  box-shadow: 0px 4px 4px rgba(60, 64, 67, 0.3), 0px 8px 12px 6px rgba(60, 64, 67, 0.15);
}

.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 .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 24px;
  border-bottom: 1px solid var(--color__m6);
  margin: 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);
}

.header__logo {
    width: 25px;
    height: 25px;
    background: url('/images-r/coqui/coqui-flat-icon-mono.svg') center / auto 100% no-repeat;
    display: flex; align-items: center;
    margin-right: 11px;
}

.header__logo--tube {
  position: absolute;
  top: 12px;
  left: calc(50% - 59px);
}

.header-wrap.student .header__logo,
.header-wrap.activity .header__logo {
    background-image: url('/images-r/coqui/coqui-flat.svg');
    position: relative;
}

.header-wrap.activity .header__logo:after {
    content: 'Conjuguemos';
    color: var(--color__w);
    font-size: 20px;
    font-weight: bold;
    position: absolute; left: 36px;
}

.header-subbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 24px;
  border-top: 1px solid #E0E0E0;
  background: var(--color__w);
  cursor: pointer;
}

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

.corner-tag {
    position: absolute;
    display: block;
    border: 17px solid var(--color__orange);
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.corner-tag span {
    color: #fff!important;
    transform: rotate(-45deg);
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 10px;
    font-weight: bold;
}

.header-subbar-code {
  display: flex; flex-flow: column;
  /* margin: 0 auto 0 40px; */
  margin: 0 auto 0 24px;
}

.header-subbar-code p {
  font: 400 12px/16px 'Rubik', sans-serif;
  color: var(--color__text-3);
}

.header-subbar-code span {
  font: 500 16px/20px 'Rubik', sans-serif;
  color: var(--color__orange);
}

.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;
}

.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); */
  color: #202124;
}

/* .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;
}

.center-header__icon--swedish,
.swedish,
.flag-swd {
  background: url('../images-r/flags/swd.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__close {
  width: 32px;
  height: 32px;
  display: flex;
  margin-right: 20px;
  color: var(--color__w);
  cursor: pointer;
  align-items: center;
}

.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: 48px;
  height: 48px;
  padding: 17px 15px;
  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: 16; */
  /* display: none; */
}

.hamburger-icon > .line {
  display: block;
  background: #3C4043;
  /* 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 {
    font-size: 18px; line-height: 20px;
    color: var(--color__red-o);
    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(0, 0, 0, .5);
  visibility: hidden;
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  transition: all .3s;
}

.cg-overlay.visible {
  visibility: visible;
  opacity: 1;
  transition: all .3s;
}

/* - Login - */
.register-wrapper,
.payment-form-wrapper,
.login-wrapper {
  max-width: 650px;
  margin: 0 auto 100px;
  padding: 0 20px;
}

.payment-form-wrapper {
  max-width: 800px;
}

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

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

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


/* - Teacher Library - */
.library-wrapper {
  /* padding: 0 20px; */
  padding: 0 24px 0 48px;
  display: flex;
}

.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%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.search-select-wrap {
    display: flex; align-items: center;
    border: 1px solid #E8EAED;
    border-radius: 4px;
    background-color: #FFFFFF;
    padding-left: 10px;
}

.library-filters__search {
  /* width: 280px; */
  width: 170px;
  position: relative;
}

.gradebook-filters__search {
  width: 500px;
}

.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 5px 5px 26px;
  font-size: 14px;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-filters__search:before {
  content: "\e950";
  font-family: 'coqui';
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 5px;
  z-index: 2;
}

input[type="text"].filter-search-input--filled {
  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: 200px;
}

.select-wrapper--library-filters select {
    font: 500 14px/20px 'Rubik', sans-serif;
    padding: 8px 41px 8px 4px;
    border-radius: 0;
    border: none;
    color: var(--color__text-3);
    background: transparent;
}

.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;
  margin-right: -20px; /* to neutralize the last filter */
}

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

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

.library-sidebar {
    width: 300px;
    min-width: 300px;
    margin-top: 96px;
    margin-right: 48px;
    border: 1px solid #E0E0E0;
    position: relative;
}

.gradebook-filters-wrapper {
  margin-top: 0px;
}

.library-sidebar--links {
    /* max-height: 330px; */
    overflow-y: visible;
    list-style: none;
    background: var(--color__w);
    display: flex; flex-direction: column;
}

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

.library-sidebar--links li .library-sidebar__folder-options {
    display: flex;
}

.sidebar-icon-title {
    padding-left: 24px;
    font-size: 16px;
    line-height: 63px;
    font-weight: 500;
    color: var(--color__text);
    background: var(--color__w);
    border-bottom: 1px solid #E0E0E0;
    display: flex; align-items: center;
}

.library-sidebar__link {
  width: 100%;
  /* max-width: 292px; */
  max-width: 260px;
  /* padding: 0 70px; */
  padding: 0 50px 0 25px;
  border-radius: 0 32px 32px 0;
  display: block;
  font: 400 14px/55px 'Rubik', sans-serif;
  letter-spacing: 1px;
  /* cursor: pointer; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  color: var(--color__text);
}

a.library-sidebar__link:hover,
.library-sidebar__link[current] {
  color: var(--color__blue);
}

a.hover--blue:hover,
a.hover--blue:hover div {
  color: var(--color__blue)!important;
}

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

.library-sidebar__folder-options {
  position: absolute;
  top: calc(50% - 15px);
  right: 4px;
  /* 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 {
  /* min-width: calc(100% - 240px); */
  min-width: 0;
  flex-grow: 1;
}

.gradebook-table {
  font-size: 15px;
  margin-top: 16px;
}

.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__m5); */
  background: #d5d8dd;
}

.gradebook-table-wrapper .table-head__cell.current-sort a {
  /* color: #FFFFFF; */
  color: var(--color__b3);
}

.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);
}

.sort-link .icon {
  position: absolute;
  margin-top: 3px;
}

.sort-link {
  color: var(--color__gray);
}

.sort-link.current-sort {
  color: var(--color__b);
}

.sort-link.sort-dir-asc .icon {
  transform: rotate(180deg);
}
.sort-link:hover .icon {
  color:#EA4892;
}
.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 {
    min-width: 110px;
    padding: 4px 0;
    /* border-radius: 13px; */
    border-radius: 4px;
    color: #FFFFFF; background: var(--color__red-2);
    font-size: 12px; line-height: 16px;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap;
    border: 1px solid var(--color__red);
}

.gradebook-activity-type--quiz {
    color: var(--color__orange);
    background: var(--color__orange-2);
    border-color: var(--color__orange);
}

.gradebook-activity-type--homework {
    color: var(--color__teal);
    background: var(--color__teal-2);
    border-color: var(--color__teal);
}

.gradebook-activity-type--game {
    color: var(--color__l-blue);
    background: var(--color__l-blue-2);
    border-color: var(--color__l-blue);
}

.gradebook-activity-type--flashcard {
    color: var(--color__red);
    background: var(--color__red-2);
    border-color: var(--color__red);
}

.gradebook-activity-type--assignment {
    color: var(--color__purple);
    background: var(--color__purple-2);
    border-color: var(--color__purple);
}

.gradebook-activity-type--tube {
    color: var(--color__indigo);
    background: var(--color__indigo-2);
    border-color: var(--color__indigo);
}

.table--teachers,
.table--activities {
    /* display: flex; */ /* never! */
    position: relative;
}

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

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

.table-head__cell {
    padding: 0 24px;
    display: flex; align-items: center;
}

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

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

.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-row {
    display: flex;
    border-bottom: 1px solid var(--color__m6);
}

.table-sort-row .table-head__cell {
    padding: 10px 24px;
}

.table-sort {
    /* width: 100%; */
    padding-right: 18px;
    font: 400 12px/16px 'Rubik', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color__text-3);
    position: relative;
}

.table-sort:after {
    content: '\e92f';
    font-family: 'coqui'; font-size: 10px;
    /* color: var(--color__text-3); */
    position: absolute; top: 0; right: 0;
}

.table-sort.active {
    color: var(--color__orange);
}

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

.grid-cell {
    display: grid;
    grid-template-columns: 82px repeat(5, 40px);
    grid-gap: 0 10px;
}

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

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

.row-number {
    min-width: 46px;
    counter-increment: row-counter;
}

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

.cell-classes {
  color: var(--color__text-3);
  font: normal 12px/16px 'Rubik', sans-serif;
}

.cell-classes br {
  display: none;
}

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

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

.w30vw {
    width: 30vw;
}

text-ellipsis.w30vw {
    width: 30vw;
}

text-ellipsis.w25vw {
    width: 25vw;
}

@media (max-width: 1300px) and (min-width: 1170px) {
  .table-body .w30vw {
    width: 25vw;
  }
}

text-ellipsis.w20vw {
    width: 20vw;
}

text-ellipsis a {
    display: inline;
}

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 {
    border: none !important;
}

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

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

.features--premium,
.features--limited {
  width: 96px;
  letter-spacing: 0.2px;
  color: var(--color__orange);
  position: relative;
}

.features--limited {
  color: var(--color__gray);
}

.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 .table-body__row {
    border-bottom: 1px solid var(--color__l-blue);
}

.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;
}

/* Slim Table */
.table-slim {
    min-width: auto;
    max-height: 320px;
    overflow-y: scroll;
    position: relative;
}

.table-slim .table-head {
    position: sticky;
}

.table-slim .table-body {
    font-size: 14px;
    line-height: 16px;
}

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

.table-slim .table-body__cell:first-of-type {
    background: var(--color__brightest);
}

/* - Registration - */
.register-options {
    width: 100%;
    max-width: 1044px;
    padding: 0 24px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 48px;
}

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

.register-column-title {
    line-height: 20px; font-weight: 500;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color__text-2);
    margin-bottom: 24px;
    text-align: center;
}

.register-item {
    padding: 30px 24px 24px;
    color: var(--color__l-blue); background-color: var(--color__l-blue-2);
    font-size: 18px; line-height: 22px;
    text-align: center;
    border-radius: 16px;
    border: 2px solid var(--color__l-blue);
    display: flex; flex-flow: column;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in;
}

.register-item p {
    line-height: 22px;
    color: var(--color__text);
}

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

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

.register-item--tch {
    color: var(--color__purple);
    background-color: var(--color__purple-2);
    border: 2px solid var(--color__purple);
}

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

.register-item--ins {
    color: var(--color__red-o);
    background-color: var(--color__red-o-2);
    border: 2px solid var(--color__red-o);
}
  
.register-item--ins:hover {
    color: var(--color__w);
    background-color: var(--color__red-o);
}

.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: '\e98a';
  font-family: 'coqui' !important;
  font-size: 35px;
  font-weight: normal;
  line-height: 1;
  color: var(--color__text-3);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
}

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

.search-result {
  padding: 24px 32px;
  border: 1px solid #80868B;
  margin-bottom: 24px;
  border-radius: 4px;
}

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

.grades-single-quiz .th a:hover,
.grades-single-quiz .th a {
  font-size: 20px;
  line-height: 20px;
  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: 18px; height: 18px;
    display: grid;
    place-items: center;
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10000;
    cursor: pointer;
}

.x-modal-close:before {
    content: "\e965";
    font-size: 18px;
    line-height: 18px;
    font-family: 'coqui';
}

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

.x-modal-content {
  width: 95vw;
  /* max-width: 450px; */
  max-width: 500px;
  padding: 24px;
  background-color: var(--color__w);
  box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 2px 6px 2px rgba(60, 64, 67, 0.15);
  border-radius: 8px;
  position: relative;
}

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

.quick-edit-cont {
  width: 100%;
  padding: 13px 15px;
  margin-bottom: 24px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 32px;
  color: var(--color__h1);
  background-color: var(--color__m5);
  border: 2px solid var(--color__h1);
  display: flex; align-items: center; justify-content: space-between;
  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: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  margin: 15px auto 0;
  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__blue-2);
  border-color: var(--color__blue-2);
}

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

.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__blue);
  border-color: var(--color__blue);
}

.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 {
  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;
}

.school-sidebar {
    width: 300px;
    min-width: 300px;
    padding: 24px;
    color: var(--color__color); background: var(--color__purple-2);
    border: 1px solid var(--color__purple);
    border-radius: 8px;
    margin-top: 96px;
    margin-right: 48px;
    position: relative;
}

.school-sidebar ul li {
    margin-bottom: 12px;
}

.school-sidebar ul li:last-of-type {
    margin-bottom: 0;
}

/* - My Account - */
.mob-wrap,
.narrow-wrap,
.mid-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-wrap {
    padding: 0 24px 0 48px;
    display: flex;
    position: relative;
    /* margin-top: 80px; */
}

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

.activities-list {
    width: calc(100% - 380px);
    margin: 0 0 80px 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__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 HOME --- */

.student-bg {
    background-color: var(--color__l-blue);
    background-image: url("../images-r/coqui/bg-coqui.svg");
    background-size: 75% auto;
    background-position: -10% -5%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.header-wrap.student,
.header-wrap.student .header,
.header-wrap.student .header-subbar {
    color: var(--color__w);
    background-color: transparent;
    border: none;
}

.header-wrap.student .header {
    height: 80px;
}

.header-wrap.student.sticky-shadow {
    background-color: var(--color__l-blue);
}

.student-zone {
  font-family: 'Source Sans Pro', sans-serif;
  background: var(--color__w);
  border-radius: 50px;
  padding: 40px;
}

.student-home {
    width: 100%;
    max-width: 1200px;
    padding: 0;
    display: flex;
    margin: 0 auto 24px;
    gap: 40px;
}

.student-home > div {
  width: 50%;
}

.activity-list,
.student-upcoming {
    padding: 24px;
    background: #e8edf1;
    border-radius: 8px;
}

.student-upcoming__title {
    font-size: 35px;
    font-weight: 300;
    line-height: 44px;
    margin-bottom: 24px;
}

a.student-upcoming__item[data-type=assignment]:hover {
  --base-color: #a470fc;
}

a.student-upcoming__item[data-type=quiz]:hover {
  --base-color: #f34f6d;
}

.student-upcoming__item {
  --base-color: #e93f5c;
}

.student-upcoming__item[data-type=assignment] {
  --base-color: #864ae5;
}

.student-upcoming__item {
    display: block;
    padding-bottom: 5px;
    background-color: var(--base-color);
    box-shadow: 0 -5px 0 rgba(0, 0, 0, 0.3) inset;
    margin-bottom: 18px;
    border-radius: 10px;
    height: 70px;
}

.student-upcoming__item:empty {
  background: #fff;
  box-shadow: none;
}

.student-upcoming__item--empty {
  color: var(--color__w);
  background: #4366aa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  box-shadow: none;
}

.student-upcoming__item > div {
    display: flex;
    flex-flow: row;
    height: 100%;
    padding: 10px;
}

.student-upcoming__item-head {
    padding: 0 12px;
    color: var(--color__w);
    border-left: 2px solid var(--color__w);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font: 400 12px/16px 'Rubik', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}

.student-upcoming__item-name {
    padding: 0 12px;
    color: var(--color__w);
    font: 400 14px/16px 'Rubik', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}

.student-upcoming__item-name > div {
  padding: 3px 5px;
}

.student-upcoming__type {
  display: inline-block;
  background: var(--color__w);
  color: var(--base-color);
  border-radius: 50px;
  text-transform: uppercase;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  line-height: 1em;
}

/* --- Student Home Activity List --- */
.activity-list__teacher {
    padding: 24px 30px 24px 10px;
    color: var(--color__text);
    text-align: right;
    display: flex; flex-flow: column;
    border-radius: 0 8px 0 0;
    position: absolute; right: 0; top: 0;
}

.activity-list__teacher h3 {
    font: 600 22px/28px 'Rubik', sans-serif;
    margin-bottom: 4px;
}

.activity-list__teacher span {
    font: 600 14px/20px 'Rubik', sans-serif;
}

.activity-list__item {
  padding: 0;
  margin: 0 0 20px;
  display: flex; align-items: center;
  font: 400 16px/18px 'Rubik', sans-serif;
}

.activity-list__item--hidden {
  display: none;
}

.activity-list__item--empty:before {
  background: #fff!important;
}

.activity-list__item > span {
  display: inline-block;
  width: 100%;
  background: var(--color__w);
  border-radius: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-weight: 400;
  overflow: hidden;
}

.activity-list__item a {
  color: #4265a5;
}

.activity-list__item.row-number:before {
    content: counter(row-counter);
    min-width: 40px;
    height: 40px;
    margin-right: 12px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--color__w);
    background-color: #4265a5;
}

.activity-list__item_num {
    width: 20px;
    font-size: 16px;
    line-height: 36px;
    color: var(--color__b1);
    margin: 0 10px 0 0;
}

/* --- STUDENT HOME - End --- */

/* --- 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: 100%;
  background: transparent;
  position: absolute;
  top: 64px;
  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: var(--color__brightest) 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: var(--color__l-blue-2);
  overflow: hidden;
}

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

.grades-single-quiz .tr {
  display: flex;
  border-bottom: 1px solid var(--color__l-blue);
}

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

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

.grades-single-quiz .th {
  width: 140px;
  height: 64px;
  padding: 0 10px;
  /* font-weight: 600; */
  letter-spacing: 1px;
  text-align: center;
  background-color: var(--color__brightest);
  border-bottom: 1px solid #E0E4EB;
  display: flex; justify-content: center; flex-direction: column;
  cursor: pointer;
}

.grades-single-quiz .th p,
.grades-single-quiz .th text-ellipsis {
  width: 100%;
  /* height: 20px; */
  font-size: 14px;
  line-height: 18px;
  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: opacity 0.2s ease-in, transform 0.2s ease-in;
  text-align: left;
  display: flex;
  flex-flow: column;
  position: fixed;
  left: 0;
  top: 70px;
  z-index: 1000;
  transform: scale(0);
  opacity: 0;
}

.grades-toolip * {
  color: var(--color__w);
}

.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__l-blue);
  border-bottom: 1px solid var(--color__red);
}

.grades-single-quiz .th:hover .grades-toolip,
.sticky-headers .table-head__cell: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: 68px;
  line-height: 20px;
  padding: 0 10px;
  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: '\e95e';
  font-family: 'coqui' !important;
  font-size: 21px;
  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__blue);
}

.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: #FFFFFF;
}

/* --- 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 {
  display:flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--color__w);
  border: none;
  cursor: pointer;
  position: absolute;
  top: calc(50% - 22px);
  right: -64px;
  transform: rotate(-90deg);
  transition: background .3s ease-out;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.quiz-previous:hover, .quiz-next:hover {
  background-color:rgba(225, 122, 84, 0.977);
}

.quiz-previous {
  transform: rotate(90deg);
  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: 10px 0;
  border-top: 1px solid rgba(166,176,195,0.2);
  border-bottom: 1px solid rgba(166,176,195,0.2);
  margin: 10px 0;
  display: flex; 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: 25%;
}

.data-detail .svg-wrap {
  width: 36px;
  height: 36px;
  font-weight: 600;
  border-radius: 50px;
  /* background-color: #F6F7F9; */
  border: 1px solid #E0E0E0;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  top: 2px;
  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;
  margin: 0;
  color: var(--color__orange);
  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;
}

.transcript-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  padding: 20px 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.transcript-overlay > div {
  height: 90vh;
}

.transcript-overlay .transcript-block {
  background: #fff;
  margin: 10px;
  cursor: auto;
  height: 100%;
  width: 50%;
  padding: 20px;
  white-space: pre-line;
}

.transcript-overlay .transcript-block p {
  padding-right: 10px;
  overflow: auto;
}

.transcript-overlay .transcript-close-button {
  display: inline-block!important;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
}


.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 --- */
.teacher-plans-wrap {
    max-width: 696px;
    padding: 0 24px;
    margin: 0 auto 96px;
}

.teacher-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 48px;
}

.all-plans-wrap {
    max-width: 1296px;
    padding: 0 24px;
    margin: 0 auto 96px;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(600px, 1fr) minmax(300px, 1fr);
    gap: 24px;
}

.pricing-plan {
    height: 100%; padding: 24px;
    border-radius: 8px;
    background-color: var(--color__w);
    border: 1px solid var(--color__purple);
    display: flex;
    flex-flow: column;
}

.plan-head {
    width: 100%;
    color: var(--color__purple);
    font: 500 18px/20px 'Rubik', sans-serif;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color__purple);
    margin-bottom: 24px;
}

.pricing-plan--student {
    border-color: var(--color__l-blue);
    background: var(--color__l-blue-2);
}

.plan-head--student {
    color: var(--color__l-blue);
    border-color: var(--color__l-blue);
}

.pricing-plan--institutional {
    border-color: var(--color__red-o);
    background: var(--color__red-o-2);
}

.plan-head--institutional {
    color: var(--color__red-o);
    border-color: var(--color__red-o);
}

.pricing-plan-duo {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.plan-body {
    width: 100%; height: 100%;
    display: flex; justify-content: space-between; flex-flow: column;
}

.plan-sup {
    width: 100%;
    font: 600 16px/20px 'Rubik', sans-serif;
    color: var(--color__text-2);
    text-align: center;
    margin-bottom: 10px;
}

.plan-plus,
.plan-price {
    display: inline-block;
    color: var(--color__b);
    font: 600 32px/40px 'Rubik', sans-serif;
    text-align: center;
}

.plan-time {
    display: block;
    font: 400 16px/20px 'Rubik', sans-serif;
    color: var(--color__text-3);
    margin: 10px 0 24px;
}

.plan-price--free {
    margin: 30px 0 54px;
}

.plan-list li {
    padding-left: 24px;
    position: relative;
    text-align: left;
    margin-bottom: 24px;
}

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

.plan-list li:before {
    content: "\e974";
    font-family: 'coqui';
    font-size: 18px; line-height: 24px;
    color: var(--color__purple);
    position: absolute; left: -5px; top: 0;
}

.plan-list--free li:before {
    color: var(--color__l-blue);
}

.plan-list--institutional li:before {
    color: var(--color__red-o);
}

.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;
}

/* #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: 1296px) {

    .all-plans-wrap {
        grid-template-columns: minmax(600px, 1fr) minmax(300px, 1fr);
    }

    .all-plans-wrap .pricing-plan:nth-child(even) {
        grid-column-start: 1;
        grid-row-start: 1;
    }

}

@media (max-width: 1279px) {

    .school-sidebar {
        width: 100%;
        margin: 0 0 48px;
    }

    .school-sidebar ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(171px, 1fr));
        gap: 12px;
    }

    .school-sidebar ul li {
        margin-bottom: 0;
    }

}

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

  .header-subbar-code {
    margin-left: 0;
  }

  .header__logo img {
    margin-right: 0;
  }

  .header__logo span {
    display: none;
  }

    .library-wrapper {
        padding: 0 24px;
        flex-direction: column;
    }

    .library-sidebar, .gradebook-filters {
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-right: 0;
        gap: 10px;
    }

    .gradebook-filters {
      margin-top: 0;
      padding: 0;
    }

    .library-sidebar {
      padding: 10px;
      width: 100%;
    }

    .library-sidebar > div,
    .library-sidebar > div > button {
      margin: 0!important;
    }

    .library-sidebar  .roster-classes {
      display: none;
    }

    #choose-a-date {
      line-height: 16px;
      height: 36px;
      background: var(--color__w);
      border: 1px solid #E0E0E0;
      border-radius: 4px;
      padding: 0 10px;
      font-weight: 500;
      color: var(--color__text-3);
    }

    .sidebar-icon-title, .library-sidebar--links {
      display:  none;
    }

    .library-sidebar .sidebar-toggle-cont {
      position: absolute;
      width: 300px;
      z-index: 100;
      background: rgb(255, 255, 255);
      box-shadow: rgb(0 0 0 / 30%) 0px 0px 10px;
      border-radius: 10px;
      left: 0px;
      top: 100%;
    }

    .library-sidebar .sidebar-a.toggle {
      position: relative;
      max-width: none;
      width: auto;
      line-height: normal;
      font-weight: bold;
    }

    #filter-folders {
      padding: 0;
    }

    .library-sidebar .toggle.hidden {
      display: block!important;
    }

    .sidebar-toggle-cont > a {
      margin: 0!important;
      line-height: 32px
    }

    .library-sidebar .sidebar-a.toggle [data-toggle] {
      padding: 0 0 0 10px
    }

    .library-sidebar [data-toggle]:hover {
      background-color: var(--color__blue-2);
      border-radius: 4px;
    }

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

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

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

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

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

    .student-home > div {
      width: 100%;
    }
}
/* End of media 1169px */

@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-start-lg {
    align-items: flex-start;
  }

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

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

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

  .library-activities {
    overflow: hidden;
  }

}
/* End of media 1100px */

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

    .all-plans-wrap {
        grid-template-columns: 1fr;
    }

}

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

  .header {
      margin-bottom: 0px;
  }

  .lg-only,
  .header-top-nav {
    display: none;
  }

  .sm-only {
    display: block!important;
  }

  .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;
  }

  .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-filters {
    align-items: flex-start;
    flex-flow: column;
    /* margin-bottom: 30px; */
  }

  .library-filters__sort {
    margin-top: 20px;
  }

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

  .table-head {
    height: auto;
  }

  .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 {
    /* max-width: 30vw; */ /* not a good plan */
  }

  .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--blank,
  .btn--small {
    height: 36px;
    padding: 0 8px;
    font-weight: 500;
  }

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

  .nbtn--sq,
  .nbtn--cir {
    width: 42px;
    padding: 0;
  } */

  .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: 0 12px;
    }

    .header-title {
        display: none;
    }

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

  .header__logo {
    display: none;
  }

  .header__close {
    margin-right: 8px;
  }

  .hamburger-icon {
    width: 33px;
    padding: 17px 15px 17px 0;
    display: block;
  }

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

  /* necessary for dropdown's full width */
  .btn--drop__wrap--library {
    position: static;
    margin: 0 auto;
  }
  
  .drop__content--mob .btn {
    height: initial;
    text-align: left;
  }

  /* 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);
  }

  .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;
  }

  .nbtn--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;
  }

  .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;
  }

    .teacher-plans-grid {
        gap: 24px;
    }

    .teacher-plans-grid .pricing-plan:nth-child(even) {
        grid-column-start: 1;
        grid-row-start: 1;
    }

}
/* 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;
  }

    .pricing-plan-duo {
        grid-template-columns: 1fr;
        gap: 24px;
    }

}
/* End of media WIDTH 650px */

/* --- Media HEIGHT a.k.a. Compact view --- */
@media all and (max-height: 650px) {

  .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) {

    .header-spacer {
        height: 126px;
    }

    .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-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;
  }

  .library-filters {
    padding-bottom: 15px;
  }

  .library-filters__sort {
    display: none;
  }

  .nbtn--sq {
    width: 36px;
    height: 36px;
  }

}

@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;
    }

    .all-plans-wrap,
    .teacher-plans-wrap {
        padding: 0 10px;
    }

}
/* 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: 11pt;
    line-height: 16pt;
    padding: 1px;
  }

  .table.table--fat:not(.table--command) td:nth-child(odd) {
    width: 20%;
  }

  .table.table--fat td:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
    hyphens: auto;
  }

  #printable_container.container {
    padding: 0;
  }

  .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 [class*='col-'] {
    padding: 3px;
  }

  #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-50\%,
.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-100\%,
.w-full {
  width: 100%!important;
}

.w-screen {
  width: 100vw!important;
}

.w-fit {
    width: fit-content;
}

.w-30 {
  width: 30px;
}

.w-60 {
    width: 60px;
}

.w-80 {
    width: 80px;
}

.w-88 {
    width: 88px;
}

.w-100 {
    width: 100px;
}

.w-120 {
  width: 120px;
}

.w-210 {
    width: 210px;
}

.max-w-468 {
    max-width: 468px;
}

.max-w-588 {
    max-width: 588px;
}

.max-w-700 {
    max-width: 700px;
}

.max-w-820 {
    max-width: 820px;
}

.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;
}

.mx-0\! {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.m-5 {
  margin: 5px;
}

.m-7 {
  margin: 7px;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-0 {
  margin-top: 0;
}

.ml-3 {
    margin-left: 3px;
}

.mr-3 {
    margin-right: 3px;
}

.mb-3 {
    margin-bottom: 3px;
}

.ml-3 {
    margin-left: 3px;
}

.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;
}

.my-0 {
  margin-top: 0!important;
  margin-bottom: 0!important;
}

.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-12 {
    margin-top: 12px;
}

.mr-12 {
  margin-right: 12px;
}

.mb-12 {
    margin-bottom: 12px;
}

.ml-12 {
    margin-left: 12px;
}

.mx-12 {
    margin-left: 12px;
    margin-right: 12px;
}

.my-12 {
    margin-top: 12px;
    margin-bottom: 12px;
}

.mr-14 {
  margin-right: 14px;
}

.mb-14 {
    margin-bottom: 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-18 {
  margin-top: 18px;
}

.mr-18 {
  margin-right: 18px;
}

.mb-18 {
  margin-bottom: 18px;
}

.ml-18 {
  margin-left: 18px;
}

.mx-18 {
  margin-left: 18px;
  margin-right: 18px;
}

.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;
}

.mx-24 {
  margin-left: 24px;
  margin-right: 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;
}

.ml-32 {
    margin-left: 32px;
}

.mb-34 {
  margin-bottom: 34px;
}

.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;
}

.ml-44 {
    margin-left: 44px;
}

.mt-48 {
    margin-top: 48px;
}

.mb-48 {
    margin-bottom: 48px;
}

.mt-50 {
  margin-top: 50px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-64 {
    margin-bottom: 64px;
}

.mb-65 {
    margin-bottom: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-72 {
    margin-bottom: 72px;
}

.mt-80 {
  margin-top: 80px;
}

.ml-80 {
  margin-left: 80px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mt-96 {
    margin-top: 96px;
}

.mb-96 {
    margin-bottom: 96px;
}

.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-13 {
  margin-top: 13px;
  margin-bottom: 13px;
}

.my-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.mr-n-15 {
  margin-right: -15px;
}

.my-24 {
    margin-top: 24px;
    margin-bottom: 24px;
}

.my-25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.mx-40 {
  margin-left: 40px;
  margin-right: 40px;
}

.my-48 {
    margin-top: 48px;
    margin-bottom: 48px;
}

.my-50 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.my-80 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.p-0 {
  padding: 0;
}

.p-5 {
  padding: 5px;
}

.p-10 {
  padding: 10px;
}

.p-12 {
    padding: 12px;
}

.p-15 {
  padding: 15px;
}

.p-20 {
  padding: 20px;
}

.p-24 {
    padding: 24px;
}

.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-8,
.ptb-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-10,
.ptb-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.py-15,
.ptb-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.pt-18 {
  padding-top: 18px;
}

.pt-40 {
  padding-top: 40px;
}

.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-48 {
    padding-left: 48px;
    padding-right: 48px;
}

.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;
}

.pr-0 {
  padding-right: 0;
}

.pl-10 {
    padding-left: 10px;
}

.pr-10 {
    padding-right: 10px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-12 {
    padding-bottom: 12px;
}

.pr-15 {
    padding-right: 15px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-24 {
  padding-left: 24px;
}

.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;
}

.pl-40 {
    padding-left: 40px;
}

.pl-44 {
    padding-left: 44px;
}

.pl-48 {
    padding-left: 48px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pl-50 {
    padding-left: 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 */
.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;
}

.fs-44 {
  font-size: 44px;
}

.fs-42 {
  font-size: 42px;
}

.fs-40 {
  font-size: 40px;
}

.fs-38 {
  font-size: 38px;
}

.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-15 {
  font-size: 15px;
}

/* 14px - BAD FONT RENDER */
.fs-14 {
  font-size: 14px;
}

.fs-12 {
  font-size: 12px;
}

.fs-10 {
  font-size: 10px;
}

.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-transparent {
  background: transparent;
}

.bg-E4F1FF {
  background: #E4F1FF;
}

.bg-DEF3F0 {
  background: #DEF3F0;
}

.bg-FFEFD9 {
  background-color: #FFEFD9;
}

.bg-F8F9FC {
  background: #F8F9FC;
}

/* Google Classroom COLORS */
.color-purple {
  color: var(--color__purple);
}

.bg-purple {
  background-color: var(--color__purple);
}

.color-purple-2 {
  color: var(--color__purple-2);
}

.bg-purple-2 {
  background-color: var(--color__purple-2);
}

.color-indigo {
  color: var(--color__indigo);
}

.bg-indigo {
  background-color: var(--color__indigo);
}

.color-indigo-2 {
  color: var(--color__indigo-2);
}

.bg-indigo-2 {
  background-color: var(--color__indigo-2);
}

.color-blue {
  color: var(--color__blue);
}

.bg-blue {
  background-color: var(--color__blue);
}

.color-blue-2 {
  color: var(--color__blue-2);
}

.color-blue-3 {
  color: var(--color__blue-3);
}

.bg-blue-2 {
  background-color: var(--color__blue-2);
}

.color-l-blue {
  color: var(--color__l-blue);
}

.bg-l-blue {
  background-color: var(--color__l-blue);
}

.color-l-blue-2 {
  color: var(--color__l-blue-2);
}

.bg-l-blue-2 {
  background-color: var(--color__l-blue-2);
}

.color-cyan {
  color: var(--color__cyan);
}

.bg-cyan {
  background-color: var(--color__cyan);
}

.color-cyan-2 {
  color: var(--color__cyan-2);
}

.bg-cyan-2 {
  background-color: var(--color__cyan-2);
}

.color-red {
  color: var(--color__red);
}

.bg-red {
  background-color: var(--color__red);
}

.color-red-2 {
  color: var(--color__red-2);
}

.bg-red-2 {
  background-color: var(--color__red-2);
}

.color-red-o {
  color: var(--color__red-o);
}

.bg-red-o {
  background-color: var(--color__red-o);
}

.color-red-o-2 {
  color: var(--color__red-o-2);
}

.bg-red-o-2 {
  background-color: var(--color__red-o-2);
}

.color-orange {
  color: var(--color__orange);
}

.bg-orange {
  background-color: var(--color__orange);
}

.color-orange-2 {
  color: var(--color__orange-2);
}

.bg-orange-2 {
  background-color: var(--color__orange-2);
}

.color-teal {
  color: var(--color__teal);
}

.bg-teal {
  background-color: var(--color__teal);
}

.color-teal-2 {
  color: var(--color__teal-2);
}

.bg-teal-2 {
  background-color: var(--color__teal-2);
}

.color-green {
  color: var(--color__green);
}

.bg-green {
  background-color: var(--color__green);
}

.color-green-2 {
  color: var(--color__green-2);
}

.bg-green-2 {
  background-color: var(--color__green-2);
}

.color-b-gray {
  color: var(--color__b-gray);
}

.bg-b-gray {
  background-color: var(--color__b-gray);
}

.color-b-gray-2 {
  color: var(--color__b-gray-2);
}

.bg-b-gray-2 {
  background-color: var(--color__b-gray-2);
}

.color-gray {
  color: var(--color__gray);
}

.bg-gray {
  background-color: var(--color__gray);
}

.color-gray-2 {
  color: var(--color__gray-2);
}

.bg-gray-2 {
  background-color: var(--color__gray-2);
}

.color-brightest {
    color: var(--color__brightest);
}
  
.bg-brightest {
    background-color: var(--color__brightest);
}

.color-text {
  color: var(--color__text);
}

.color-text-2 {
  color: var(--color__text-2);
}

.color-text-3 {
  color: var(--color__text-3);
}

/* Google Classroom COLORS - END */

.border-tr8 {
  border-radius: 8px 8px 0 0;
}

.border-red {
  border: 1px solid #FF0000;
}

.border-gray {
    border: 1px solid #E8EAED;
}

.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--medium,
.fw--500 {
  font-weight: 500;
}

.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;
}

.h-a {
    height: auto;
}

.h-30 {
    height: 30px;
}

.h-40 {
    height: 40px;
}

.h-56 {
    height: 56px;
}

.h-100\% {
    height: 100%;
}

.no-bg {
    background: none;
}

.scale-075 {
  transform: scale(0.75);
}

.word-break {
  word-break: break-all;
}

/* --- Everyday Helpers --- */
.flex-start-between {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.flex-center-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-center-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.flex-start-around {
    display: flex;
    align-items: start;
    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-center-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

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

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

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

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

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

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

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

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

.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-start {
    align-self: flex-start;
}

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

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

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

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

.grid-150-g24 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
}

/* .visible {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !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;
}

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

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

.rotate-45 {
  transform: rotate(45deg);
}

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

.rotate-180-scale-1 {
  transform: rotate(180deg) scaleX(-1);
}

.flip-vertical {
  transform: scaleX(-1);
}
/* - this should be on the bottom of main.css - */

@media (max-width: 1279px) {

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

  .xl\:flex-column-r {
    flex-flow: column-reverse;
  }

  .xl\:ml-0 {
    margin-left: 0;
  }

  .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\:p-0 {
    padding: 0;
  }

  .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\:p-0 {
    padding: 0px;
  }

  .md\:px-15 {
    padding-left: 15px;
    padding-right: 15px;
  }

  .md\:p-20 {
    padding: 20px;
  }

  .md\:pt-20 {
    padding-top: 20px;
  }

  .md\:px-24 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .md\:pl-44 {
    padding-left: 44px;
  }

  .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-10 {
    margin-top: 10px;
  }

  .md\:mb-10 {
    margin-bottom: 10px;
  }

  .md\:mb-12 {
    margin-bottom: 12px;
  }

  .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-24 {
    margin-bottom: 24px;
  }

  .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\:w-690\! {
    width: 690px!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\:py-5 {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .sm\:py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .sm\:mb-20 {
    margin-bottom: 20px;
  }

  .sm\:mb-24 {
    margin-bottom: 24px;
  }

  .sm\:ml-a {
    margin-left: auto;
  }

  .sm\:m-5 {
    margin: 5px;
  }

  .sm\:my-5 {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .sm\:mr-5 {
    margin-right: 5px;
  }

  .sm\:mt-10 {
    margin-top: 10px;
  }

  .sm\:mr-10 {
    margin-right: 10px;
  }

  .sm\:ml-15 {
    margin-left: 15px;
  }

  .sm\:mr-15 {
    margin-right: 15px;
  }

  .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-20 {
    font-size: 20px;
  }

  .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;
}

.select2-selection__arrow {
  display: none;
}
 
/* --- HELPERS - END --- */
/* ---

------ !!! NOTHING BEYOND THIS LINE !!! ------

 --- */