@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap&text=Save35%");
html {
  font-size: 16px;
}

body {
  background-color: #F1F2F4;
  z-index: -2;
}
body.StudentEnvironment, body.TeacherEnvironment {
  background-color: #f8fafe;
}

#teacher-dashboard-root {
  position: relative;
}
@media (max-width: 1199px) {
  #teacher-dashboard-root {
    font-size: 13px;
  }
}

@media (min-width: 769px) {
  .container-xl {
    width: unset;
    padding: 0 15px;
  }
}
@media (min-width: 992px) {
  .container-xl {
    width: unset;
    padding: 0 30px;
  }
}
@media (min-width: 1560px) {
  .container-xl {
    width: 1530px;
  }
}
@media (min-width: 768px) and (max-width: 770px) {
  .container-xl {
    width: unset;
  }
}
@media (min-width: 1200px) and (max-width: 1559px) {
  .container-xl {
    width: unset;
    padding: 0 30px;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  .container {
    width: 100%;
  }
}
@media (max-width: 1199px) {
  .InvisibleDesktopColumn {
    display: inline-block;
  }
}
@media (min-width: 1200px) {
  .InvisibleDesktopColumn {
    display: none !important;
  }
}

.SpaceBetween {
  display: flex;
  justify-content: space-between;
}

.BaseLine {
  display: flex;
  align-items: baseline;
}

@media (max-width: 1199px) {
  .VisibleDesktopColumn {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .VisibleDesktopColumn {
    display: inline-block;
  }
}

.VisibleTabletOnly {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .VisibleTabletOnly {
    display: inline-block !important;
  }
}

.NotVisibleTablet {
  display: inline-block;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .NotVisibleTablet {
    display: none !important;
  }
}

.story-hero-image {
  height: auto !important;
}

.story-hero-image img {
  width: 100%;
}

.noPadding {
  padding: 0 !important;
  margin: 0 !important;
}

.ps-unset {
  position: unset;
}

@media (min-width: 1600px) {
  .col-xl-right {
    width: 45%;
  }
  .col-xl-left {
    width: 55%;
  }
}
#section-features {
  top: 0;
}

@media (max-width: 450px) {
  .top-wrapper__bg1 {
    height: 350px !important;
  }
}

@media (max-width: 767px) {
  .tp-banner-holder {
    top: 20px;
  }
}
@media (min-width: 767px) and (max-width: 1025px) {
  .tp-banner-holder {
    margin-top: -200px;
  }
}

.row.equal {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .row.equal:before, .row.equal:after {
    display: none;
  }
}

.hideMobile {
  display: block;
}
@media (max-width: 992px) {
  .hideMobile {
    display: none;
  }
}

.showMobile {
  display: none;
}
@media (max-width: 992px) {
  .showMobile {
    display: block;
  }
}

.loading {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
}

.contact-cta {
  background: white;
  box-shadow: 0 2px 4px 0 rgba(230, 210, 210, 0.3);
  padding: 1em;
}

.contact-cta-flat {
  background: #F1F2F4;
  box-shadow: none;
  border-radius: 3px;
  height: 285px;
  display: flex;
  align-items: center;
}

.contact-cta-flex {
  display: flex;
  align-items: center;
}

.contact-cta img {
  width: 100%;
  height: auto;
}

.contact-cta p {
  font-size: 14px;
}

.contact-cta p:nth-child(1) {
  margin-bottom: 0;
  font-weight: bold;
}

.contact-cta-button {
  padding: 0.8em 1em;
  font-weight: 300;
  border-radius: 3px;
  text-align: center;
  background-color: #FD5B24;
  color: white;
  cursor: pointer;
}

.contact-cta-button:hover {
  color: white;
  text-decoration: none;
  background-color: #FD5B24;
}

@media (max-width: 980px) {
  .contact-cta {
    margin-top: 2em;
  }
}
.footer {
  background-color: #37274F;
  background-image: url(https://assets.senorwooly.com/static/images/bg-footer.jpg);
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
}
.footer .footer-inner {
  padding-top: 30px;
  position: relative;
}
.footer .footer-inner:before {
  content: "";
  display: block;
  position: absolute;
  background: url(https://assets.senorwooly.com/static/images/bg-footer-wave.svg) no-repeat 50% -1px;
  background-size: contain;
  width: 100%;
  height: 80px;
  top: 0;
  right: 0;
}

@media (min-width: 768px) {
  .footer .footer-inner {
    padding-top: 50px;
  }
}
@media (min-width: 992px) {
  .footer .footer-inner {
    padding-top: 130px;
  }
}
.footer-social-links {
  padding-bottom: 24px;
}
.footer-social-links li:before {
  display: none;
}
.footer-social-links > li > a {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #836aa0;
  font-size: 14px;
  line-height: 38px;
  color: #ffffff;
  background-color: transparent;
  -webkit-transition: all 0.25s cubic-bezier(0.3, 0.1, 0.55, 1);
  -o-transition: all 0.25s cubic-bezier(0.3, 0.1, 0.55, 1);
  transition: all 0.25s cubic-bezier(0.3, 0.1, 0.55, 1);
}
.footer-social-links > li > a:hover {
  color: #ffffff;
  background-color: #FD5B24;
  border-color: #FD5B24;
}
.footer-social-links.footer-social-links__rounded > li > a {
  border-radius: 50%;
}

.white .footer-inner:before {
  background: url(https://assets.senorwooly.com/static/images/bg-footer-wave-white.svg) no-repeat 50% -1px;
  background-size: contain;
}

@media (min-width: 768px) {
  .footer-social-links {
    padding-bottom: 50px;
  }
}
@media (min-width: 992px) {
  .footer-social-links {
    padding-bottom: 94px;
  }
}
@media (min-width: 768px) {
  .footer-social-links > li {
    padding: 0 10px;
  }
}
@media (min-width: 992px) {
  .footer-social-links > li {
    padding: 0 15px;
  }
}
@media (min-width: 768px) {
  .footer-social-links > li > a {
    width: 50px;
    height: 50px;
    font-size: 18px;
    line-height: 46px;
    border-width: 2px;
  }
}
@media (min-width: 992px) {
  .footer-social-links > li > a {
    width: 60px;
    height: 60px;
    font-size: 24px;
    line-height: 56px;
  }
}
.footer-text {
  border-top: 1px dashed rgba(255, 255, 255, 0.33);
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
}
.footer-text div[class^=col-] {
  position: relative;
  padding-top: 20px;
}
.footer-text div[class^=col-]:last-child {
  padding-bottom: 20px;
}

@media (min-width: 992px) {
  .footer-text div[class^=col-] {
    padding: 40px 0;
  }
  .footer-text div[class^=col-]:last-child {
    padding: 40px 0;
  }
  .footer-text div[class^=col-]:before, .footer-text div[class^=col-]:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    border-radius: 50%;
  }
  .footer-text div[class^=col-]:before {
    background: rgba(255, 255, 255, 0.11);
    width: 14px;
    height: 14px;
    top: -7px;
    margin-left: -7px;
  }
  .footer-text div[class^=col-]:after {
    width: 4px;
    height: 4px;
    background: #ff7149;
    top: -2px;
    margin-left: -2px;
  }
}
.page-heading {
  padding: 4em 0;
  color: #37274F;
}
.page-heading h1 {
  font-family: "Mahalia", sans-serif;
  font-size: 2.4em;
  color: inherit;
}
.page-heading h2 {
  font-size: 1.75em;
  color: inherit;
}
.page-heading p {
  margin-top: 2em;
}

@media (max-width: 940px) {
  .page-heading h2 {
    font-size: 1.5em;
    color: inherit;
  }
}
.headerMarkt__content {
  padding-top: 4rem;
}
.headerMarkt h1 {
  color: white;
  font-size: 2.6rem;
  margin-bottom: 2rem;
  line-height: 1.1;
}
@media (min-width: 992px) {
  .headerMarkt h1 {
    font-size: 3.3rem;
  }
}
@media (min-width: 1520px) {
  .headerMarkt h1 {
    font-size: 5rem;
  }
}
.headerMarkt h1 span,
.headerMarkt h1 strong {
  color: #FD5B24;
}
.headerMarkt h3 {
  color: white;
  font-size: 2rem;
}
.headerMarkt h3 span {
  display: block;
  color: #FD5B24;
  margin-top: 0.5rem;
}
.headerMarkt h3 span.large {
  font-size: 2.66rem;
}
.headerMarkt h3 span.sub {
  color: white;
  font-size: 1.33rem;
  font-weight: 400;
}
.headerMarkt p {
  color: white;
  font-size: 1.6rem;
  margin-bottom: 2rem;
  line-height: 1.4;
}
.headerMarkt p span {
  color: #FD5B24;
}
@media (min-width: 1520px) {
  .headerMarkt p {
    font-size: 2rem;
  }
}
.headerMarkt__image {
  position: relative;
}
.headerMarkt__image img {
  width: 100%;
}
@media (max-width: 992px) {
  .headerMarkt__image--shrink img {
    display: block;
    margin: 0 auto;
    width: 70%;
  }
}
.headerMarkt--default {
  background-color: #410064;
  overflow: hidden;
}
.headerMarkt--default .headerMarkt__content {
  margin-bottom: 4rem;
}
@media (min-width: 992px) {
  .headerMarkt--default .headerMarkt__content {
    margin-bottom: 6rem;
  }
}
.headerMarkt--default .headerMarkt__content--big {
  margin-bottom: 6rem;
}
@media (min-width: 769px) {
  .headerMarkt--default .headerMarkt__content--big {
    margin-bottom: 10rem;
  }
}
.headerMarkt--default .headerMarkt__content h1 span {
  display: block;
  font-weight: normal;
  font-size: 1.7rem;
}
@media (min-width: 992px) {
  .headerMarkt--default .headerMarkt__content h1 span {
    font-size: 2rem;
  }
}
@media (min-width: 1520px) {
  .headerMarkt--default .headerMarkt__content--multiline h1 {
    font-size: 4rem;
  }
}
.headerMarkt--default .headerMarkt__svg {
  max-height: 40px;
  height: 100px;
  overflow: hidden;
  margin-top: -40px;
}
@media (min-width: 992px) {
  .headerMarkt--default .headerMarkt__svg {
    margin-top: -60px;
    max-height: unset;
  }
}
@media (min-width: 2000px) {
  .headerMarkt--default .headerMarkt__svg {
    height: 150px;
  }
}
.headerMarkt--default .headerMarkt__svg svg {
  transform: scaleY(-1) scaleX(-1);
}
.headerMarkt--default .headerMarkt__svg svg path {
  fill: white;
}
.headerMarkt--default .headerMarkt__image--expired img {
  max-height: 350px;
  width: auto;
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .headerMarkt--default .headerMarkt__image {
    position: absolute;
    bottom: 30px;
    width: 100%;
  }
  .headerMarkt--default .headerMarkt__image.headerMarkt__image--expired img {
    max-height: 500px;
    width: auto;
  }
}
@media (min-width: 992px) {
  .headerMarkt--default .headerMarkt__image img {
    display: block;
    max-height: 400px;
    width: auto;
    margin: 0 auto;
  }
  .headerMarkt--default .headerMarkt__image.headerMarkt__image--expired img {
    max-height: 500px;
  }
}
@media (min-width: 1520px) {
  .headerMarkt--default .headerMarkt__image {
    bottom: -100px;
  }
  .headerMarkt--default .headerMarkt__image.headerMarkt__image--curr {
    bottom: -50px;
  }
  .headerMarkt--default .headerMarkt__image.headerMarkt__image--curr img {
    width: 100%;
  }
  .headerMarkt--default .headerMarkt__image.headerMarkt__image--novel {
    bottom: 0;
  }
  .headerMarkt--default .headerMarkt__image.headerMarkt__image--novel img {
    width: 100%;
  }
  .headerMarkt--default .headerMarkt__image.headerMarkt__image--expired {
    height: 100%;
    bottom: -50px;
  }
  .headerMarkt--default .headerMarkt__image.headerMarkt__image--expired img {
    height: 100%;
    max-height: unset;
  }
  .headerMarkt--default .headerMarkt__image img {
    max-height: 520px;
  }
}
.headerMarkt--secondary {
  background-color: #410064;
}
@media (min-width: 992px) {
  .headerMarkt--secondary .row.equal {
    align-items: center;
  }
}
.headerMarkt--secondary .headerMarkt__image {
  margin-bottom: -6rem;
}
@media (min-width: 992px) {
  .headerMarkt--secondary .headerMarkt__image {
    margin-bottom: -15rem;
  }
}
@media (min-width: 992px) {
  .headerMarkt--secondary .headerMarkt__image--padding {
    padding: 4rem 0;
  }
}
@media (min-width: 992px) {
  .headerMarkt--secondary .headerMarkt__image--maxH {
    max-height: 600px;
  }
}
@media (min-width: 992px) {
  .headerMarkt--secondary .headerMarkt__content--centered {
    text-align: center;
  }
}
.headerMarkt--secondary .headerMarkt__content--padding {
  padding-bottom: 100px;
  padding-top: 50px;
}
@media (min-width: 500px) {
  .headerMarkt--secondary .headerMarkt__content--padding {
    padding-bottom: 150px;
  }
}
@media (min-width: 992px) {
  .headerMarkt--secondary .headerMarkt__content--padding {
    padding-bottom: 3rem;
  }
}
.headerMarkt--secondary--svg {
  margin-bottom: 100px;
}
.headerMarkt--secondary--svg .headerMarkt__image {
  z-index: 1;
}
.headerMarkt--secondary--svg .headerMarkt__svg {
  position: relative;
}
@media (min-width: 992px) {
  .headerMarkt--secondary--svg .headerMarkt__svg {
    height: 100px;
    padding-bottom: 100px;
  }
}
@media (min-width: 2000px) {
  .headerMarkt--secondary--svg .headerMarkt__svg {
    height: 150px;
  }
}
.headerMarkt--secondary--svg .headerMarkt__svg svg {
  transform: scaleY(-1) scaleX(-1);
}
@media (max-width: 992px) {
  .headerMarkt--secondary--svg .headerMarkt__svg svg {
    position: absolute;
    bottom: -1rem;
  }
}
.headerMarkt--secondary--svg .headerMarkt__svg svg path {
  fill: white;
}
.headerMarkt--secondary--small .headerMarkt__image {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .headerMarkt--secondary--small .headerMarkt__image {
    margin-bottom: -10rem;
  }
}
.headerMarkt--below {
  overflow: hidden;
  background-color: #FD5B24;
  padding-top: 2rem;
}
@media (max-width: 992px) {
  .headerMarkt--below {
    margin-bottom: 4rem;
  }
}
@media (min-width: 992px) {
  .headerMarkt--below {
    padding-top: 8rem;
  }
}
.headerMarkt--below .row.equal {
  align-items: center;
}
.headerMarkt--below p {
  max-width: 560px;
  margin-bottom: 0;
  margin-top: 5rem;
  text-align: center;
}
@media (min-width: 992px) {
  .headerMarkt--below p {
    text-align: left;
    margin-top: 0;
  }
}
@media (min-width: 1200px) {
  .headerMarkt--below .headerMarkt__image {
    margin-bottom: 0;
  }
}
.headerMarkt--below .headerMarkt__svg {
  max-height: 40px;
  height: 100px;
  overflow: hidden;
  margin-top: -40px;
  width: 100%;
}
@media (min-width: 992px) {
  .headerMarkt--below .headerMarkt__svg {
    margin-top: -60px;
    max-height: unset;
  }
}
@media (min-width: 2000px) {
  .headerMarkt--below .headerMarkt__svg {
    height: 150px;
  }
}
.headerMarkt--below .headerMarkt__svg svg {
  transform: scaleY(-1) scaleX(-1);
}
.headerMarkt--below .headerMarkt__svg svg path {
  fill: white;
}
.headerMarkt--big {
  background-color: #410064;
}
.headerMarkt--big .headerMarkt__content {
  padding: 4rem 0;
}
@media (min-width: 992px) {
  .headerMarkt--big .headerMarkt__content {
    padding: 5rem 0 8rem 0;
  }
}
.headerMarkt--big .headerMarkt__image {
  height: 300px;
}
@media (min-width: 600px) {
  .headerMarkt--big .headerMarkt__image {
    height: 400px;
  }
}
@media (min-width: 768px) {
  .headerMarkt--big .headerMarkt__image {
    height: 100%;
  }
}
.headerMarkt--big .headerMarkt__image img {
  position: absolute;
  bottom: -11%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
@media (min-width: 768px) {
  .headerMarkt--big .headerMarkt__image img {
    bottom: -7%;
    height: unset;
    width: 100%;
    left: unset;
    transform: unset;
  }
}
@media (min-width: 992px) {
  .headerMarkt--big .headerMarkt__image img {
    bottom: -10%;
  }
}
@media (min-width: 1200px) {
  .headerMarkt--big .headerMarkt__image img {
    left: 50%;
    transform: translateX(-50%);
    max-height: 100%;
    width: auto;
    bottom: -11.3%;
  }
}

.subscription-tables {
  padding: 4em 0 2em 0;
}

.subscription-table div {
  padding: 0;
}
.subscription-table .subscription-table-image {
  background-size: cover;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  height: 30em;
  background-color: #FD5B24;
  background-position: center;
}
.subscription-table .subscription-table-information {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  height: 30em;
  padding: 1.5em;
  background: #37274F;
  color: white;
  text-align: left;
}
.subscription-table .subscription-table-information > span:first-of-type {
  font-weight: bold;
  display: block;
  margin-bottom: 7px;
}
.subscription-table .subscription-table-information h3, .subscription-table .subscription-table-information h4 {
  color: inherit;
}
.subscription-table .subscription-table-information h3 {
  font-weight: normal;
  margin: 0 0 0.2em 0;
}
.subscription-table .subscription-table-information h3 span {
  font-size: 13px;
  color: white;
  opacity: 0.75;
}
.subscription-table .subscription-table-information span:nth-of-type(2) {
  font-weight: bold;
}
.subscription-table .subscription-table-information p {
  font-size: 1em;
  margin: 0 0 0.7em 0;
  width: 90%;
}
.subscription-table .subscription-table-information .price-baseline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.subscription-table .subscription-table-information hr {
  margin-top: 1em;
}

.subscription-table-buttons a {
  margin: 1em 0 3em 0;
}

@media (max-width: 990px) {
  .subscription-table {
    margin: 0 auto;
    max-width: 330px;
  }
  .subscription-table .subscription-table-image {
    background-position: top center;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 0;
    height: 12em;
  }
  .subscription-table .subscription-table-information {
    border-top-right-radius: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .subscription-table-buttons a {
    width: 330px;
  }
}
@media (max-width: 767px) {
  .subscription-table-information {
    height: auto !important;
  }
}
@media (max-width: 407px) {
  .subscription-table-buttons a {
    width: 100%;
  }
}
.subscription-table-tour {
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 30px;
  z-index: 1;
}
@media (max-width: 990px) {
  .subscription-table-tour .subscription-table-image {
    height: 16rem;
  }
}
.subscription-table-tour .pricing__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #37274F;
  margin-top: 30px;
  border-radius: 3px;
}
.subscription-table-tour .pricing__block--left {
  margin-right: 10px;
}
.subscription-table-tour .pricing__block--right {
  margin-left: 10px;
}
.subscription-table-tour .pricing__block h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  font-size: 1.25rem;
  margin-bottom: 0;
}
.subscription-table-tour-switch {
  margin-bottom: 30px;
}
.subscription-table-tour-switch span {
  display: block;
  text-align: center;
  font-size: 1.15rem;
  color: #37274F;
  margin-bottom: 15px;
}
.subscription-table-tour-switch .button__group {
  display: flex;
  justify-content: center;
}
.subscription-table-tour-switch .button__group button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  height: 65px;
  min-width: 120px;
  padding: 0;
  border: 1px solid #37274F;
  border-radius: 3px;
  overflow: hidden;
  color: #37274F;
  line-height: 2.5;
}
.subscription-table-tour-switch .button__group button.active {
  color: white !important;
  background-color: #FD5B24;
}
.subscription-table-tour-switch .button__group button.active span {
  background-color: white;
  color: #37274F;
}
.subscription-table-tour-switch .button__group button:first-of-type {
  margin-right: 15px;
}
.subscription-table-tour-switch .button__group button span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #37274F;
  margin-bottom: 0;
  border-top: 1px solid #37274F;
  line-height: 1;
  height: 27px;
  width: 100%;
  flex-grow: 1;
}
.subscription-table-tour-switch .button__group button.active {
  color: #FD5B24;
}

.section-bulletpoints {
  padding: 4em 0;
  background: white;
}
.section-bulletpoints ul {
  padding: 0;
}
.section-bulletpoints ul li {
  margin: 1.5em 0 0 2.5em;
}
.section-bulletpoints ul li:before {
  content: "";
  position: absolute;
  top: 0;
  left: -4em;
  background: url("https://assets.senorwooly.com/static/images/point.svg") no-repeat;
  width: 25px;
  height: 25px;
}

.section-small-heading {
  padding: 4em 0;
  color: #37274F;
}
.section-small-heading h3, .section-small-heading p {
  color: inherit;
}
.section-small-heading h3 {
  font-size: 1.1em;
}
.section-small-heading img {
  width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  .section-small-heading h3 {
    margin-top: 2em;
  }
}
.section-features {
  padding: 4em 0;
  color: #37274F;
}
.section-features h3, .section-features p {
  color: inherit;
}
.section-features h3 {
  font-size: 1.1em;
}

.feature-icon {
  background-color: #e8e3f0;
  border: 1px solid #37274F;
  border-radius: 3px;
  padding: 0.5em;
  margin-bottom: 2em;
  width: 68px;
  height: 68px;
}

@media (max-width: 980px) {
  .feature-icon {
    margin-top: 2em;
  }
}
.double-price-cta {
  color: #37274F;
}
.double-price-cta h4, .double-price-cta p {
  color: inherit;
}
.double-price-cta p {
  margin-bottom: 40px;
}

@media (max-width: 980px) {
  .double-price-cta {
    padding-bottom: 2em;
  }
  .double-price-cta p {
    margin-bottom: 2em;
  }
}
.cta-bar {
  background-color: #37274F;
}
.cta-bar p {
  color: white;
  margin-bottom: 0;
}
.cta-bar .cta-bar-btn {
  width: 100%;
  height: 100%;
  background-color: #FD5B24;
  cursor: pointer;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}
.cta-bar .cta-col-full-height {
  height: 100%;
}

@media (max-width: 500px) {
  .react-datepicker__time-container {
    min-width: 100px;
  }
  .react-datepicker__month-container {
    width: calc(100% - 100px);
  }
  .react-datepicker__time-box {
    min-width: 100px !important;
  }
  .react-datepicker__navigation--next--with-time {
    right: 103px !important;
  }
}
@media (min-width: 700px) and (max-width: 1000px) {
  .react-datepicker__navigation--next {
    right: 172px !important;
  }
}
@media (min-width: 990px) {
  .cta-row-height {
    height: 4em;
  }
}
@media (max-width: 990px) {
  .cta-row-height {
    height: 6em;
  }
  .cta-bar p {
    font-size: 0.9em;
  }
}
@media (max-width: 450px) {
  .cta-row-height {
    height: 7em;
  }
}
.cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 11px 1.5rem;
  background-color: white;
  border: 1px solid #DBE0EA;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 20px;
}
.cta span {
  color: #37274F;
}
.cta .TeacherForm__submit {
  font-size: 1rem;
  padding: 1rem;
  min-width: 200px;
  min-height: 40px;
}
@media (max-width: 992px) {
  .cta .TeacherForm__submit {
    font-size: 12px;
    min-width: 155px;
  }
}
.cta__stack .cta {
  margin-bottom: 0;
  padding: 15px 20px;
  border-radius: 0;
  border-top: 0;
}
.cta__stack .cta:after {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  background-color: #DBE0EA;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0px 15px;
}
.cta__stack .cta:first-of-type {
  position: relative;
  border-top-left-radius: 8px;
  border-top-right-radius: 8xpx;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  border-top: 1px solid #DBE0EA;
  padding-bottom: 20px;
}
.cta__stack .cta:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.cta__stack .cta:last-of-type:after {
  display: none;
}

.message-box {
  background: #F1F2F4;
  border-radius: 3px;
  padding: 1em 2em;
}
.message-box p:first-of-type {
  font-weight: bold;
  margin-bottom: 1em;
}

.contact-information h3 {
  font-size: 1.2em;
  color: #37274F;
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .contact-information {
    margin-top: 2em;
  }
}
.masonry {
  display: flex;
  flex-wrap: wrap;
}

.storylisting {
  padding-bottom: 5em;
}

.storylisting__item {
  height: auto;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}

.storylisting--grid .storylisting__item {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.storylisting__cover {
  width: 100%;
  height: 13em;
  object-fit: cover;
  background: #37274F;
}
@media (max-width: 991px) {
  .storylisting__cover {
    height: 9em;
  }
}

.storylisting__cover--block {
  width: 100%;
  height: 100%;
}
@media (max-width: 991px) {
  .storylisting__cover--block {
    height: 9em;
  }
}

.storylisting__item__body {
  padding: 2em 1em 0 1em;
  background: white;
  word-break: break-word;
}

.storylisting__item__body .body__title {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}
.storylisting__item__body .body__title img {
  width: 25px;
  height: auto;
}
.storylisting__item__body .body__title img:first-of-type {
  margin-left: 15px;
}

.body__notes ul {
  padding-left: 1em;
  font-weight: normal;
}
.body__notes ul li {
  color: #37274F;
  list-style: disc;
}

.spoilerWarning {
  position: relative;
}

.spoilerWarning__message {
  position: absolute;
  top: 3.5em;
  left: 6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  color: #37274F;
  font-weight: bold;
}
@media (max-width: 600px) {
  .spoilerWarning__message {
    left: 1em;
  }
}

.spoilerWarning ul li {
  margin-left: -1em;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.spoilerWarning ul li:active, .spoilerWarning ul li:focus, .spoilerWarning ul li:hover {
  border-bottom: 0;
}

.spoilerWarning__btn {
  background: #FD5B24;
  padding: 0.6em 1em;
  text-transform: uppercase;
  border-radius: 3px;
  color: white;
  margin-top: 1em;
  font-weight: lighter;
  cursor: pointer;
}

.body__more {
  cursor: pointer;
  width: 100%;
  text-align: center;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  font-weight: bold;
  color: #37274F;
  border-top: 1px solid #d9d9d9;
}
.body__more:hover {
  transition: 300ms;
  background-color: #37274F;
  color: white;
}

.storylisting__item__body h3 {
  color: #37274F;
  font-size: 1.3em;
  margin-bottom: 0;
}

.storylisting__item__body h4 {
  font-weight: bold;
}

.storylisting__item__body h4,
.storylisting__item__body p {
  color: #37274F;
  font-size: 1em;
}

.storylisting__item__body p {
  font-weight: normal;
}

.storylisting__item--overlay {
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  position: absolute;
  top: 0;
}
.storylisting__item--overlay:hover {
  background-color: transparent;
}

.storylisting__item--overlay img {
  width: 50px;
  height: auto;
  margin-top: 40px;
  margin-left: 25px;
}
@media (max-width: 750px) {
  .storylisting__item--overlay img {
    width: 25px;
    margin-top: 20px;
    margin-left: 10px;
  }
}
.storylisting__item--overlay img:first-of-type {
  margin-left: 40px;
}
@media (max-width: 750px) {
  .storylisting__item--overlay img:first-of-type {
    margin-left: 20px;
  }
}

.js-storylisting-hide,
.js-bodysection-hidden {
  display: none;
}

.js-story {
  cursor: pointer;
}

.js-hidden-note {
  display: none;
}

.storyfilters {
  padding-top: 8.1em;
  padding-bottom: 2.5em;
}
@media (max-width: 991px) {
  .storyfilters {
    padding-bottom: 0;
  }
}

.storyfilters__buttons {
  display: flex;
}

.storyfilters__button {
  cursor: pointer;
  height: 40px;
  width: 40px;
  background: white;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
}
.storyfilters__button svg > g {
  fill: #d9d9d9;
}
.storyfilters__button:first-of-type {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.storyfilters__button:last-of-type {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.storyfilters__button--active {
  background: #37274F;
  color: white;
}
.storyfilters__button--active svg > g {
  fill: white;
}

.storyFilters__searchResults {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6em;
}
@media (max-width: 991px) {
  .storyFilters__searchResults {
    margin-top: 2.5em;
  }
}
.storyFilters__searchResults span {
  margin-right: 1em;
}

.videobanner {
  background: white;
  height: 10em;
  margin-bottom: 3em;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  position: relative;
}
@media (max-width: 991px) {
  .videobanner {
    height: 17em;
  }
}

.videobanner__placeholder {
  position: relative;
  cursor: pointer;
}

.videobanner__playbutton {
  position: absolute;
  top: 28%;
  left: 42%;
}
@media (max-width: 991px) {
  .videobanner__playbutton {
    left: 39%;
  }
}

.videobanner__image {
  width: 100%;
  height: 10em;
  object-fit: cover;
}

.videobanner__text {
  color: #37274F;
  font-size: 1.2em;
  line-height: 2.06;
  margin-top: 2.4em;
}
@media (max-width: 991px) {
  .videobanner__text {
    font-size: 1em;
    margin-top: 1.5em;
    text-align: center;
    padding: 0 1em;
  }
}

.videobanner__hide {
  position: absolute;
  top: 1em;
  right: 1em;
}

.modal-backdrop {
  background-color: #37274F;
}

.modal-backdrop.in {
  opacity: 0.8;
}

.searchModal {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  margin-top: 68px;
}
.searchModal .modal-dialog {
  margin: 7em auto;
  max-width: 95vw;
}
@media (min-width: 1200px) {
  .searchModal .modal-dialog {
    width: 1140px;
  }
}
@media (max-width: 992px) {
  .searchModal .modal-dialog {
    width: auto;
  }
}

.searchModal.studentSearch .miscResultColumn {
  display: none;
}

.searchModal .search__input {
  position: relative;
  padding: 1em 0 1.3em 0.4em;
  border-radius: 3px;
  background: white;
}
@media (max-width: 991px) {
  .searchModal .search__input {
    border-radius: 0;
    padding-bottom: 0;
  }
}
.searchModal .search__input i:first-of-type {
  color: #37274F;
  position: absolute;
  font-size: 1.7em;
  top: 1em;
  left: 1.7em;
  z-index: 1;
}
@media (max-width: 991px) {
  .searchModal .search__input i:first-of-type {
    top: 1.5em;
    left: 1.1em;
    font-size: 1em;
  }
}
.searchModal .search__input i:nth-of-type(2) {
  display: none;
}
@media (max-width: 991px) {
  .searchModal .search__input i:nth-of-type(2) {
    display: block;
    position: absolute;
    font-size: 1em;
    top: 0.5em;
    right: 0.5em;
  }
}
.searchModal .twitter-typeahead .form-control {
  border: 0 !important;
  display: inline-block;
  padding-left: 3.7em;
  font-size: 1.5em;
  margin-top: -0.1em;
}
.searchModal .twitter-typeahead .form-control:focus {
  box-shadow: none !important;
}
@media (max-width: 991px) {
  .searchModal .twitter-typeahead .form-control {
    padding-left: 2.5em;
    font-size: 1em;
    margin-top: -0.19em;
  }
}
.searchModal .twitter-typeahead, .searchModal .token-input {
  display: inline-block;
  width: 100% !important;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 0 !important;
}
.searchModal .tt-input {
  border: 0 !important;
  font-size: 1.2em;
  color: #37274F;
  font-weight: normal;
}
@media (max-width: 991px) {
  .searchModal .tt-input {
    font-size: 0.9em;
    top: -0.41em;
  }
}
.searchModal .tt-input::placeholder {
  color: #37274F;
  opacity: 0.4;
}
.searchModal .tt-hint {
  opacity: 0.5 !important;
  background: none !important;
}
@media (max-width: 991px) {
  .searchModal .tt-hint {
    top: -6px !important;
  }
}
.searchModal .tt-dataset {
  display: none !important;
}
.searchModal .tokenfield .token {
  display: none;
}
.searchModal .token, .searchModal .search__story__tag {
  display: inline-block;
  max-width: 15em !important;
  background-color: #d9d9d9;
  padding: 0.5em;
  margin-top: 0.75em;
  border-radius: 3px;
  color: #37274F;
  font-weight: bold;
  font-size: 0.8em;
  margin-right: 0.7em;
  opacity: 0.6;
}
.searchModal .token p, .searchModal .search__story__tag p {
  color: #37274F;
  font-size: 1em;
  font-weight: normal;
}
.searchModal .token p span, .searchModal .search__story__tag p span {
  font-weight: bold;
  text-decoration: underline;
}
.searchModal .token a, .searchModal .search__story__tag a {
  color: white;
  padding: 0 0.4em;
  font-size: 1.4em;
  opacity: 0.8;
}
.searchModal .token a:hover, .searchModal .search__story__tag a:hover {
  color: white;
  opacity: 1;
  background: none;
}

.searchModal__close {
  padding: 0.05em 1.5em;
  color: white;
  background: #6D538E;
  position: absolute;
  top: -1.7em;
  right: 1.5em;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  cursor: pointer;
}

.searchModal .modal-content {
  background-color: transparent;
  box-shadow: none;
  border: 0;
}

.searchModal .modal-body {
  background-color: transparent;
}
@media (max-width: 991px) {
  .searchModal .modal-body {
    padding-left: 1em;
    padding-right: 1em;
  }
}

.search__examples {
  color: white;
  opacity: 0.5;
  font-size: 1.125em;
  display: inline-block;
}
@media (max-width: 991px) {
  .search__examples {
    font-size: 0.9em;
  }
}
.search__examples span {
  margin-right: 1em;
}
.search__examples span:hover:not(:first-of-type) {
  text-decoration: underline;
  cursor: pointer;
}
.search__examples span:last-of-type {
  margin-right: 0;
}

.search__title {
  margin-top: 2em;
  margin-bottom: 3em;
}
.search__title:after {
  content: "";
  margin-top: 1em;
}
.search__title h3 {
  color: white;
  font-size: 1.125em;
}

.search__errorMessage {
  color: white;
  opacity: 0.5;
  font-size: 1.1em;
  margin-bottom: 2em;
}
.search__errorMessage p {
  margin-bottom: 0;
}

.search__tag {
  margin-bottom: 2em;
}
.search__tag span {
  background-color: #d9d9d9;
  padding: 0.5em;
  border-radius: 3px;
  color: #37274F;
  font-weight: bold;
  margin-right: 0.7em;
}
.search__tag span:hover {
  transition: 300ms;
  background-color: #37274F;
  color: white;
}
.search__tag span i {
  color: white;
  padding-right: 0.4em;
}

.search__story {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}
.search__story:hover {
  text-decoration: none;
  color: transparent;
}

.search__story__image img {
  width: 90px;
  height: 90px;
  border-radius: 3px;
  object-fit: cover;
}

.search__story__image--more img {
  width: 70px;
  height: 70px;
  border-radius: 3px;
  object-fit: cover;
}

.search__story__info {
  padding-left: 1.2em;
  color: #37274F;
  font-weight: bold;
}
.search__story__info p {
  font-size: 1.1em;
  color: white;
  font-weight: normal;
  margin: 0;
}
.search__story__info p:first-of-type, .search__story__info p:last-of-type {
  opacity: 0.5;
}
.search__story__info p:first-of-type {
  font-size: 0.8em;
}
.search__story__info p span {
  font-weight: bold;
  text-decoration: underline;
}
.search__story__info .info__foot,
.search__story__info .info__head {
  display: flex;
  flex-wrap: wrap;
}
.search__story__info .info__foot p,
.search__story__info .info__head p {
  font-size: 1em;
  color: #37274F;
  opacity: 1;
}
.search__story__info .info__foot a,
.search__story__info .info__head a {
  color: white;
  font-weight: normal;
}
.search__story__info .info__foot a:hover,
.search__story__info .info__head a:hover {
  text-decoration: none;
}
.search__story__info .info__foot a span,
.search__story__info .info__head a span {
  font-weight: bold;
  text-decoration: underline;
}
.search__story__info .info__foot img,
.search__story__info .info__head img {
  width: 20px;
  height: 17px;
  margin-left: 10px;
}
.search__story__info .info__head p {
  color: white;
}

.info__foot p {
  max-width: 48ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .info__foot p {
    max-width: 26ch;
  }
}
@media (max-width: 350px) {
  .info__foot p {
    max-width: 20ch;
  }
}

.search__results__btn {
  background-color: #FD5B24;
  display: block;
  padding: 0.8em 0;
  text-align: center;
  border-radius: 3px;
  color: white;
  font-weight: lighter;
  cursor: pointer;
}
.search__results__btn:hover, .search__results__btn:active, .search__results__btn:focus {
  transition: 200ms;
  background: white;
  color: #37274F;
  text-decoration: none;
}

.hr-vertical {
  position: absolute;
  left: -1em;
  width: 1px;
  height: 40em;
  top: 2.2em;
  background-color: white;
  opacity: 0.5;
}

.js-search-default,
.js-search-results,
.js-search-error {
  display: none;
}

.InstructionalStudentVideoModal .modal-backdrop {
  background-color: #37274F;
  opacity: 80%;
}
.InstructionalStudentVideoModal .modal-backdrop.in {
  opacity: 0.8;
}
.InstructionalStudentVideoModal .modal-dialog {
  max-width: 100vw;
  border-radius: 8px;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
@media (max-width: 768px) {
  .InstructionalStudentVideoModal .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    height: 90vh;
  }
}
.InstructionalStudentVideoModal .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.InstructionalStudentVideoModal .modal-header h4 {
  color: #37274F;
}
.InstructionalStudentVideoModal .modal-header button {
  right: 12px;
  top: 7px;
  position: absolute;
}
.InstructionalStudentVideoModal .modal-body {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
}
@supports (-ms-ime-align: auto) {
  .InstructionalStudentVideoModal .modal-body {
    justify-content: space-around;
  }
}
.InstructionalStudentVideoModal .modal-body .Coppa {
  margin: 0 50px 0 50px;
}
.InstructionalStudentVideoModal .modal-body .Coppa p {
  margin-bottom: 0;
}
.InstructionalStudentVideoModal .modal-body button {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1.4em;
  color: #37274F;
  width: 10em;
  height: 50px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  border: 0;
}
.InstructionalStudentVideoModal .modal-body button:focus {
  outline: none;
}
.InstructionalStudentVideoModal .modal-body button.selected {
  background-color: #37274F;
  color: white;
}
.InstructionalStudentVideoModal .modal-body .TeacherForm__dropdown {
  width: 83%;
  margin-bottom: 0;
}
.InstructionalStudentVideoModal .modal-body .Coppa {
  margin-top: -25px;
}
.InstructionalStudentVideoModal__title {
  font-size: 22px;
}
.InstructionalStudentVideoModal__message {
  color: #37274F;
  font-size: 16px;
  text-align: center;
  width: 375px;
}

.video-modal {
  z-index: 13000;
}

.interrupt-image {
  width: 40%;
}
@media (max-width: 768px) {
  .interrupt-image {
    width: 60%;
  }
}

.SuccessConversionModal .modal-backdrop {
  background-color: #37274F;
  opacity: 80%;
}
.SuccessConversionModal .modal-backdrop.in {
  opacity: 0.8;
}
.SuccessConversionModal .modal-body {
  max-width: 600px;
  min-height: 400px;
}
.SuccessConversionModal .modal-dialog {
  max-width: 100vw;
  border-radius: 8px;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
@media (max-width: 768px) {
  .SuccessConversionModal .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    height: 90vh;
  }
}
.SuccessConversionModal .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.SuccessConversionModal .modal-header h4 {
  color: #37274F;
}
.SuccessConversionModal .modal-header button {
  right: 12px;
  top: 7px;
  position: absolute;
}
.SuccessConversionModal .modal-body {
  display: flex;
  align-items: center;
}
@supports (-ms-ime-align: auto) {
  .SuccessConversionModal .modal-body {
    justify-content: space-around;
  }
}
.SuccessConversionModal .modal-body .Coppa {
  margin: 0 50px 0 50px;
}
.SuccessConversionModal .modal-body .Coppa p {
  margin-bottom: 0;
}
.SuccessConversionModal .modal-body button {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1.4em;
  color: #37274F;
  width: 10em;
  height: 50px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  border: 0;
}
.SuccessConversionModal .modal-body button:focus {
  outline: none;
}
.SuccessConversionModal .modal-body button.selected {
  background-color: #37274F;
  color: white;
}
.SuccessConversionModal .modal-body .TeacherForm__dropdown {
  width: 83%;
  margin-bottom: 0;
}
.SuccessConversionModal .modal-body .Coppa {
  margin-top: -25px;
}
.SuccessConversionModal__title {
  font-size: 22px;
}
.SuccessConversionModal__message {
  color: #37274F;
  font-size: 16px;
  text-align: center;
  width: 375px;
}

.video-modal {
  z-index: 13000;
}

.success-image {
  width: 20%;
  margin-bottom: 5%;
}

.UsernameModalConversion .container {
  display: flex;
  justify-content: center;
}
.UsernameModalConversion .modal-backdrop {
  background-color: rgba(22, 0, 34, 0.6509803922);
  opacity: 80%;
}
.UsernameModalConversion .modal-backdrop.in {
  opacity: 0.8;
}
.UsernameModalConversion .name {
  color: #410064;
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 10px;
}
.UsernameModalConversion .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: visible;
}
@media (max-width: 991px) {
  .UsernameModalConversion .modal-dialog {
    margin: 0;
    padding: 10px;
  }
}
.UsernameModalConversion .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.UsernameModalConversion .modal-header h4 {
  color: #37274F;
}
.UsernameModalConversion .modal-header button {
  right: 12px;
  top: 7px;
  position: absolute;
}
.UsernameModalConversion .modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}
@supports (-ms-ime-align: auto) {
  .UsernameModalConversion .modal-body {
    justify-content: space-around;
  }
}
@media (max-width: 992px) {
  .UsernameModalConversion .modal-body {
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }
}
.UsernameModalConversion .modal-body .Coppa {
  margin: 0 50px 0 50px;
}
.UsernameModalConversion .modal-body .Coppa p {
  margin-bottom: 0;
}
.UsernameModalConversion .modal-body button {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1.4em;
  color: #37274F;
  width: 10em;
  height: 50px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  border: 0;
}
.UsernameModalConversion .modal-body button:focus {
  outline: none;
}
.UsernameModalConversion .modal-body button.selected {
  background-color: #37274F;
  color: white;
}
.UsernameModalConversion__title {
  font-size: 22px;
}
.UsernameModalConversion__message {
  color: #37274F;
  font-size: 16px;
  text-align: center;
  width: 375px;
}
.UsernameModalConversion .modal-content {
  width: 637px !important;
  min-height: 564px !important;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .UsernameModalConversion .modal-content {
    margin: 0 auto;
    width: 400px !important;
  }
}
.UsernameModalConversion .caution-image {
  margin-top: 10px;
  width: 190px;
  height: 190px;
  margin-right: 20px;
}
@media (max-width: 992px) {
  .UsernameModalConversion .caution-image {
    margin: 0 auto !important;
    width: 150px;
    height: 150px;
  }
}

.Connections__container {
  font-size: unset;
}
.Connections__connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  width: 100%;
  padding: 0 15px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #DBE0EA;
  color: #37274F;
  cursor: pointer;
}
.Connections__connection--provider {
  font-size: 32px;
}
.Connections__connection--provider--facts {
  font-size: 32px;
}
.Connections__connection--provider--link {
  font-size: 32px;
}

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

.MediaType__image img {
  max-width: 100%;
}
@media (min-width: 769px) {
  .MediaType__image img {
    pointer-events: none;
  }
}

.AudioPlayer {
  background: #37274F;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;
  border-radius: 8px;
  padding: 0 37px;
}
@media (max-width: 992px) {
  .AudioPlayer {
    justify-content: space-around;
  }
}

.AudioPlayer__source {
  display: none;
}

.AudioPlayer__play {
  background-color: #37274F;
  border: 0;
  color: white;
  position: relative;
  font-size: 32px;
}
.AudioPlayer__play:focus {
  outline: 0;
}
@media (max-width: 768px) {
  .AudioPlayer__play {
    font-size: 12px;
    width: 8%;
    min-width: unset;
  }
}

.AudioPlayer__label {
  color: white;
  font-weight: bold;
  margin-left: 0.5em;
}
@media (max-width: 768px) {
  .AudioPlayer__label {
    display: none;
  }
}

.AudioPlayer__time {
  color: white;
  font-size: 12px;
  margin: 0;
  min-width: 55px;
  text-align: center;
}
@media (max-width: 1550px) {
  .AudioPlayer__time {
    font-size: 10px;
  }
}

.AudioPlayer__range {
  background-color: transparent;
  width: 50% !important;
  height: 2em;
  overflow: hidden;
  cursor: pointer;
  margin: 0 1em;
  padding: 0;
  display: flex;
  align-self: center;
}
.AudioPlayer__range:focus {
  outline: 0;
}

.TaskSlide .AudioPlayer__range {
  width: 65% !important;
}

.AudioPlayer__range,
.AudioPlayer__range::-webkit-slider-runnable-track,
.AudioPlayer__range::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.AudioPlayer__range::-webkit-slider-runnable-track {
  width: 45% !important;
  height: 0.5em;
  background: #6a5984;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .AudioPlayer__range::-webkit-slider-runnable-track {
    width: 50% !important;
  }
}

.AudioPlayer__range::-webkit-slider-thumb {
  position: relative;
  height: 1.5em;
  width: 1.5em;
  margin-top: -7px;
  background: white;
  border-radius: 50%;
}

.MediaObject {
  height: 100%;
  width: 100%;
}

.Textual__Answer {
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 15px;
  padding-left: 0;
}

.TaskContainer {
  color: #37274F;
  font-family: "azo-sans-web", sans-serif;
  overflow: hidden;
}
.TaskContainer hr {
  border-color: #d9d9d9;
}

.TaskHeader {
  padding-top: 3em;
}
.TaskHeader__banner {
  position: fixed;
  left: -3em;
  right: -3em;
  top: -3em;
  bottom: -3em;
  overflow: hidden;
  filter: blur(3em);
  z-index: -1;
  height: 60vh;
}
@media (max-width: 991px) {
  .TaskHeader__banner {
    top: 3em;
  }
}
.TaskHeader__banner img {
  width: 100%;
  height: auto;
}
.TaskHeader__exercise {
  position: relative;
  background-color: #f8fafe;
  min-height: 110px;
}
@media (min-width: 992px) {
  .TaskHeader__exercise {
    padding-top: 25px;
    padding-bottom: 40px;
  }
}
.TaskHeader__exercise .GorroTip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  right: 15px;
  top: 25px;
  background-color: white;
}
.TaskHeader__exercise .GorroTip--inactive img {
  opacity: 0.65;
}
@media (min-width: 1425px) {
  .TaskHeader__exercise .GorroTip {
    top: -50px;
    right: -120px;
  }
}
.TaskHeader__exercise .GorroTip img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border: 2px solid white;
  border-radius: 50%;
}
.TaskHeader__storyInfo {
  display: inline-block;
  color: #37274F !important;
  font-weight: bold;
  margin-bottom: 1.85em !important;
  font-size: 16px;
}
@media (max-width: 450px) {
  .TaskHeader__storyInfo {
    display: flex;
  }
}
.TaskHeader__storyInfo span {
  border-bottom: 2px solid #37274F;
  padding-bottom: 0.4em;
}
@media (max-width: 450px) {
  .TaskHeader__storyInfo span {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    word-break: n;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom: 2px;
  }
}
@media (max-width: 350px) {
  .TaskHeader__storyInfo span {
    max-width: 100px;
  }
}
.TaskHeader__storyInfo:hover {
  text-decoration: none;
}
@media (max-width: 992px) {
  .TaskHeader__storyInfo__titleBox {
    margin-bottom: 1rem;
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05), 0px 2px 0px rgba(45, 45, 45, 0.15);
  }
}
@media (min-width: 992px) {
  .TaskHeader__storyInfo__storyTitle {
    max-width: 50%;
    margin-bottom: 3rem;
  }
}
.TaskHeader p, .TaskHeader h1 {
  color: #2d2d2d;
}
.TaskHeader h1 {
  font-weight: bold;
  margin-bottom: 0.5em;
  font-size: 1.733em;
  color: #37274F;
}
@media (max-width: 992px) {
  .TaskHeader h1 {
    font-size: 1.1em;
  }
}
.TaskHeader p {
  line-height: 1.7;
  font-size: 1.067em;
  color: #37274F;
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .TaskHeader p {
    font-size: 0.8em;
  }
}
.TaskHeader .container {
  position: relative;
}
.TaskHeader .container:before {
  content: "";
  background-image: url(https://assets.senorwooly.com/static/images/task-border-top.svg);
  background-repeat: no-repeat;
  position: absolute;
  top: 100px;
  left: -86px;
  right: 0;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 1356px;
  height: 205px;
}
@media (min-width: 769px) {
  .TaskHeader .container:before {
    display: block;
  }
}
.TaskHeader .TopTaskHeader {
  margin-bottom: 3em;
  padding-bottom: 3em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 768px) {
  .TaskHeader .TopTaskHeader {
    margin-top: 1em;
  }
}
.TaskHeader .TopTaskHeader .Primary__btn {
  margin: 0;
}
@media (max-width: 768px) {
  .TaskHeader .TopTaskHeader .Primary__btn {
    font-size: 0.85em;
  }
}
.TaskHeader .TopTaskHeader .ProgressIndicators,
.TaskHeader .TopTaskHeader .ProgressIndicator {
  display: flex;
  margin-top: 5px;
}
.TaskHeader .TopTaskHeader .ProgressIndicators {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .TaskHeader .TopTaskHeader .SkipButton {
    width: auto;
    height: auto;
    padding: 0.75em 1em 1em;
  }
  .TaskHeader .TopTaskHeader .SkipButton span {
    display: none;
  }
}

.TaskSlide {
  background: #f8fafe;
  padding-bottom: 2em;
  position: relative;
}
.TaskSlide:before {
  content: "";
  background-image: url(https://assets.senorwooly.com/static/images/task-border-left.svg);
  background-repeat: repeat-y;
  position: absolute;
  top: -8.3em;
  width: 105px;
  height: calc(100% + 300px);
  left: -6.6em;
}
@media (min-width: 769px) {
  .TaskSlide:before {
    display: block;
  }
}
.TaskSlide:after {
  content: "";
  background-image: url(https://assets.senorwooly.com/static/images/task-border-right.svg);
  background-repeat: repeat-y;
  position: absolute;
  top: -8.3em;
  width: 105px;
  height: calc(100% + 300px);
  right: -7em;
}
@media (min-width: 769px) {
  .TaskSlide:after {
    display: block;
  }
}

.ExcerciseBlock {
  margin-top: 3em;
}
@media (max-width: 768px) {
  .ExcerciseBlock {
    margin-top: 1em;
  }
}
@media (max-width: 768px) and (max-width: 400px) {
  .ExcerciseBlock {
    margin-bottom: 0;
  }
}

.GorroTip__tooltip {
  background-color: #37274F !important;
  padding: 0;
  box-shadow: none;
  max-width: 335px;
  border-radius: 50px !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden;
}
.GorroTip__tooltip .rc-tooltip-arrow {
  display: none !important;
}
.GorroTip__tooltip .rc-tooltip-inner {
  padding: 10px 25px;
  background-color: #37274F !important;
  color: white;
  font-size: 14px;
}

.ProgressIndicators {
  display: flex;
  justify-content: center;
  margin-bottom: 2em;
}

.ProgressIndicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 11px;
  background-position: center;
  background-color: white;
}
.ProgressIndicator:not(:last-of-type) {
  margin-right: 10px;
}
.ProgressIndicator--correct, .ProgressIndicator--wrong, .ProgressIndicator--redone {
  border: none;
}
.ProgressIndicator--correct {
  background-color: #71ae71;
  background-image: url("https://assets.senorwooly.com/static/images/check.svg");
}
.ProgressIndicator--wrong {
  background-color: #ff4141;
  background-image: url("https://assets.senorwooly.com/static/images/x.svg");
}
.ProgressIndicator--redone {
  background-color: #37274F;
}

.TrueFalse__question {
  text-align: center;
  line-height: 1.6;
  font-size: 22px;
  font-weight: bold;
  color: #37274F;
  margin-top: 2em;
}

.TrueFalse__controls {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 2em;
}
@media (max-width: 992px) {
  .TrueFalse__controls {
    flex-direction: column;
    align-items: center;
  }
}

.TrueFalse .Media__container {
  width: 100%;
  height: 100%;
  text-align: center;
}
.TrueFalse .Media__container .VideoPlayer {
  height: 17em;
}

.Introduction__video,
.Introduction__controls {
  width: 100%;
  display: flex;
}

.Introduction__video {
  justify-content: center;
  margin-bottom: 2em;
}
.Introduction__video .VideoPlayer {
  height: 30em;
}
@media (max-width: 992px) {
  .Introduction__video .VideoPlayer {
    height: 17em;
  }
}
.Introduction__video--vimeoWrapper {
  width: 100%;
}
.Introduction__video--vimeo {
  position: relative;
  width: 100%;
  padding-bottom: 42.25%;
  overflow: hidden;
}
.Introduction__video--vimeo > div:first-of-type {
  height: unset !important;
  width: unset !important;
}
.Introduction__video--vimeo iframe,
.Introduction__video--vimeo .embed-container object,
.Introduction__video--vimeo .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Introduction__controls {
  justify-content: flex-end;
}
@media (max-width: 992px) {
  .Introduction__controls {
    justify-content: center;
  }
}
.Introduction__controls .Primary__btn {
  width: 100%;
  margin-top: 0;
  margin-bottom: 2em;
}
@media (max-width: 992px) {
  .Introduction__controls .Primary__btn {
    margin-top: 0.5em;
  }
}

.MultipleChoiceAnswer {
  width: 100%;
  height: 100%;
  margin-bottom: 2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 2px 4px 0 rgba(231, 210, 210, 0.3);
  transition: background-color 200ms;
  border: 2px solid transparent;
}
.MultipleChoiceAnswer--selected {
  background-color: #FD5B24;
  color: white;
  transition: background-color 0ms;
}
.MultipleChoiceAnswer--selected .MultipleChoice__select {
  border-color: white;
}
.MultipleChoiceAnswer--selected .MultipleChoice__select--multiple {
  background-color: white;
}
.MultipleChoiceAnswer--selected .MultipleChoice__selectDot {
  display: block;
  border-color: white;
}
@media only screen and (min-device-width: 1366px) {
  .MultipleChoiceAnswer:not(.MultipleChoiceAnswer--multiple):hover {
    background-color: #FD5B24;
    color: white;
    transition: background-color 0ms;
  }
  .MultipleChoiceAnswer:not(.MultipleChoiceAnswer--multiple):hover .MultipleChoice__select {
    border-color: white;
  }
  .MultipleChoiceAnswer:not(.MultipleChoiceAnswer--multiple):hover .MultipleChoice__select--multiple {
    background-color: white;
  }
  .MultipleChoiceAnswer:not(.MultipleChoiceAnswer--multiple):hover .MultipleChoice__selectDot {
    display: block;
    border-color: white;
  }
  .MultipleChoiceAnswer:not(.MultipleChoiceAnswer--selected).MultipleChoiceAnswer--multiple:hover {
    border: 2px solid #FD5B24;
    color: #FD5B24;
  }
  .MultipleChoiceAnswer:not(.MultipleChoiceAnswer--selected).MultipleChoiceAnswer--multiple:hover .MultipleChoice__select {
    border-color: #FD5B24;
  }
}
.MultipleChoiceAnswer--correct, .MultipleChoiceAnswer--wrong {
  color: white;
  background-position: 15px center;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  padding-left: 45px;
}
.MultipleChoiceAnswer--correct .MultipleChoice__select, .MultipleChoiceAnswer--wrong .MultipleChoice__select {
  display: none;
}
.MultipleChoiceAnswer--correct {
  background-color: #71ae71;
  background-image: url("https://assets.senorwooly.com/static/images/check.svg");
}
.MultipleChoiceAnswer--wrong {
  background-color: #ff4141;
  background-image: url("https://assets.senorwooly.com/static/images/x.svg");
}
.MultipleChoiceAnswer p {
  margin: 0;
}

.MultipleChoice__select {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 2px solid #37274F;
  margin: 0 1em !important;
}
.MultipleChoice__selectDot {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: white;
  display: none;
}
.MultipleChoice__select--multiple {
  border-radius: 3px;
}
.MultipleChoice__select--multiple .MultipleChoice__selectDot {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: transparent;
}
.MultipleChoice__select--multiple .MultipleChoice__selectDot:before {
  content: "\f00c";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #FD5B24;
  font-family: "Font Awesome 5 Pro";
  font-size: 12px;
  font-weight: 600;
}

.MultipleChoice__controls {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 991px) {
  .MultipleChoice__controls {
    justify-content: center;
    margin-bottom: 4em;
  }
}

.MultipleChoice__index {
  margin-right: 15px !important;
}

.MultipleChoiceExercise .VideoPlayer {
  height: 16em;
}
.MultipleChoiceExercise .MediaObject {
  margin-bottom: 2.667em;
}

.Exercise {
  margin-bottom: 2em;
}

.MultipleChoiceAnswer .MediaType__image {
  position: relative;
  width: 100%;
  height: 100%;
}
.MultipleChoiceAnswer .MediaType__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.MultipleChoiceAnswer .AudioPlayer {
  width: 100%;
  height: 60px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.MultipleChoiceAnswer .VideoPlayer {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.MultipleChoiceAnswer .VideoPlayer video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 100%;
  min-width: 100%;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background-size: cover;
}

.ReorderAnswer__inner,
.Reorder__select,
.ReorderAnswer__dragHandle {
  align-items: center;
}

.ReorderAnswer,
.ReorderAnswer__inner,
.Reorder__select,
.ReorderAnswer__dragHandle {
  display: flex !important;
}

.ReorderAnswer {
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin-bottom: 2em;
  padding: 0;
  background-color: white;
  border-radius: 3px;
  user-select: none;
  box-shadow: 0 2px 4px 0 rgba(231, 210, 210, 0.3);
  transition: background-color 200ms;
}
.ReorderAnswer:hover {
  transition: background-color 0ms;
}
@media (max-width: 991px) {
  .ReorderAnswer {
    margin-bottom: 1.5em;
  }
}
@media (max-width: 768px) {
  .ReorderAnswer {
    margin-bottom: 1em;
  }
}
.ReorderAnswer p {
  margin: 0;
}
.ReorderAnswer__dragHandle {
  width: 10%;
  text-align: center;
  justify-content: center;
  color: #FD5B24;
  font-size: 1.5em !important;
  cursor: -webkit-grab;
}
@media (max-width: 991px) {
  .ReorderAnswer:first-of-type {
    margin-top: 2em;
  }
}

.ReorderAnswer__inner {
  width: 90%;
}

.Reorder__select {
  justify-content: center;
  min-height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 2px solid #37274F;
  margin: 0 1em !important;
}

.Reorder__selectDot {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: white;
  display: none;
}

.Reorder__controls {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 992px) {
  .Reorder__controls {
    justify-content: center;
  }
}

.Reorder__index {
  text-align: center;
  width: 15%;
  font-weight: bold;
}

.Reorder__title {
  color: #37274F;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.64;
  margin-top: 0;
  margin-bottom: 1em;
}

.Reorder__subTitle {
  color: #2d2d2d;
  opacity: 0.5;
  font-weight: 400;
}

.Exercise {
  margin-bottom: 2em;
}

.ReorderAnswer .MediaType__image {
  position: relative;
  width: 100%;
  height: 100%;
}
.ReorderAnswer .MediaType__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.ReorderAnswer .AudioPlayer {
  width: 100%;
  height: 60px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.ReorderAnswer .VideoPlayer {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.ReorderAnswer .VideoPlayer video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 100%;
  min-width: 100%;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background-size: cover;
}

.Reorder__sort {
  display: flex;
  flex-direction: column;
}

.Matching__exercise {
  margin-bottom: 2em;
  line-height: 1.36;
  font-weight: 600;
}
@media (max-width: 991px) {
  .Matching__exercise {
    margin-bottom: 1em;
  }
}

.MatchingReview {
  padding: 0 0 2em 0;
  margin-bottom: 2em;
}
@media (min-width: 991px) {
  .MatchingReview {
    background-color: #d2d2dd;
    padding: 2em;
  }
}
.MatchingReview h3 {
  font-weight: 600;
}
.MatchingReview h4 {
  font-weight: normal;
  color: #2d2d2d;
  text-align: center;
  opacity: 0.4;
  margin-top: 3em;
  margin-bottom: 3.25em;
}
.MatchingReview p {
  font-size: 1.2em;
  color: #d9d9d9;
  padding: 2em 0;
  text-align: center;
}

.Matching__controls {
  width: 100%;
  display: flex;
  justify-content: center;
}

.Match {
  position: relative;
  margin: 3em 0;
}
.Match__done {
  color: #FD5B24;
  font-weight: 600;
  margin: 4em 0;
  text-align: center;
}

.Match__line {
  height: 2px;
  background-color: #FD5B24;
  width: 35em;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 991px) {
  .Match__line {
    width: 100%;
  }
}

.Match__button {
  cursor: pointer;
  position: absolute;
  top: -2.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  height: 5em;
  width: 5em;
  border-radius: 50%;
  background-color: #FD5B24;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.05);
}

.Match__button p {
  margin: 0;
}

.ReviewCard {
  position: relative;
  height: 100px;
  font-size: 14px;
  margin-top: 2em;
  margin-right: 15px;
  color: #37274F;
  background-color: white;
  box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}
.ReviewCard .ReviewCard__block {
  height: 100%;
  width: 100%;
  display: flex;
}
.ReviewCard .ReviewCard__single {
  position: relative;
  height: 100%;
  width: 50%;
  pointer-events: none;
}
.ReviewCard .ReviewCard__single .MediaObject {
  background-color: #37274F;
  overflow-x: hidden;
  border-radius: 3px;
}
.ReviewCard .ReviewCard__single .ReviewCard__identifier {
  position: absolute;
  left: 10px;
  bottom: 5px;
  color: #e6e8ec;
}
.ReviewCard .ReviewCard__single .ReviewCard__text {
  font-size: 0.8em;
  color: #37274F;
  padding: 2em 0;
  text-align: center;
}
.ReviewCard .ReviewCard__single .TaskSliderCard__block {
  width: 100%;
  height: 100%;
}
.ReviewCard .ReviewCard__single .AudioPlayer {
  flex-direction: row;
  height: 100%;
  width: 500%;
  justify-content: flex-start;
  align-items: center;
  transform: scale(0.6);
  margin-left: -5em;
  border-radius: 0;
}
@media (min-width: 1199px) {
  .ReviewCard .ReviewCard__single .AudioPlayer {
    width: 400%;
  }
}
.ReviewCard .ReviewCard__single .VideoPlayer {
  height: 100%;
}
.ReviewCard .ReviewCard__single .MediaType__image {
  width: 100%;
  height: 100%;
}
.ReviewCard .ReviewCard__single .MediaType__image img {
  width: inherit;
  height: inherit;
  object-fit: cover;
}

.ReviewCard__enlarge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #37274F;
  position: absolute;
  right: -12px;
  top: -12px;
  cursor: pointer;
  background-image: url("https://assets.senorwooly.com/static/images/search.svg");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center;
  z-index: 2;
  box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.05);
}

.ReviewModal .TaskSliderCard {
  height: 186px;
  width: 266px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
@media (min-width: 992px) {
  .ReviewModal .TaskSliderCard {
    margin-bottom: 1em;
  }
}
@media (min-height: 500px) and (max-width: 991px) {
  .ReviewModal .TaskSliderCard {
    margin-bottom: 1.5em;
  }
}

.Matching .slick-prev,
.Matching .slick-next {
  width: 40px;
  height: 40px;
  background-color: #ff7041;
  z-index: 5;
}
.Matching .slick-prev:hover, .Matching .slick-prev:focus, .Matching .slick-prev:visited,
.Matching .slick-next:hover,
.Matching .slick-next:focus,
.Matching .slick-next:visited {
  background-color: #ff7041;
  box-shadow: none;
}
.Matching .slick-prev {
  left: calc(50% - 225px);
}
@media (max-width: 550px) {
  .Matching .slick-prev {
    left: 15%;
  }
}
@media (max-width: 500px) {
  .Matching .slick-prev {
    left: 13%;
  }
}
@media (max-width: 450px) {
  .Matching .slick-prev {
    left: 8%;
  }
}
@media (max-width: 400px) {
  .Matching .slick-prev {
    left: 0;
  }
}
.Matching .slick-next {
  right: calc(50% - 225px);
}
@media (max-width: 550px) {
  .Matching .slick-next {
    right: 15%;
  }
}
@media (max-width: 500px) {
  .Matching .slick-next {
    right: 13%;
  }
}
@media (max-width: 450px) {
  .Matching .slick-next {
    right: 8%;
  }
}
@media (max-width: 400px) {
  .Matching .slick-next {
    right: 0;
  }
}
.Matching .slick-slide .TaskSliderCard {
  margin-left: 30px;
  margin-right: 30px;
  width: 23.571em;
  min-height: 233px;
  min-width: 333px;
  opacity: 0.45;
  transform: scale(0.9, 0.9);
}
@media (max-width: 768px) {
  .Matching .slick-slide .TaskSliderCard {
    margin-left: 1em;
    margin-right: 1em;
  }
}
@media (max-width: 550px) {
  .Matching .slick-slide .TaskSliderCard {
    width: 250px;
    height: 175px;
    min-width: unset;
    min-height: unset;
  }
}
@media (max-width: 400px) {
  .Matching .slick-slide .TaskSliderCard {
    margin-left: 0;
    margin-right: 0;
  }
}
.Matching .slick-slide.slick-center .TaskSliderCard {
  opacity: 1;
  transform: scale(1, 1);
}
.Matching .MatchingReview .slick-track {
  margin: 0;
}
.Matching .MatchingReview .slick-slide {
  opacity: 1;
  width: auto;
}

.slick-next,
.slick-prev {
  font: normal normal normal 30px/1 FontAwesome !important;
  margin-top: 0;
  color: white;
  box-shadow: 0 2px 0 0 #c4532e;
  border-radius: 8px;
}
.slick-next::before,
.slick-prev::before {
  opacity: 1 !important;
  font-family: inherit !important;
}
.slick-next.slick-disabled,
.slick-prev.slick-disabled {
  background-color: #e6e8ec;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
.slick-next.slick-disabled:hover, .slick-next.slick-disabled:focus, .slick-next.slick-disabled:visited,
.slick-prev.slick-disabled:hover,
.slick-prev.slick-disabled:focus,
.slick-prev.slick-disabled:visited {
  background-color: #e6e8ec;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}

.slick-next::before {
  font-family: "Font Awesome 5 Pro" !important;
  content: "\f061" !important;
}

.slick-prev::before {
  font-family: "Font Awesome 5 Pro" !important;
  content: "\f060" !important;
}

.ImageModal__mobile {
  border-radius: 3px;
}
@media (max-height: 399px) {
  .ImageModal__mobile {
    padding: 1em 6em;
  }
}
.ImageModal__mobile img {
  max-width: 100%;
}

.ImageModalBody__mobile p {
  font-family: "azo-sans-web", sans-serif;
  color: white;
  margin-top: 0.7143em;
  line-height: 1;
}

.ImageModalFooter__mobile {
  position: absolute;
  bottom: 1.313em;
  top: auto;
  left: 0;
  right: 0;
}
.ImageModalFooter__mobile .ImageModalCloseBtn__mobile {
  background: transparent;
  border: none;
}
.ImageModalFooter__mobile .ImageModalCloseBtn__mobile:focus {
  outline: none;
}
.ImageModalFooter__mobile img:hover {
  cursor: pointer;
}

.VideoPlayer {
  width: 100%;
  height: 10em;
}
.VideoPlayer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.VideoPlayer img:hover {
  cursor: pointer;
}

.video-js {
  width: 100% !important;
  height: 100% !important;
}
.video-js .vjs-tech {
  z-index: 1;
}
.video-js .vjs-slider {
  background-color: #6a5984 !important;
}
.video-js .vjs-control-bar {
  background-color: #37274F !important;
  z-index: 2;
}
.video-js .vjs-big-play-button {
  z-index: 4;
  width: 2.3em !important;
  height: 2.3em !important;
  background-color: transparent !important;
  border-radius: 50% !important;
  line-height: 2.15em !important;
  border: 0.1em solid #fff !important;
}

.vjs-poster {
  background-size: cover !important;
  z-index: 3;
}

.vjs-big-play-centered .vjs-big-play-button {
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  margin: auto !important;
}

@keyframes slidedown {
  from {
    transform: translateY(0);
  }
  from {
    opacity: 1;
    transform: translateY(0px);
  }
  70% {
    transform: translateY(16px);
  }
  to {
    opacity: 0;
    transform: translateY(26px);
  }
}
.FloatingTooltip {
  position: absolute;
  z-index: 1;
  bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  height: 60px;
  color: rgb(255, 255, 255);
  border-radius: 20px;
  background-color: rgba(65, 0, 100, 0.7882352941);
  display: flex;
  align-items: center;
  padding: 20px;
  width: 155px;
  opacity: 0.9;
}

.slidedown {
  margin-right: 8px;
  animation-name: slidedown;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.Primary__btn,
.Secondary__btn {
  display: flex;
  text-align: center;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #37274F;
  width: 200px;
  height: 60px;
  border-radius: 3px;
  font-weight: 600;
  transition: 250ms;
}
.Primary__btn:hover, .Primary__btn:active, .Primary__btn:focus,
.Secondary__btn:hover,
.Secondary__btn:active,
.Secondary__btn:focus {
  text-decoration: none;
  outline: 0;
}

.Primary__btn {
  background-color: white;
  border: 2px solid #37274F;
  margin-top: 3em;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}
.Primary__btn:hover {
  border: 2px solid #FD5B24;
  color: #FD5B24;
}
.Primary__btn--disabled {
  opacity: 0.35;
}
.Primary__btn--correct {
  color: white;
  background-color: #71ae71;
  border: 2px solid #71ae71;
}
.Primary__btn--wrong {
  color: white;
  background-color: #ff4141;
  border: 2px solid #ff4141;
}
.Primary__btn--info {
  color: white;
  background-color: #52cfef;
  border: 2px solid #52cfef;
}
.Primary__btn--partial {
  color: white;
  background-color: #FFCC5B;
  border: 2px solid #FFCC5B;
}
.Primary__btn--correct, .Primary__btn--info, .Primary__btn--wrong, .Primary__btn--partial {
  background-image: url("https://assets.senorwooly.com/static/images/chevron-right.svg");
  background-position: right 10px center;
  background-size: 15px 15px;
  background-repeat: no-repeat;
}
.Primary__btn--correct:hover, .Primary__btn--info:hover, .Primary__btn--wrong:hover, .Primary__btn--partial:hover {
  border: none;
  color: white;
}
.Primary__btn.Dashboard__btn {
  background-color: transparent;
  box-shadow: none;
  border: none;
  height: 3.125em;
  width: auto;
  margin: 0;
  padding: 0 1em;
  font-size: 1.067em;
  border-radius: 8px;
  display: inline-block;
  padding: 0.75em 1em 1em;
}
.Primary__btn.Dashboard__btn:hover {
  color: #37274F;
  border: none;
  background-color: white;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
.Primary__btn.Dashboard__btn--inverted {
  background-color: white;
  color: #37274F;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
.Primary__btn.Dashboard__btn--inverted:hover {
  box-shadow: none;
}
.Primary__btn.Dashboard__btn img, .Primary__btn.Dashboard__btn .fa {
  margin-right: 0.5em;
}
.Primary__btn.TrueFalse__btn {
  background-image: none;
}
.Primary__btn.TrueFalse__btn i {
  margin-right: 5px;
}
.Primary__btn.TrueFalse__btn:hover i {
  color: #FD5B24;
  transition: 200ms;
}
.Primary__btn.TrueFalse__btn:active, .Primary__btn.TrueFalse__btn.Primary__btn--selected {
  color: white;
  background-color: #FD5B24;
  outline: 0;
}
.Primary__btn.TrueFalse__btn:active i, .Primary__btn.TrueFalse__btn.Primary__btn--selected i {
  color: white;
}
.Primary__btn.TrueFalse__btn:last-of-type {
  margin-left: 2em;
}
@media (max-width: 992px) {
  .Primary__btn.TrueFalse__btn:last-of-type {
    margin-left: 0;
    margin-top: 1em;
  }
}
.Primary__btn.TrueFalse__btn.Primary__btn--wrong:hover i, .Primary__btn.TrueFalse__btn.Primary__btn--correct:hover i {
  color: white;
}

.Secondary__btn {
  flex-direction: column;
  flex-wrap: wrap;
  background-color: #e6e8ec;
  border: 1px solid #d9d9d9;
  box-shadow: 0 2px 3px 0 rgba(231, 210, 210, 0.3);
}
.Secondary__btn:hover {
  border: 2px solid #37274F;
  background-color: white;
  color: #37274F;
}
.Secondary__btn:active {
  color: white;
  background-color: #37274F;
}
.Secondary__btn.Primary__btn--disabled {
  opacity: 0.5;
}
.Secondary__btn.Primary__btn--disabled:hover, .Secondary__btn.Primary__btn--disabled:active {
  background-color: #e6e8ec;
  color: #37274F;
  border: 1px solid #d9d9d9;
}
.Secondary__btn span {
  font-weight: 400;
}

.btnMarkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 150ms;
  padding: 14px 25px 15px 25px;
  color: white;
  border-radius: 49px;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  border: 0;
  outline: 0;
}
.btnMarkt i {
  margin-right: 6px;
}
@media (min-width: 1200px) {
  .btnMarkt {
    padding: 19px 45px 20px 45px;
  }
}
.btnMarkt:hover {
  transform: scale(0.98);
  text-decoration: none;
}
.btnMarkt--small {
  padding: 11px 25px 12px 25px;
}
.btnMarkt--tiny {
  padding: 11px 17px 12px 17px;
  font-size: 1.125rem;
}
.btnMarkt--min-width {
  min-width: 150px;
}
.btnMarkt--short {
  padding: 9px 24px 10px 24px;
  font-size: 1.125rem;
}
.btnMarkt--nav {
  padding: 14px 38px;
  font-size: 1.125rem;
  margin-top: 22px;
}
@media (max-width: 992px) {
  .btnMarkt--nav {
    margin-top: 5px;
  }
}
.btnMarkt--nav--student {
  margin-top: unset;
}
.btnMarkt--primary {
  background-color: #FD5B24;
  box-shadow: 0px 2px 0px #DA5E35;
}
.btnMarkt--primary:hover {
  color: white;
}
.btnMarkt--secondary {
  background-color: #410064;
}
.btnMarkt--secondary:hover {
  color: white;
}
.btnMarkt--secondary--light {
  background-color: #51007D;
}
.btnMarkt--secondary--light:hover {
  color: white;
}
.btnMarkt--secondary--medium {
  background-color: #6A00A3;
}
.btnMarkt--secondary--medium:hover {
  color: white;
}
.btnMarkt--white {
  background-color: white;
  color: #FD5B24;
  box-shadow: 0px 2px 0px #A4A4A4;
}
.btnMarkt--white:hover {
  color: #FD5B24;
}
.btnMarkt--correct {
  background-color: #71ae71;
  box-shadow: 0 2px 0 0 #609660;
}
.btnMarkt--correct:hover {
  color: white;
}
.btnMarkt--wrong {
  background-color: #ff4141;
  box-shadow: 0 2px 0 0 #bf2d2d;
}
.btnMarkt--wrong:hover {
  color: white;
}
.btnMarkt__group--horizontal {
  display: flex;
}
.btnMarkt__group--horizontal .btnMarkt:not(:last-child) {
  margin-right: 1rem;
}
@media (max-width: 991px) {
  .btnMarkt__group--horizontal.mobile-50 .btnMarkt {
    width: 50%;
    font-size: 1rem;
    white-space: nowrap;
  }
}
.btnMarkt__group--wrap {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.btnMarkt__group--wrap .btnMarkt {
  margin-bottom: 0.75rem;
}
.btnMarkt__group--wrap .btnMarkt:not(:last-child) {
  margin-right: 0.75rem;
}
.btnMarkt__group--vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.btnMarkt__group--vertical .btn,
.btnMarkt__group--vertical .btnMarkt {
  min-width: 100%;
}
.btnMarkt__group--vertical .btn:not(:last-child),
.btnMarkt__group--vertical .btnMarkt:not(:last-child) {
  margin-bottom: 1.2rem;
}

.btn.btn--social {
  transition: 250ms;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid #d8d8d8;
  color: #37274F;
}
.btn.btn--social:hover {
  background-color: #FAFAFA;
}
.btn.btn--social img {
  width: 20px;
  height: auto;
  margin-right: 5px;
  margin-top: -1px;
}

@keyframes flashBall {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}
body.hasModal {
  overflow-y: hidden;
}

.Modal {
  position: fixed;
  top: 0;
  right: -1.067em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  z-index: 10000;
  width: calc(100% + 1.067em);
  overflow-y: scroll;
}
@media (max-width: 991px) {
  .Modal {
    z-index: 10002;
  }
}
.ModalBackdrop, .Modal__dialog {
  position: fixed;
  left: 0;
  right: 0;
}
.Modal .flashBall {
  position: absolute;
  left: 0;
  bottom: 0;
}
@media (max-width: 550px) {
  .Modal .flashBall {
    left: calc(100% - 30px);
    bottom: -10px;
  }
}
.Modal .textToolTip {
  transform: translate(calc(100% - 20px), calc(20px - 100%));
  padding: 0 0 30px 23px;
  right: 0;
  top: 0;
}
@media (max-width: 550px) {
  .Modal .textToolTip {
    padding: 0px 0px 30px 0px;
    transform: translate(-50%, -100%);
    left: 50%;
    top: 0;
  }
}
.ModalBackdrop {
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  background-color: rgba(34, 25, 46, 0.85);
}
.ModalBackdrop.transparent {
  background-color: transparent;
}
@media (max-width: 991px) {
  .ModalBackdrop.succeeded {
    background-image: radial-gradient(circle at 50% -142%, #a4ff00, #9bee34 20%, #92de4a 40%, #88ce59 60%, #7dbe66 81%, #71ae71);
  }
}
@media (max-width: 991px) {
  .ModalBackdrop.failed {
    background-image: radial-gradient(circle at 49% -12%, rgba(255, 252, 0, 0.25), rgba(255, 0, 0, 0)), linear-gradient(#ff4141, #ff4141);
  }
}
@media (max-width: 991px) {
  .ModalBackdrop.info {
    background-image: radial-gradient(circle at 49% -12%, rgba(255, 252, 0, 0.25), rgba(255, 0, 0, 0)), linear-gradient(#ff4141, #ff4141);
  }
}
.Modal__dialog {
  top: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 3.5em 3em;
  background-color: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
@media (min-width: 991px) {
  .Modal__dialog {
    max-height: 100%;
    margin: auto;
    background-color: #F1F2F4;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
}
.Modal__dialog.PasswordModal {
  background-color: white;
  position: absolute;
  margin-bottom: 2em;
  width: 60em;
}
@media (min-width: 991px) {
  .Modal__dialog.PasswordModal {
    top: 2em;
    bottom: auto;
    padding: 0 0 4.286em;
  }
}
@media (min-width: 992px) {
  .Modal__dialog.PasswordModal {
    margin-top: 75px;
  }
}
@media (min-width: 991px) and (min-height: 800px) {
  .Modal__dialog.PasswordModal {
    width: 500px;
  }
}
@media (min-width: 991px) {
  .Modal__dialog.TaskModal, .Modal__dialog.PasswordModal {
    height: auto;
    text-align: center;
    max-width: 100%;
    align-items: flex-start;
  }
}
@media (min-width: 991px) {
  .Modal__dialog.TaskModal {
    top: auto;
    bottom: calc(50% - 25vh);
    width: 35.714em;
    padding: 1.5em 3.5em 7em 3.5em;
  }
}
@media (min-width: 991px) {
  .Modal__dialog.ReviewModal {
    height: 38em;
    width: 29em;
    max-width: 50%;
  }
}
.Modal__dialog.StoryModal {
  text-align: left;
  padding-top: 6.667em;
  background-color: transparent;
  align-items: flex-start;
  overflow-y: scroll;
}
@media (max-width: 991px) {
  .Modal__dialog.StoryModal {
    padding: 0;
  }
  .Modal__dialog.StoryModal .slick-track {
    margin-top: 50px;
  }
  .Modal__dialog.StoryModal .unslicked {
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 100px;
  }
}
.Modal__dialog.StoryModal .StoryModalBackdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 16px;
  bottom: 0;
  background: transparent;
  z-index: -1;
}
.Modal__dialog.LyricModal {
  padding: 0;
}
.Modal__dialog.ImageModal__mobile {
  padding: 3.5em 0;
}
.Modal__dialog.ImageModal__mobile .Modal__button:first-of-type:last-of-type {
  width: 100%;
}
.Modal__dialog .Modal__text {
  color: white;
  font-size: 1.143em;
  line-height: 1.5;
}
.Modal__dialog .Modal__title {
  color: #37274F;
  font-weight: 600;
  margin-bottom: 1em;
  font-size: 1.3em;
  margin-top: 0;
}
.Modal__dialog .Modal__buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.Modal__dialog .Modal__button {
  transition: 200ms;
  width: 50%;
  padding: 1em;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  background-color: white;
  color: #37274F;
}
.Modal__dialog .Modal__button:hover {
  box-shadow: none;
  background-color: #FD5B24;
  color: white;
}
.Modal__dialog .Modal__button:focus, .Modal__dialog .Modal__button:hover, .Modal__dialog .Modal__button:active {
  border: none;
  outline: none;
}
@media (min-width: 991px) {
  .Modal__dialog .Modal__button {
    box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 2px 10px 0 rgba(0, 0, 0, 0.05);
  }
}
.Modal__dialog .Modal__button.warning, .Modal__dialog .Modal__button.delete, .Modal__dialog .Modal__button.failed, .Modal__dialog .Modal__button.succeeded, .Modal__dialog .Modal__button.info {
  color: white;
}
.Modal__dialog .Modal__button.warning:hover, .Modal__dialog .Modal__button.delete:hover, .Modal__dialog .Modal__button.failed:hover, .Modal__dialog .Modal__button.succeeded:hover, .Modal__dialog .Modal__button.info:hover {
  box-shadow: none;
  background-color: #37274F;
  color: white;
}
.Modal__dialog .Modal__button.delete, .Modal__dialog .Modal__button.failed {
  background-color: #f33d3d;
}
@media (min-width: 991px) {
  .Modal__dialog .Modal__button.delete, .Modal__dialog .Modal__button.failed {
    box-shadow: 0 2px 0 0 #bf2d2d;
  }
}
.Modal__dialog .Modal__button.info {
  background-color: #48b5d1;
}
@media (min-width: 991px) {
  .Modal__dialog .Modal__button.info {
    box-shadow: 0 2px 0 0 #3e9bb3;
  }
}
.Modal__dialog .Modal__button.succeeded {
  background-color: #669d66;
}
@media (min-width: 991px) {
  .Modal__dialog .Modal__button.succeeded {
    box-shadow: 0 2px 0 0 #609660;
  }
}
.Modal__dialog .Modal__button.warning {
  background-color: #e6653a;
}
@media (min-width: 991px) {
  .Modal__dialog .Modal__button.warning {
    box-shadow: 0 2px 0 0 #c4532e;
  }
}
.Modal__dialog .Modal__button.purple {
  background-color: #37274F;
  color: white;
}
@media (min-width: 991px) {
  .Modal__dialog .Modal__button.purple {
    box-shadow: 0 2px 0 0 #372a4b;
  }
}

.Modal__default {
  width: 500px;
  height: auto;
  top: auto;
  bottom: calc(50% - 25vh);
  padding: 2em;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  background: #f8fafe;
}
@media (max-height: 800px) {
  .Modal__default {
    bottom: calc(50% - 40vh);
  }
}
@media (max-width: 991px) {
  .Modal__default {
    height: 100%;
    width: 100%;
    bottom: 0;
  }
}
.Modal__default .Modal__title {
  font-size: 1.5em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.5em;
}
.Modal__default .Modal__body {
  padding-bottom: 55px;
}
@media (max-width: 991px) {
  .Modal__default .Modal__body {
    padding-bottom: 0px;
  }
}
.Modal__default .Modal__button:first-of-type:last-of-type {
  width: 100%;
  border-bottom-right-radius: 8px;
  background-color: #372a4b;
  color: white;
}
.Modal__default .Modal__button:nth-child(2) {
  transition: 200ms;
  background-color: #372a4b;
  color: white;
  border-bottom-right-radius: 8px;
}

.ReviewModal .container {
  width: 100%;
}
@media (max-width: 991px) {
  .ReviewModal .container .ReviewModal__cards {
    margin: 0 -2.5em;
  }
}
.ReviewModal .Modal__title {
  display: none;
}
@media (min-width: 991px) {
  .ReviewModal .Modal__title {
    display: block;
  }
}
@media (min-width: 991px) {
  .ReviewModal .Modal__button {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  }
}

.TaskModal--failed {
  background-image: radial-gradient(circle at 49% -12%, rgba(255, 252, 0, 0.25), rgba(255, 0, 0, 0)), linear-gradient(#ff4141, #ff4141);
}
@media (max-width: 991px) {
  .TaskModal--failed > .container {
    background-color: #ff4141;
  }
}
.TaskModal--failed .ContentBlock {
  box-shadow: 0 2px 0 0 #bf2d2d;
  background-color: #ff4141;
}
.TaskModal--failed .Modal__button:nth-of-type(1) {
  color: #ff4141;
}

.TaskModal--info {
  background-image: radial-gradient(circle at 49% -12%, #52cfef, #48b5d1), linear-gradient(#ff4141, #ff4141);
}
@media (max-width: 991px) {
  .TaskModal--info > .container {
    background-color: #52cfef;
  }
}
.TaskModal--info .ContentBlock {
  box-shadow: 0 2px 0 0 #3e9bb3;
  background-color: #52cfef;
}
.TaskModal--info .Modal__button:nth-of-type(1) {
  color: #52cfef;
}

.ProgressIndicator--blue {
  color: #fff;
  background-color: #3F8AB2;
}

.TaskModal--succeeded {
  background-image: radial-gradient(circle at 50% -142%, #a4ff00, #9bee34 20%, #92de4a 40%, #88ce59 60%, #7dbe66 81%, #71ae71);
}
@media (max-width: 991px) {
  .TaskModal--succeeded > .container {
    background-color: #71ae71;
  }
}
.TaskModal--succeeded .ContentBlock {
  box-shadow: 0 2px 0 0 #609660;
  background-color: #71ae71;
}
.TaskModal--succeeded .Modal__button:nth-of-type(1) {
  color: #71ae71;
}
.TaskModal--succeeded .Modal__button:nth-of-type(1):last-of-type {
  width: 100%;
}

.TaskModal {
  z-index: 10000;
}
@media (min-width: 992px) {
  .TaskModal {
    width: 500px;
  }
}
@media (max-width: 991px) {
  .TaskModal {
    background-image: none;
    background-color: transparent;
  }
  .TaskModal > .container {
    height: 100%;
    max-width: 85%;
    margin-top: 15vh;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}
.TaskModal__art {
  position: fixed;
  height: auto;
  left: auto;
  z-index: 9999;
  margin-right: 41px;
}
@media (max-width: 991px) {
  .TaskModal__art {
    margin-right: 16px;
    top: 7.5vh;
  }
}
.TaskModal__art--succeeded {
  width: 48em;
  bottom: calc(50% - 29.5vh);
}
@media (max-height: 1120px) {
  .TaskModal__art--succeeded {
    bottom: 18%;
  }
}
@media (min-height: 1121px) and (max-height: 1255px) {
  .TaskModal__art--succeeded {
    bottom: 20%;
  }
}
@media (max-width: 991px) {
  .TaskModal__art--succeeded {
    width: 100%;
  }
}
.TaskModal__art--failed, .TaskModal__art--info {
  width: 57em;
  height: 39em;
  bottom: calc(50% - 34.5vh);
}
@media (max-height: 1120px) {
  .TaskModal__art--failed, .TaskModal__art--info {
    bottom: 12%;
  }
}
@media (min-height: 1121px) and (max-height: 1255px) {
  .TaskModal__art--failed, .TaskModal__art--info {
    bottom: 20%;
  }
}
@media (max-width: 991px) {
  .TaskModal__art--failed, .TaskModal__art--info {
    width: 100%;
    height: auto;
  }
}
.TaskModal .Modal__title {
  color: #ffffff;
  font-size: 1.5em;
  margin-bottom: 10px;
}
.TaskModal .Modal__text {
  font-size: 1em;
  max-width: 80%;
  margin: 0 auto 25px auto;
}
.TaskModal .Modal__SeparateLine {
  display: none;
  width: 100%;
  height: 1px;
  opacity: 0.7;
  border-radius: 2px;
  background-color: #ffffff;
  margin-bottom: 2.857em;
}
.TaskModal .ProgressIndicators {
  margin-bottom: 15px;
}
@media (max-width: 991px) {
  .TaskModal .ProgressIndicators {
    margin-top: -10px;
  }
}
.TaskModal .ProgressIndicator {
  width: 1.5em;
  height: 1.5em;
}
.TaskModal .WoolyCoin {
  position: relative;
  width: 96px;
  height: auto;
  margin-bottom: -30px;
  z-index: 1;
}
.TaskModal .ContentBlock {
  font-weight: 600;
  width: auto;
  padding: 20px 20px 5px 20px;
}
.TaskModal .ContentBlock p {
  color: #ffffff;
  margin-bottom: 0;
}
.TaskModal .Modal__button:hover {
  background-color: #37274F;
  color: white;
}

@media (max-width: 768px) {
  .StoryModal .container {
    width: 100%;
  }
}
.StoryModal .ContentBlock__title {
  padding: 0 15px;
  z-index: 10;
}
.StoryModal .ContentBlock__title .ViewAll {
  display: none;
}
.StoryModal .Modal__buttons {
  position: relative;
  margin-top: 10em;
}
@media (max-width: 768px) {
  .StoryModal .Modal__buttons {
    position: fixed;
    margin: 0;
    z-index: 2;
  }
}
.StoryModal .Modal__buttons .Modal__button {
  width: auto;
  display: inline-block;
  padding: 1em 4.533em;
  border-radius: 8px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
@media (min-width: 991px) {
  .StoryModal .Modal__buttons .Modal__button {
    position: fixed;
    bottom: 40px;
    z-index: 10;
  }
}
@media (max-width: 768px) {
  .StoryModal .Modal__buttons .Modal__button {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
  }
}
.StoryModal h3 {
  color: white;
  font-size: 32px;
  margin-bottom: 30px;
  position: relative;
}
@media (max-width: 768px) {
  .StoryModal h3 {
    font-size: 1.5em;
    position: fixed;
    left: 0.682em;
    right: 0.682em;
    top: 20px;
  }
}
.StoryModal h3 .SortSettingsDropDown {
  font-size: 16px;
  margin-top: 10px;
}
.StoryModal h3 .SortSettingsDropDown .isVisible {
  margin-left: 15px;
  color: white;
}
.StoryModal h3 .SortSettingsDropDown--visible {
  top: 10px;
}
.StoryModal h3 .SortSettingsDropDown--visible .isVisible {
  margin-left: 0;
  color: #37274F;
}
@media (max-width: 768px) {
  .StoryModal h3 .SortSettingsDropDown {
    display: flex;
    align-items: center;
  }
}
@media (max-width: 991px) {
  .StoryModal .StoryPickerList {
    margin-top: 50px;
  }
}
.StoryModal .StoryPickerList .StoryPickerList__item h3 {
  top: 30px;
}

.LyricModal .LyricModal__lyrics {
  background-color: white;
  border-radius: 8px;
  padding: 1em;
  margin-bottom: 1em;
  overflow-y: scroll;
  height: 60vh;
}
.LyricModal .LyricModal__lyrics p {
  white-space: pre-line;
}
.LyricModal .MediaObject {
  margin-bottom: 4em;
}
.LyricModal .MediaObject .AudioPlayer__play {
  min-width: 0;
}
.LyricModal .MediaObject .AudioPlayer__play .AudioPlayer__label {
  display: none;
}
.LyricModal .Modal__button:nth-of-type(1):last-of-type {
  width: 100%;
}

.PreviewModal {
  background-color: unset;
}
.PreviewModal img {
  height: auto;
  width: 100%;
}
.PreviewModal h3 {
  color: white;
  font-size: 1.2em;
  margin-top: 35px;
}
.PreviewModal .BadgeImage {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.PreviewModal .BadgeImage .ActiveBadgeIcon {
  width: 2.5em;
  height: 2.5em;
  background-size: 1.5em;
  bottom: 12%;
  right: 12%;
}
@media (max-width: 768px) {
  .PreviewModal .BadgeImage .ActiveBadgeIcon {
    width: 2em;
    height: 2em;
    bottom: 10%;
    right: 10%;
    background-size: 1.2em;
  }
}
.PreviewModal .BadgeInfo h3 {
  font-size: 28px;
  margin-bottom: 15px;
}
.PreviewModal .BadgeInfo p {
  color: white;
  opacity: 0.65;
}
.PreviewModal .Modal__button.pin, .PreviewModal .Modal__button.unpin {
  color: white;
}
.PreviewModal .Modal__button.pin:hover, .PreviewModal .Modal__button.unpin:hover {
  background-color: #FD5B24;
}
.PreviewModal .Modal__button.pin {
  background-color: #71ae71;
}
.PreviewModal .Modal__button.unpin {
  background-color: #ff4141;
}

.DesktopImg {
  display: inline-block;
}
@media (max-width: 550px) {
  .DesktopImg {
    display: none;
  }
}

.MobileImg {
  display: none;
}
@media (max-width: 550px) {
  .MobileImg {
    display: inline-block;
  }
}

.PasswordModal {
  align-items: unset;
  max-width: 100vw;
}
@media (max-width: 768px) {
  .PasswordModal {
    padding: 2em 0 3.5em 0;
  }
}
@media (max-width: 768px) {
  .PasswordModal > .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 3.5em;
    overflow-y: scroll;
  }
}
.PasswordModal .Modal__header,
.PasswordModal .Modal__body {
  padding: 1em;
}
.PasswordModal .Modal__header {
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
  margin-left: 3px;
}
@media (max-width: 768px) {
  .PasswordModal .Modal__header {
    margin: 0;
    padding: 0 0 2em 0;
  }
}
.PasswordModal .Modal__header h2 {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .PasswordModal .Modal__body {
    padding-top: 0;
  }
}
.PasswordModal .Modal__body p span {
  font-weight: bold;
}
.PasswordModal .Modal__body .icon-password-container {
  height: 2.222em;
  line-height: 2;
}
.PasswordModal .Modal__body .Primary__btn {
  margin: 1em auto 2em;
  height: 3.333em;
  width: 10em;
}
@media (max-width: 768px) {
  .PasswordModal .Modal__buttons {
    position: fixed;
  }
}
.PasswordModal .Modal__buttons .Modal__button:last-of-type {
  color: white;
  background-color: #37274F;
}
.PasswordModal .Modal__buttons .Modal__button:last-of-type:hover {
  background-color: #FD5B24;
}

.ModalCoinsTitle {
  font-size: 14px;
}
@media (max-width: 500px) {
  .ModalCoinsTitle {
    font-size: 12px;
  }
}

.FooterFlex {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.FooterFlex div:not(:first-child) {
  margin-left: 24px;
  margin-top: 0;
}
@media (max-width: 550px) {
  .FooterFlex {
    flex-direction: column;
  }
  .FooterFlex div:not(:first-child) {
    margin-top: 24px;
    margin-left: 0;
  }
}

.FailedBtn {
  width: 200px;
  height: 57px;
  border-radius: 28px;
  line-height: 57px;
  text-align: center;
  font-size: 14px;
}
.FailedBtn:first-child {
  color: #5E297B;
  background: #ffffff;
}
.FailedBtn:last-child {
  color: #ffffff;
  background: #5E297B;
}
@media (max-width: 550px) {
  .FailedBtn:first-child {
    color: #5E297B;
    background: #ffffff;
  }
  .FailedBtn:last-child {
    color: #ffffff;
    background: #D96753;
  }
}

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

.ModalCoinsCard {
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1529411765);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(calc(17px - 50%), -50%);
  background: #C74E4D;
  padding: 0 28px 0 40px;
  height: 46px;
  border-radius: 23px;
  line-height: 46px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
@media (max-width: 550px) {
  .ModalCoinsCard {
    font-size: 12px;
    width: max-content;
  }
}

.PlaythroughModalContainer {
  color: #fff;
  border-radius: 40px;
  flex-grow: 1;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(#6A10A3, #3B0558);
  border-radius: 0;
}

@media (max-width: 992px) {
  .PlaythroughModalContainer {
    max-width: 100vw;
    border-radius: 40px;
    flex-grow: 0;
    overflow: hidden auto;
    padding-bottom: 20px;
    padding-top: 120px;
  }
}
.ModalTitle {
  font-weight: bold;
  font-size: 37px;
  text-align: center;
}

.ApplyCoinsProgress {
  margin-left: 32px;
}

@media (max-width: 550px) {
  .ApplyCoinsProgress {
    margin-left: 0;
  }
  .ModalCoinsCard--mobile {
    position: relative;
    transform: translate(calc(17px - 50%), -170%);
  }
  .ModalTitle {
    font-size: 30px;
  }
}
.ProgressModal {
  background-image: radial-gradient(#67009F, #350052);
  width: 500px;
  height: auto;
  top: auto;
  bottom: calc(50% - 25vh);
  padding: 2em;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  overflow: visible;
}
@media (max-height: 800px) {
  .ProgressModal {
    bottom: calc(50% - 40vh);
  }
}
@media (max-width: 991px) {
  .ProgressModal {
    height: 100%;
    width: 100%;
    bottom: 0;
  }
}
.ProgressModal:before {
  content: "";
  position: absolute;
  top: -214px;
  background-size: contain;
  background-repeat: no-repeat;
  width: 500px;
  height: 100%;
}
@media (max-width: 991px) {
  .ProgressModal:before {
    width: 100%;
    top: 25px;
  }
}
.ProgressModal.ProgressModal__leaveTask:before {
  background-image: url("https://assets.senorwooly.com/static/images/early-exit.png");
  transform: scale(1.06);
  top: -100%;
}
.ProgressModal.ProgressModal__finishedStory:before {
  background-image: url("https://assets.senorwooly.com/static/images/finishedStory.png");
}
.ProgressModal.ProgressModal__finishedPlaythrough:before {
  background-image: url("https://assets.senorwooly.com/static/images/finishedPlaythrough.png");
}
.ProgressModal.ProgressModal__finishedNugget:before {
  top: -190px;
}
@media (max-width: 991px) {
  .ProgressModal.ProgressModal__finishedNugget:before {
    top: 15px;
  }
}
.ProgressModal.ProgressModal__nuggetImage-0:before {
  background-image: url("https://assets.senorwooly.com/static/images/finishedNugget-one.png");
}
.ProgressModal.ProgressModal__nuggetImage-1:before {
  background-image: url("https://assets.senorwooly.com/static/images/finishedNugget-two.png");
}
.ProgressModal.ProgressModal__nuggetImage-2:before {
  background-image: url("https://assets.senorwooly.com/static/images/finishedNugget-three.png");
}
.ProgressModal.ProgressModal__nuggetImage-3:before {
  background-image: url("https://assets.senorwooly.com/static/images/finishedNugget-four.png");
}
.ProgressModal .Modal__header {
  margin-bottom: 35px;
  margin-top: 20px;
}
.ProgressModal .Modal__header p {
  margin-top: 15px;
}
.ProgressModal .Modal__title {
  color: #ffffff;
  font-size: 1.5em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .ProgressModal .Modal__title {
    margin-top: 100px;
  }
}
.ProgressModal .Modal__body {
  padding-bottom: 55px;
}
@media (max-width: 991px) {
  .ProgressModal .Modal__body {
    padding-bottom: 0px;
  }
}
.ProgressModal p {
  font-size: 1em;
  color: #ffffff;
  max-width: 85%;
  text-align: center;
  margin: 0 auto;
}
.ProgressModal p:first-of-type {
  margin-bottom: 25px;
}
.ProgressModal__disclaimer {
  font-size: 12px;
  color: #ffffff;
  opacity: 0.6;
}
.ProgressModal .Modal__button:first-of-type:last-of-type {
  width: 100%;
  border-bottom-right-radius: 8px;
  background-color: #372a4b;
  color: white;
}
.ProgressModal .Modal__button:nth-child(1) {
  border-bottom-left-radius: 8px;
}
.ProgressModal .Modal__button:nth-child(2) {
  transition: 200ms;
  background-color: #372a4b;
  color: white;
  border-bottom-right-radius: 8px;
}
.ProgressModal .Modal__button:nth-child(2):hover {
  background-color: #FD5B24;
  color: white;
}
.ProgressModal .AudioPlayer {
  width: 100%;
  height: 240px;
  position: absolute;
  top: -190px;
  left: 0;
  right: 0;
  padding: 0;
  background: transparent;
}
@media (max-width: 991px) {
  .ProgressModal .AudioPlayer {
    top: 0;
    height: 52vw;
  }
}
.ProgressModal .AudioPlayer__play {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.ProgressModal .AudioPlayer__play {
  background-color: transparent;
  color: transparent;
  position: relative;
}
.ProgressModal .AudioPlayer__play .fa:after {
  display: none;
}
.ProgressModal .AudioPlayer__label {
  display: none;
}
.ProgressModal .AudioPlayer__time {
  display: none;
}
.ProgressModal .AudioPlayer__range {
  display: none;
}
.ProgressModal__score {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 128px;
  margin: 0 auto;
  padding: 0 5px;
  border-radius: 8px;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05);
}
.ProgressModal__score img {
  height: 95%;
  width: auto;
}
.ProgressModal__score p {
  font-weight: bold;
  margin-bottom: 0 !important;
}
.ProgressModal__progressBar span {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  font-size: 12px;
  color: white;
}
.ProgressModal__progressBar p {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 0 !important;
  margin-top: 5px;
}
.ProgressModal__progressBar progress {
  margin-top: 30px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  background-color: #d9d9d9;
  color: #FD5B24;
  border: 1px solid white;
  border-radius: 17px;
  overflow: hidden;
  padding: 1px;
  box-shadow: 0 2px 4px 0 rgba(45, 45, 45, 0.2);
}
@media (max-width: 991px) {
  .ProgressModal__progressBar progress {
    width: 100%;
  }
}
.ProgressModal__progressBar progress::-ms-fill {
  border: none;
}
.ProgressModal__progressBar progress::-moz-progress-value {
  background-color: #FD5B24;
}
.ProgressModal__progressBar progress::-webkit-progress-value {
  background-color: #FD5B24;
}
.ProgressModal__progressBar progress::-webkit-progress-bar {
  background-color: transparent;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.ProgressModal__progressBar progress::-moz-progress-bar {
  background-color: #FD5B24;
  border-radius: 8px;
  overflow: hidden;
}
.ProgressModal__progressBar--completed span {
  left: unset;
  right: 35px;
}
.ProgressModal__progressBar--completed progress {
  color: #71ae71;
}
.ProgressModal__progressBar--completed progress::-moz-progress-value {
  background-color: #71ae71;
}
.ProgressModal__progressBar--completed progress::-webkit-progress-value {
  background-color: #71ae71;
}
.ProgressModal__progressBar--completed progress::-moz-progress-bar {
  background-color: #71ae71;
}
.ProgressModal .extraLink {
  position: absolute;
  bottom: -65px;
  text-align: center;
  width: 100%;
}
.ProgressModal .extraLink span {
  text-decoration: underline;
}

.BadgeModal {
  width: 500px;
  height: auto;
  background-image: radial-gradient(circle at 50% -142%, #a4ff00, #9bee34 20%, #92de4a 40%, #88ce59 60%, #7dbe66 81%, #71ae71);
  position: absolute;
  top: auto;
  bottom: calc(50% - 25vh);
  overflow: visible;
}
@media (max-height: 800px) {
  .BadgeModal {
    bottom: calc(50% - 40vh);
  }
}
@media (max-width: 991px) {
  .BadgeModal {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    top: 0;
    padding: 0;
  }
}
.BadgeModal .Modal__title {
  color: white;
  font-size: 28px;
}
@media (max-width: 991px) {
  .BadgeModal .Modal__title {
    font-size: 24px;
  }
}
.BadgeModal .Modal__body .BadgeModal__badge {
  width: 45%;
  margin-bottom: 20px;
}
.BadgeModal .Modal__body h3 {
  color: white;
  font-size: 22px;
  margin-bottom: 10px;
}
.BadgeModal .Modal__body p {
  color: white;
  opacity: 0.8;
  padding-bottom: 30px;
}
.BadgeModal .Modal__button:first-of-type {
  border-bottom-left-radius: 8px;
}
.BadgeModal .Modal__button:last-of-type {
  background-color: #689A69;
  color: white;
  border-bottom-right-radius: 8px;
}
.BadgeModal .Modal__button:last-of-type:hover {
  color: #FD5B24;
}
.BadgeModal .BadgeModal__link {
  transition: 150ms;
  position: absolute;
  bottom: -45px;
  color: white;
  text-decoration: underline;
}
.BadgeModal .BadgeModal__link:hover {
  color: #FD5B24;
}
@media (max-width: 991px) {
  .BadgeModal .BadgeModal__link {
    bottom: 85px;
  }
}

.ContactModal {
  background-color: white;
  bottom: unset;
}
.ContactModal .Modal__title {
  text-align: left;
  margin-bottom: 1.7em;
}
@media (min-width: 992px) {
  .ContactModal .Modal__title {
    text-align: center;
    background-color: #f8fafe;
    width: calc(100% + 90px);
    margin-left: -45px;
    margin-top: -30px;
    padding: 30px 0;
  }
}
.ContactModal .Modal__body {
  padding-bottom: 15px;
}
.ContactModal form {
  display: flex;
  flex-wrap: wrap;
}
.ContactModal .TeacherForm__input {
  margin-bottom: 20px;
}
.ContactModal .ContactModal__field {
  display: inline-block;
}
.ContactModal .ContactModal__field:first-of-type, .ContactModal .ContactModal__field:nth-of-type(3) {
  margin-right: 10px;
}
@media (max-width: 768px) {
  .ContactModal .ContactModal__field:first-of-type, .ContactModal .ContactModal__field:nth-of-type(3) {
    margin-right: 0;
  }
}
.ContactModal .ContactModal__field:nth-of-type(-n + 4) {
  width: calc(50% - 5px);
}
@media (max-width: 768px) {
  .ContactModal .ContactModal__field:nth-of-type(-n + 4) {
    width: 100%;
  }
}
.ContactModal .ContactModal__field:last-of-type {
  width: 100%;
}
.ContactModal .ContactModal__field .TeacherForm__dropdown {
  margin-bottom: 0;
}
.ContactModal .ContactModal__field .TeacherForm__dropdown .TeacherForm__dropdown__options li {
  font-size: 1em;
}
.ContactModal textarea {
  width: 100%;
  resize: none;
  min-height: 7em;
}
.ContactModal .ContactModal__hasError {
  border: 1px solid #ff4141;
}
.ContactModal .ContactModal__errorMessage {
  color: #ff4141;
  font-size: 12px;
  float: left;
  margin-top: -10px;
  margin-bottom: 10px;
  text-align: left;
}
@media (min-width: 992px) {
  .ContactModal .Modal__buttons {
    position: relative;
  }
  .ContactModal .Modal__buttons button {
    box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    max-width: 180px;
  }
  .ContactModal .Modal__buttons button:first-of-type {
    margin-right: 15px;
  }
  .ContactModal .Modal__buttons button:last-of-type {
    margin-left: 15px;
  }
}

#loginModal-container {
  max-width: 100vw;
}

.tour-fallback-video {
  margin-top: 15px !important;
}
.tour-fallback-video .vjs-tech {
  position: relative !important;
}

.TextTip {
  max-width: 90%;
  margin: 0 auto;
}
@media (max-width: 550px) {
  .TextTip {
    max-width: auto;
  }
}

.PasswordModal .modal {
  top: 90px;
}
.PasswordModal .modal-dialog {
  max-width: 95%;
}
@media (min-width: 992px) {
  .PasswordModal .modal-dialog {
    max-width: 600px !important;
  }
}

.AvatarSelectModal {
  overflow: visible;
  padding-bottom: 75px !important;
  padding-right: 15px !important;
}
@media (max-width: 992px) {
  .AvatarSelectModal {
    padding: 0 !important;
  }
  .AvatarSelectModal .container {
    max-width: unset;
    width: 100%;
    margin-top: 0;
  }
}
.AvatarSelectModal .Modal__body {
  height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
@media (max-width: 992px) {
  .AvatarSelectModal .Modal__body {
    display: block;
    margin-top: 125px;
  }
}
.AvatarSelectModal .Modal__body .PopOver {
  width: 700px;
  position: absolute;
  right: -50px;
  top: -275px;
}
@media (max-width: 992px) {
  .AvatarSelectModal .Modal__body .PopOver {
    width: 85%;
    position: relative;
    right: 0;
    top: 0;
    margin-bottom: 25px;
  }
}
@media (max-width: 769px) {
  .AvatarSelectModal .Modal__body .PopOver {
    width: 100%;
  }
}
.AvatarSelectModal .Modal__body img:last-of-type {
  width: 175px;
}
@media (max-width: 992px) {
  .AvatarSelectModal .Modal__body img:last-of-type {
    width: 200px;
  }
}

.TaskModal--novel {
  overflow: visible;
  background: radial-gradient(156.38% 72.92% at 50% 31.89%, rgba(253, 255, 47, 0.3) 0%, rgba(255, 241, 0, 0.0001) 100%), #FF7041;
}
@media (max-width: 992px) {
  .TaskModal--novel > .container {
    background-color: transparent;
  }
}
@media (min-width: 992px) {
  .TaskModal--novel .row.center {
    display: flex;
    align-items: center;
  }
  .TaskModal--novel .row.center .col-xs-12 {
    padding: 0;
  }
}
.TaskModal--novel img {
  width: 224px;
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .TaskModal--novel img {
    transform: rotate(-11.75deg);
    margin-left: -125px;
    margin-top: -40px;
    margin-bottom: 10px;
  }
}
.TaskModal--novel h2 {
  text-align: left;
  font-size: 24px;
  color: white;
  margin-bottom: 25px;
}
.TaskModal--novel p {
  color: white;
  font-size: 18px;
}
@media (min-width: 992px) {
  .TaskModal--novel p {
    width: 110%;
    text-align: left;
  }
}

.Slider {
  overflow: hidden;
}

.SliderButton {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
}
@media (max-width: 540px) {
  .SliderButton {
    opacity: 0;
  }
}

.SliderCard {
  width: 333px;
}
@media (max-width: 540px) {
  .SliderCard {
    width: 250px;
  }
}

.BlueTooltip {
  background: #410064 !important;
  box-shadow: none !important;
}
.BlueTooltip .rc-tooltip-inner {
  background: #410064;
}
.BlueTooltip .rc-tooltip-arrow {
  border-top-color: #410064 !important;
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
    box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 100px 2px 100px 0 rgba(62, 47, 84, 0.2);
  }
}
@keyframes slide-out {
  0% {
    transform: translateX(0%);
    box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 100px 2px 100px 0 rgba(62, 47, 84, 0.2);
  }
  100% {
    transform: translateX(-100%);
  }
}
.MobilePageLink {
  display: none;
}
@media (max-width: 991px) {
  .MobilePageLink {
    display: inline-block;
  }
}

.TabletPageLink {
  display: none;
}
@media (max-width: 1199px) {
  .TabletPageLink {
    display: inline-block;
  }
}

.AssignmentSideNavigation,
.SideNavigation {
  text-align: center;
  width: 32.667em;
  max-width: 80%;
  position: fixed;
  height: 100%;
  z-index: 10000;
  top: 0;
  padding-top: 6.667em;
  background-color: #f8fafe;
  overflow-y: auto;
}

.AnimatedSideBar__backdrop__slide--in {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  background: transparent;
}

.SideNavigation {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}
.SideNavigation__slide--in {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}
.SideNavigation__slide--out {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}
.SideNavigation .MenuDropDown {
  display: none;
}
.SideNavigation .MenuDropDown--visible {
  margin: 10px 0 0 10px;
  display: block;
}
.SideNavigation .MenuDropDown--visible li {
  font-size: 0.9em;
}
.SideNavigation .MenuDropDown--visible li:not(:last-of-type) {
  margin-bottom: 5px;
}
.SideNavigation ul {
  padding-left: 0;
  padding-top: 5px;
}
.SideNavigation ul:last-of-type {
  padding: 0;
}
.SideNavigation li:hover {
  cursor: pointer;
}
.SideNavigation li:focus, .SideNavigation li:hover, .SideNavigation li:active {
  outline: none;
  border: none;
}
.SideNavigation li h4 {
  font-size: 1.067em;
  margin: 0;
  display: flex;
  align-items: center;
  font-weight: 400;
}
.SideNavigation li h4 .fa {
  margin-left: 0.5em;
  font-size: 0.75em;
}
.SideNavigation li ul {
  padding-top: 0;
  padding-left: 1em;
}
.SideNavigation li li {
  width: 100%;
  padding-bottom: 0;
}
.SideNavigation li li a {
  font-size: 1em;
}
.SideNavigation li, .SideNavigation h4 {
  margin-left: auto;
  text-align: left;
  width: 58%;
}
@media (max-width: 1560px) {
  .SideNavigation li, .SideNavigation h4 {
    width: 60%;
  }
}
@media (max-width: 1300px) {
  .SideNavigation li, .SideNavigation h4 {
    width: 90%;
  }
}
@media (max-width: 991px) {
  .SideNavigation li, .SideNavigation h4 {
    width: 77%;
  }
}
@media (max-width: 800px) {
  .SideNavigation li, .SideNavigation h4 {
    width: 93%;
  }
}
.SideNavigation li button.SignOut__btn {
  margin-right: auto;
  padding: 0;
  margin-top: 0;
  width: auto;
  display: inline-block;
  padding: 0.75em 2em;
  background-color: #ff4141;
  color: white;
  box-shadow: 0 2px 0 0 #bf2d2d;
  border: none;
}
.SideNavigation li button.SignOut__btn:hover {
  border: none;
}
.SideNavigation h4, .SideNavigation li, .SideNavigation a {
  color: #2d2d2d;
}
.SideNavigation li {
  font-size: 1.067em;
}
.SideNavigation a {
  font-size: 1.067em;
}
.SideNavigation a:hover {
  text-decoration: none;
  border-bottom: 1px solid #2d2d2d;
}
@media (max-width: 768px) {
  .SideNavigation a {
    font-size: 1em;
  }
}
.SideNavigation .MobilePageLink {
  display: none;
}
@media (max-width: 991px) {
  .SideNavigation .MobilePageLink {
    display: block;
  }
}
.SideNavigation .Menu__stories {
  font-size: 1.067em;
  font-weight: normal;
  cursor: pointer;
}
.SideNavigation .Menu__stories:hover {
  text-decoration: underline;
}
.SideNavigation .Menu__primary {
  padding-bottom: 0;
  margin-bottom: 0;
}
.SideNavigation .Menu__modalLinks {
  padding-top: 0;
}
.SideNavigation .Menu__modalLinks li:hover {
  text-decoration: underline;
}

.Navigation {
  background-color: #37274F;
  z-index: 10001;
  padding: 5px 0;
  position: relative;
}
.Navigation .row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.Navigation .mr-auto {
  margin-right: auto;
}
.Navigation .end {
  display: flex;
  justify-content: flex-end;
}
.Navigation img {
  width: 11.333em;
  margin-top: 1em;
  margin-bottom: 1em;
  max-width: 100%;
}
@media (max-width: 992px) {
  .Navigation img {
    width: 8em;
    margin-left: 15px;
  }
}
@media (max-width: 750px) {
  .Navigation__items {
    display: none;
  }
}
.Navigation__items a {
  color: white;
  font-weight: 600;
  margin-right: 50px;
  position: relative;
}
@media (max-width: 992px) {
  .Navigation__items a {
    margin-right: 25px;
  }
}
.Navigation__items a span {
  position: absolute;
  top: -15px;
  background-color: #FD5B24;
  font-weight: 600;
  padding: 1px 4px 2px 4px;
  border-radius: 3px;
  font-size: 0.66em;
}
.Navigation__search {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  width: 3em;
  min-width: 3em;
  background-color: #523d6f;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border-radius: 6px;
}
.Navigation__search i {
  display: block;
  color: white;
}
.Navigation .StudentProfile__link {
  margin: 0.5em 0;
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}
.Navigation .StudentProfile__link p {
  font-size: 16px;
  color: white;
  font-weight: bold;
  line-height: 1.25;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .Navigation .StudentProfile__link p {
    display: none;
  }
}
.Navigation .StudentProfile__link .studentProfile__wrapper {
  display: flex;
  align-items: center;
  height: 44px;
  margin: 0 10px 0 20px;
  border-radius: 5px;
  background-color: #523d6f;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}
.Navigation .StudentProfile__link .studentProfile__wrapper:hover {
  text-decoration: none;
}
@media (max-width: 768px) {
  .Navigation .StudentProfile__link .studentProfile__wrapper {
    margin: 0 10px 0 10px;
  }
}
.Navigation .StudentProfile__link .studentProfile__wrapper .studentProfile__avatar {
  width: 49px;
  height: auto;
  margin: -2px -5px 0 10px;
}
.Navigation .StudentProfile__link .studentProfile__wrapper .studentProfile__coin {
  width: 17px;
  height: auto;
  margin: 0 5px 0 10px;
}
.Navigation .StudentProfile__link .studentProfile__wrapper p {
  font-size: 14px;
}
@media (max-width: 768px) {
  .Navigation .StudentProfile__link .studentProfile__wrapper p {
    display: block;
  }
}

.BurgerMenu {
  width: 1.5em;
  margin: 0 0 0 1em;
  float: left;
}
@media (min-width: 992px) {
  .BurgerMenu {
    margin: 2px -5px 0 0;
  }
}
.BurgerMenu:hover {
  cursor: pointer;
}
.BurgerMenu .BurgerMenu__line {
  transition-duration: 0.2s;
  transition-property: transform;
  background-color: white;
  height: 2px;
  width: 100%;
  margin-bottom: 5px;
}
.BurgerMenu .BurgerMenu__line:nth-of-type(3) {
  margin-bottom: 0;
}
.BurgerMenu.js-open .BurgerMenu__line:nth-of-type(1), .BurgerMenu--open .BurgerMenu__line:nth-of-type(1) {
  transform: rotate(135deg);
}
.BurgerMenu.js-open .BurgerMenu__line:nth-of-type(2), .BurgerMenu--open .BurgerMenu__line:nth-of-type(2) {
  display: none;
}
.BurgerMenu.js-open .BurgerMenu__line:nth-of-type(3), .BurgerMenu--open .BurgerMenu__line:nth-of-type(3) {
  transform: rotate(45deg);
  margin-top: -7px;
}

@media (max-width: 1199px) {
  .header-main .container:first-of-type {
    width: 100vw;
  }
}
@media (max-width: 767px) {
  .header-main .container:first-of-type {
    height: 55px;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .header-main .logo img {
    width: 16vw;
    height: auto;
    margin-bottom: -10px;
  }
}
@media (max-width: 991px) {
  .header-main .navbar-default {
    padding-bottom: 0;
  }
}
@media (min-width: 769px) {
  .header-main .navbar-nav {
    background-color: transparent !important;
    float: right;
  }
}
@media (min-width: 769px) {
  .header-main .navbar-nav li {
    border-top: 0 !important;
  }
}
@media (max-width: 991px) {
  .header-main .navbar-nav .dropdown-toggle__caret {
    top: 33px;
    right: -10px;
  }
}
.header-main .navbar-nav .dropdown-menu {
  border-radius: 3px;
}
@media (min-width: 769px) {
  .header-main .navbar-nav .dropdown-menu li a {
    color: #746981 !important;
  }
}
@media (max-width: 991px) {
  .header-main .navbar-nav .stories-link {
    font-size: 12px;
  }
  .header-main .navbar-nav .stories-link button {
    height: 41px;
  }
}

.Navigation__dropdown {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10001;
  background-color: #2C1C43;
  color: white;
  padding: 60px 35px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 992px) {
  .Navigation__dropdown {
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 992px) {
  .Navigation__dropdown {
    top: 68px;
    max-width: 530px;
    padding-left: 73px;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .Navigation__dropdown {
    top: 60px;
  }
}
.Navigation__dropdown__close {
  cursor: pointer;
  font-size: 1.33em;
  font-weight: 600;
  margin-bottom: 50px;
}
@media (min-width: 992px) {
  .Navigation__dropdown__close {
    display: none;
  }
}
.Navigation__dropdown__close i {
  margin-right: 15px;
}
.Navigation__dropdown__quickmenu {
  margin-bottom: 35px;
}
@media (min-width: 992px) {
  .Navigation__dropdown__quickmenu {
    display: none;
  }
}
.Navigation__dropdown__quickmenu h2 {
  font-size: 60px;
  color: #24133D;
}
.Navigation__dropdown__inner {
  padding-bottom: 70px;
}
@media (min-width: 992px) {
  .Navigation__dropdown__inner {
    padding: 0 2px;
  }
}
.Navigation__dropdown__link {
  position: relative;
  display: block;
  transition: 250ms;
  color: white;
  text-decoration: none;
  opacity: 0.5;
  font-size: 1.06em;
  margin-bottom: 25px;
  font-weight: 600;
  padding-left: 25px;
  cursor: pointer;
}
@media (min-width: 992px) {
  .Navigation__dropdown__link {
    opacity: 1;
    margin-bottom: 35px;
    padding-left: 0;
  }
}
.Navigation__dropdown__link:hover, .Navigation__dropdown__link:focus, .Navigation__dropdown__link:active {
  color: #FD5B24;
  text-decoration: none;
}
.Navigation__dropdown__link:hover .pro, .Navigation__dropdown__link:focus .pro, .Navigation__dropdown__link:active .pro {
  color: white;
}
.Navigation__dropdown__link:nth-of-type(8) {
  position: relative;
  padding-bottom: 35px;
}
.Navigation__dropdown__link:nth-of-type(8):after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #4F3662;
  position: absolute;
  right: -50px;
  bottom: 0;
  width: 100%;
}
.Navigation__dropdown__link .pro {
  position: absolute;
  top: 4px;
  background-color: #FF7041;
  font-weight: 600;
  padding: 1px 4px 3px 4px;
  border-radius: 3px;
  font-size: 0.66em;
  margin-left: 10px;
}
.Navigation__dropdown__link.primary {
  opacity: 1;
  margin-bottom: 35px;
}
.Navigation__dropdown__link.inactive {
  opacity: 0.35;
  cursor: select;
  pointer-events: none;
  cursor: not-allowed;
}
.Navigation__dropdown__link.inactive:hover, .Navigation__dropdown__link.inactive:focus, .Navigation__dropdown__link.inactive:active {
  color: white;
  text-decoration: none;
}
.Navigation__dropdown .signout {
  position: relative;
  padding-bottom: 35px;
  width: auto;
  display: inline-block;
  padding: 16px 46px;
  background-color: #ff4141;
  color: white;
  box-shadow: 0 2px 0 0 #bf2d2d;
  border: none;
  border-radius: 6px;
}
.Navigation__dropdown .signout:hover {
  border: none;
}

#header-loggedin .Navigation__dropdown {
  display: none;
}

.navbar-top-message {
  display: block;
  width: 100%;
  background: #71ae71;
  color: white;
  padding: 10px 0;
  font-weight: 600;
  display: none;
}
@media (max-width: 992px) {
  .navbar-top-message {
    font-size: 12px;
  }
}
@media (max-width: 500px) {
  .navbar-top-message {
    font-size: 9px;
  }
}
.navbar-top-message:hover, .navbar-top-message:focus, .navbar-top-message:active {
  color: white;
  text-decoration: none;
}
.navbar-top-message .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 550px) {
  .navbar-top-message .container {
    flex-direction: column;
  }
}
.navbar-top-message .container span {
  margin-left: 30px;
}
.navbar-top-message .container > i {
  position: absolute;
  right: 15px;
  z-index: 1;
}
@media (max-width: 992px) {
  .navbar-top-message .container > i {
    margin-right: 12px;
  }
}

@media (max-width: 992px) {
  body.navMarktDropdown {
    overflow-y: hidden;
  }
}

.navMarkt {
  background-color: #410064;
}
@media (max-width: 992px) {
  .navMarkt.js-open {
    height: 100vh;
    overflow: scroll;
    position: fixed;
    width: 100%;
    z-index: 10;
  }
}
.navMarkt ul {
  padding: 1.6rem 0;
  margin-bottom: 0;
}
.navMarkt ul li {
  margin: 0;
  padding: 0;
}
.navMarkt ul li:active, .navMarkt ul li:focus, .navMarkt ul li:hover {
  text-decoration: none;
  border-bottom: 0;
}
.navMarkt ul li.navMarkt__logo {
  margin-right: 1rem;
}
.navMarkt ul li.hl-link a {
  padding: 0.5rem 2rem;
  border-radius: 4px;
  cursor: pointer;
}
.navMarkt ul li.hl-link a:hover {
  background-color: #4C1472;
}
.navMarkt ul li.hl-link a.navMarkt__dropdownToggle {
  padding: 0.5rem 1.5rem;
}
.navMarkt ul li a {
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
  user-select: none;
}
.navMarkt ul li a:hover {
  text-decoration: none;
}
.navMarkt .auth-button {
  height: 50px;
  border-radius: 25px;
  border: 0;
  outline: 0;
  padding: 0 32px;
  margin-right: 16px;
  background-color: #6A10A3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 150ms;
  color: #FFF;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  transition: transform 150ms;
}
@media (max-width: 992px) {
  .navMarkt .auth-button {
    padding: 0 24px;
  }
}
.navMarkt .auth-button.primary {
  background-color: #FF7041;
}
.navMarkt .auth-button:hover {
  transform: scale(0.98);
  text-decoration: none;
}
.navMarkt .auth-popover {
  top: 74px;
  border: none !important;
  border-radius: 8px;
  box-shadow: none;
  width: 200px;
  padding: 8px !important;
  background-color: #6A10A3 !important;
  display: none;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  cursor: default !important;
}
@media (max-width: 992px) {
  .navMarkt .auth-popover {
    width: 180px;
  }
}
.navMarkt .auth-popover.primary {
  background-color: #FF7041 !important;
}
.navMarkt .auth-popover.primary > .dropdown-menu-arrow::after {
  border-bottom-color: #FF7041 !important;
}
.navMarkt .auth-popover.primary > a > span {
  color: #410064;
}
.navMarkt .auth-popover.primary > a:hover {
  background-color: #FA6332;
}
.navMarkt .auth-popover > .dropdown-menu-arrow {
  width: 0 !important;
  left: calc(50% - 4px) !important;
}
.navMarkt .auth-popover > .dropdown-menu-arrow::after {
  top: 21px !important;
  border-bottom-color: #6A10A3 !important;
}
.navMarkt .auth-popover > a {
  width: 100%;
  padding: 8px 0;
  border-radius: 4px;
  cursor: pointer !important;
}
.navMarkt .auth-popover > a:hover {
  background-color: #862AC6;
}
.navMarkt .auth-popover > a > span {
  color: #FF7041;
}
.navMarkt .sign-up.open .signup.auth-popover,
.navMarkt .mobile-signup.open .signup.auth-popover,
.navMarkt .dropdown.show.open .login.auth-popover {
  display: flex;
}
.navMarkt .fx-cart-btn-container {
  margin-left: 8px;
}
@media (min-width: 992px) {
  .navMarkt .BurgerMenu {
    display: none;
  }
}
.navMarkt__items {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navMarkt__items ul {
  display: flex;
  align-items: center;
}
@media (max-width: 992px) {
  .navMarkt__items ul li:not(.navMarkt__logo) {
    display: none;
  }
}
.navMarkt__items .BurgerMenu {
  align-self: center;
}
.navMarkt__dropdownToggle {
  position: relative;
}
.navMarkt__dropdownToggle.js-open i {
  transform: rotate(180deg);
}
.navMarkt__dropdownToggle i {
  transition: 225ms;
  margin-left: 10px;
  font-size: 1rem;
}
.navMarkt__dropdownToggle:not(.navMarkt__dropdownToggle--dashboard) .navMarkt__dropdownToggle::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 75%;
  background-color: white;
  width: 2px;
}
.navMarkt__cart--mobile {
  display: none;
  color: white;
  font-size: 1.3rem;
}
@media (min-width: 992px) {
  .navMarkt__cart--mobile {
    display: none !important;
  }
}
.navMarkt__cart i {
  font-size: 1.5rem;
  margin-top: 7px;
}
.navMarkt__dropdown {
  z-index: 10;
  display: none;
  position: absolute;
  top: 89px;
  width: 100%;
  background: #410064;
}
@media (max-width: 992px) {
  .navMarkt__dropdown {
    padding-bottom: 120px;
  }
}
@media (min-width: 992px) {
  .navMarkt__dropdown {
    border-top: 2px solid #FD5B24;
    border-bottom: 2px solid #2f0048;
  }
}
.navMarkt__dropdown--open {
  display: block;
}
.navMarkt__dropdown__buttons {
  display: flex;
}
@media (min-width: 992px) {
  .navMarkt__dropdown__buttons {
    display: none;
  }
}
.navMarkt__dropdown .row {
  display: flex;
  flex-direction: column;
}
@media (max-width: 992px) {
  .navMarkt__dropdown .row:not(:first-of-type) {
    border-top: 1px solid white;
  }
}
@media (min-width: 992px) {
  .navMarkt__dropdown .row {
    flex-direction: row;
    border-top: 0;
  }
}
.navMarkt__dropdown .col-xs-12 {
  position: relative;
}
@media (min-width: 992px) {
  .navMarkt__dropdown .col-xs-12:not(:last-of-type)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 6.6rem);
    background-color: white;
    width: 2px;
  }
}
.navMarkt__dropdown ul {
  padding: 3.3rem 0;
  margin: 0;
}
@media (max-width: 992px) {
  .navMarkt__dropdown ul {
    padding: 2rem 0;
    border-bottom: 1px solid white;
  }
}
.navMarkt__dropdown ul li:not(:last-of-type) {
  margin-bottom: 1rem;
}
.navMarkt__dropdown ul.links li {
  margin-bottom: 0;
}
.navMarkt__dropdown ul.links li > a {
  display: block;
  width: calc(100% + 1rem);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-left: -1rem;
  cursor: pointer;
}
@media (max-width: 992px) {
  .navMarkt__dropdown ul.links li > a {
    width: 100%;
    margin-left: 0;
  }
}
.navMarkt__dropdown ul.links li > a:hover {
  background-color: #4C1472;
}
.navMarkt__dropdown__store {
  display: none;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  border-bottom: 1px solid white;
  padding: 2rem 0;
}
@media (min-width: 768px) {
  .navMarkt__dropdown__store {
    display: flex;
  }
}
@media (min-width: 992px) {
  .navMarkt__dropdown__store {
    border-bottom: 0;
  }
}
@media (min-width: 1520px) {
  .navMarkt__dropdown__store {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
  }
}
.navMarkt__dropdown__store img {
  align-self: center;
  max-height: 250px;
}
@media (max-width: 992px) {
  .navMarkt__dropdown__store img {
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 1520px) {
  .navMarkt__dropdown__store img {
    max-width: 150px;
  }
}
.navMarkt__dropdown__store .discount {
  background-color: #2E0046;
  color: #FD5B24;
  font-size: 1rem;
  margin-bottom: 1rem;
  padding: 3px 11px;
  border-radius: 40px;
  font-weight: 600;
}
.navMarkt__dropdown__store .content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.navMarkt__dropdown__store .content h1 {
  text-transform: uppercase;
  font-size: 1.25rem;
  text-align: center;
  color: #FD5B24;
}
@media (min-width: 1520px) {
  .navMarkt__dropdown__store .content h1 {
    font-size: 1.66rem;
  }
}
.navMarkt__dropdown__store .content span:first-of-type {
  font-size: 1rem;
  text-align: center;
  color: white;
  font-weight: 600;
}
@media (min-width: 1520px) {
  .navMarkt__dropdown__store .content span:first-of-type {
    font-size: 1.66rem;
    margin-bottom: 1.5rem;
  }
}
.navMarkt__dropdown__store .content span:last-of-type {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 1.5rem;
}
.navMarkt__dropdown__store .content span:last-of-type del {
  opacity: 0.6;
  margin-right: 0.5rem;
}
@media (min-width: 1520px) {
  .navMarkt__dropdown__store .content span:last-of-type {
    font-size: 1.66rem;
    margin-bottom: rem;
  }
}
.navMarkt__dropdown__store .content a {
  align-self: center;
}
.navMarkt__dropdown__ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem 0;
}
@media (min-width: 1520px) {
  .navMarkt__dropdown__ready {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 3rem;
  }
}
.navMarkt__dropdown__ready img {
  max-width: 213px;
  margin-bottom: 1.5rem;
}
@media (min-width: 1520px) {
  .navMarkt__dropdown__ready img {
    margin-right: 2.5rem;
    margin-bottom: 0;
  }
}
@media (max-width: 1520px) {
  .navMarkt__dropdown__ready img {
    max-width: 150px;
  }
}
.navMarkt__dropdown__ready .content h1 {
  text-transform: uppercase;
  font-size: 1.25rem;
  color: #FD5B24;
  text-align: center;
  margin-bottom: 1rem;
}
@media (min-width: 1520px) {
  .navMarkt__dropdown__ready .content h1 {
    font-size: 1.66rem;
    margin-bottom: 1.85rem;
  }
}
.navMarkt__dropdown__ready .content button, .navMarkt__dropdown__ready .content a {
  display: block;
  white-space: nowrap;
}
.navMarkt__dropdown__primary {
  display: flex;
  padding: 1rem 0 2rem 0 !important;
  border-bottom: 0 !important;
}
@media (min-width: 992px) {
  .navMarkt__dropdown__primary {
    display: none;
  }
}
.navMarkt__dropdown__primary li {
  margin-bottom: 0 !important;
}
.navMarkt__dropdown__primary li:not(:last-of-type) {
  position: relative;
  padding-right: 1.7rem;
  margin-right: 1.7rem !important;
}
.navMarkt__dropdown__primary li:not(:last-of-type)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  background-color: white;
  width: 2px;
}
.navMarkt__dropdown__primary li a {
  color: white !important;
}

.navDash {
  position: relative;
  background-color: #410064;
  padding: 0.66rem 0;
  z-index: 10001;
}
.navDash .AnimatedSideBar {
  margin-left: 16px !important;
}
.navDash--markt .navDash__items--open .navDash__toggle i {
  transform: rotate(180deg);
}
@media (max-width: 767px) {
  .navDash {
    padding-top: 2.5rem;
  }
}
.navDash .BurgerMenu {
  display: none;
  margin-right: 1rem;
  margin-left: 0;
  margin-top: -4px;
}
@media (max-width: 992px) {
  .navDash .BurgerMenu {
    display: block;
  }
}
.navDash__toggle {
  display: flex;
  align-items: center;
  color: white;
  font-weight: 600;
  display: flex;
  border: 0;
  border-radius: 4px;
  padding: 0.3rem 2rem;
  margin: 0;
  background-color: transparent;
  font-size: 1.125rem;
}
@media (max-width: 992px) {
  .navDash__toggle {
    display: none;
  }
}
.navDash__toggle:focus, .navDash__toggle:active {
  outline: 0;
}
.navDash__toggle:hover {
  background-color: #4C1472;
}
.navDash__toggle i {
  transition: 150ms;
  margin-left: 8px;
  font-size: 0.8rem;
}
.navDash__items {
  display: flex;
  justify-content: space-between;
}
.navDash__items__start {
  flex-direction: row-reverse;
}
@media (min-width: 992px) {
  .navDash__items__start {
    flex-direction: row;
  }
}
.navDash__items__start, .navDash__items__end {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.navDash__items__start li, .navDash__items__end li {
  margin-bottom: 0;
  padding-bottom: 0;
}
.navDash__items__start li:active, .navDash__items__end li:active {
  border-bottom: 0;
}
.navDash__items__start li.navDash__link.navDash__link--button > button, .navDash__items__end li.navDash__link.navDash__link--button > button {
  color: white;
  border-radius: 4px;
  padding: 0.5rem 1.5rem !important;
  margin: 0;
  cursor: pointer;
}
.navDash__items__start li.navDash__link.navDash__link--button > button:hover, .navDash__items__end li.navDash__link.navDash__link--button > button:hover {
  background-color: #4C1472;
}
.navDash__logo {
  width: 90px;
  height: auto;
  margin-right: 1rem;
}
@media (min-width: 992px) {
  .navDash__logo {
    width: 105px;
  }
}
.navDash__button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 42px;
  width: 42px;
  background-color: #6A00A3;
  box-shadow: 0px 2px 0px #2E1257;
  border-radius: 50%;
  margin-right: 10px;
  border: 0;
}
.navDash__button:active, .navDash__button:focus {
  outline: 0;
}
.navDash__button i {
  color: white;
  font-size: 1.125rem;
}
.navDash__button--orange {
  background-color: #FD5B24;
}
.navDash__score, .navDash__profile {
  display: flex;
  align-items: center;
  background-color: #6A00A3;
  box-shadow: 0px 2px 0px #2E1257;
  color: white;
  font-weight: 600;
  height: 42px;
  border-radius: 35px;
  font-size: 0.93rem;
}
.navDash__score {
  padding: 0 10px 0 27px;
  margin-left: 17px;
  margin-right: 8px;
}
@media (max-width: 767px) {
  .navDash__score {
    display: none;
  }
}
.navDash__score img {
  position: absolute;
  width: 34px;
  height: auto;
  left: 0;
}
.navDash__profile {
  padding: 0 0 0 24px;
}
@media (max-width: 767px) {
  .navDash__profile {
    margin-left: unset;
  }
}
.navDash__profile:hover, .navDash__profile:active, .navDash__profile:focus {
  color: white;
  text-decoration: none;
}
.navDash__profile img {
  height: calc(100% + 5px);
  width: auto;
  margin-right: -5px;
  margin-bottom: 2px;
  margin-left: 15px;
}
@media (max-width: 992px) {
  .navDash__profile {
    background-color: unset;
    box-shadow: unset;
    padding: 0;
  }
  .navDash__profile span {
    display: none;
  }
  .navDash__profile img {
    margin-left: unset;
    margin-right: unset;
  }
}
.navDash__link {
  font-size: 1.125rem;
  font-weight: 600;
}
@media (max-width: 750px) {
  .navDash__link {
    display: none;
  }
}
.navDash__link a {
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
}
.navDash__link a:hover {
  background-color: #4C1472;
}
.navDash__link a:hover, .navDash__link a:active, .navDash__link a:focus {
  color: white;
  text-decoration: none;
}
.navDash__link--end {
  margin-right: 40px !important;
}
@media (min-width: 1200px) {
  .navDash__link--end {
    margin-right: 89px !important;
  }
}
.navDash__link--button button {
  color: white;
  background-color: transparent;
  border: 0;
  padding: 0;
}
.navDash__link--button button:active, .navDash__link--button button:focus {
  outline: 0;
}
.navDash__dropdown {
  position: fixed;
  left: 0;
  right: 0;
  padding: 0 0 40px 0;
  background-color: #410064;
  z-index: 10001;
  box-shadow: 0px 20px 20px -20px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
  .navDash__dropdown {
    position: absolute;
    top: 90px;
    min-height: calc(100vh - 90px);
  }
}
.navDash__dropdown .showMobile {
  display: block;
}
@media (min-width: 767px) {
  .navDash__dropdown .showMobile {
    display: none;
  }
}
.navDash__dropdown .hideMobile {
  display: grid;
}
@media (max-width: 767px) {
  .navDash__dropdown .hideMobile {
    display: none;
  }
}
@media (min-width: 992px) {
  .navDash__dropdown--teacher {
    min-height: 630px;
  }
}
.navDash__dropdown--desktop {
  display: none;
}
@media (min-min: 768px) {
  .navDash__dropdown--desktop {
    display: block;
  }
}
@media (max-width: 767px) {
  .navDash__dropdown--mobile {
    position: absolute;
    top: 0;
    height: 100vh;
    padding-top: 2.75rem;
    overflow-y: scroll;
    padding-bottom: 120px;
  }
}
.navDash__dropdown--mobile .row:before {
  display: none !important;
}
.navDash__dropdown .row:before {
  display: block;
  content: "";
  width: calc(100% - 30px);
  height: 1px;
  margin: 0 auto;
  background-color: #33004F;
  margin-bottom: 12px;
}
.navDash__dropdown ul {
  padding: 20px 0 0 0;
  height: 100%;
  margin: 0;
}
.navDash__dropdown ul.double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: max-content;
}
.navDash__dropdown ul.mobile {
  padding-bottom: 30px;
}
@media (min-width: 1550px) {
  .navDash__dropdown ul.ml {
    margin-left: 25px;
  }
}
@media (max-width: 767px) {
  .navDash__dropdown ul.hasLine {
    padding: 2rem 0;
  }
}
.navDash__dropdown ul.hasLine:after {
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;
  content: "";
  width: 1px;
  height: 100%;
  background-color: #33004F;
}
@media (max-width: 767px) {
  .navDash__dropdown ul.hasLine:after {
    width: calc(100% - 2rem);
    height: 1px;
    top: unset;
    right: 1rem;
    left: 1rem;
  }
}
@media (min-width: 992px) {
  .navDash__dropdown ul.hasLine:after {
    right: 50px;
  }
}
@media (min-width: 767px) {
  .navDash__dropdown ul.hasLine--end:after {
    right: 0;
  }
}
@media (max-width: 1024px) {
  .navDash__dropdown ul.hasLine--end.double:after {
    display: none;
  }
}
@media (min-width: 992px) {
  .navDash__dropdown ul.hasLine--md:after {
    right: 0;
  }
}
.navDash__dropdown ul li {
  margin-bottom: 0;
  padding-bottom: 0;
}
.navDash__dropdown ul li:active {
  border-bottom: 0;
}
.navDash__dropdown__title {
  font-size: 1.125rem;
  color: #FD5B24;
  padding-top: 28px;
}
.navDash__dropdown__title i {
  float: right;
  margin-top: 5px;
}
@media (max-width: 992px) {
  .navDash__dropdown__title {
    margin-bottom: 0.5rem;
    cursor: pointer;
  }
  .navDash__dropdown__title:first-of-type {
    padding-top: 10px;
  }
}
.navDash__dropdown__title:after {
  content: "";
  width: 52px;
  height: 1px;
  background-color: #FD5B24;
  display: block;
  margin-top: 10px;
}
.navDash__dropdown__link {
  color: white;
  font-weight: 600;
  font-size: 1.125rem;
}
.navDash__dropdown__link--orange {
  color: #FD5B24;
}
.navDash__dropdown__link a,
.navDash__dropdown__link span {
  color: inherit;
}
.navDash__dropdown__link a:hover, .navDash__dropdown__link a:active, .navDash__dropdown__link a:focus,
.navDash__dropdown__link span:hover,
.navDash__dropdown__link span:active,
.navDash__dropdown__link span:focus {
  text-decoration: none;
  color: white;
}
.navDash__dropdown__link > a,
.navDash__dropdown__link > span,
.navDash__dropdown__link > button {
  display: block;
  width: calc(100% - 28px) !important;
  border-radius: 4px;
  padding: 1rem !important;
  margin: 0;
  margin-left: -1rem;
  cursor: pointer;
  text-align: start;
}
@media (max-width: 992px) {
  .navDash__dropdown__link > a,
  .navDash__dropdown__link > span,
  .navDash__dropdown__link > button {
    width: 100% !important;
    margin-left: 0 !important;
  }
}
.navDash__dropdown__link > a:hover,
.navDash__dropdown__link > span:hover,
.navDash__dropdown__link > button:hover {
  background-color: #4C1472;
}
.navDash__dropdown__link > a.submenu-item,
.navDash__dropdown__link > span.submenu-item,
.navDash__dropdown__link > button.submenu-item {
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  margin-left: 0 !important;
}
.navDash__dropdown__link button {
  color: inherit;
  background-color: transparent;
  border: 0;
  padding: 0;
}
.navDash__dropdown__link button:active, .navDash__dropdown__link button:focus {
  outline: 0;
}
.navDash__dropdown__link--toggle {
  background-color: #390057;
  padding: 15px 33px !important;
  margin-left: -33px;
  border-radius: 27px;
  width: max-content;
}
.navDash__dropdown__link--toggle span {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.navDash__dropdown__link--toggle span i {
  margin-left: 18px;
}
.navDash__dropdown__link--toggle ul {
  padding-bottom: 15px;
  padding-top: 15px;
}
.navDash__dropdown__link--toggle ul li {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
}
.navDash__dropdown__link--toggle ul li:not(:last-of-type) {
  margin-bottom: 12px;
}
.navDash__dropdown__link--toggle ul li.submenu-item {
  margin-bottom: 0 !important;
}
.navDash__dropdown__close {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.33rem;
  margin-bottom: 1.125rem;
  color: white;
  font-weight: 600;
  margin-bottom: 2rem;
}
.navDash__dropdown__close i {
  margin-right: 15px;
  font-size: 25px;
}
.navDash__dropdown__quickmenu h2 {
  color: #2C0044;
  font-size: 2rem;
  opacity: 0;
}
.navDash__dropdown__quickmenu .QuickMenu {
  top: -35px !important;
  left: 0 !important;
}
.navDash__dropdown__profile {
  display: flex;
  flex-direction: column;
}
@media (max-width: 769px) {
  .navDash__dropdown__profile {
    padding-top: 2rem;
  }
}
@media (min-width: 992px) {
  .navDash__dropdown__profile {
    flex-direction: row;
    align-items: center;
    padding-top: 2rem;
  }
}
.navDash__dropdown__profile > a > img {
  width: 100px;
  height: auto;
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .navDash__dropdown__profile > a > img {
    width: 150px;
    margin-right: 2rem;
    margin-left: 25px;
    margin-bottom: unset;
  }
}
@media (min-width: 1550px) {
  .navDash__dropdown__profile > a > img {
    margin-left: 80px;
  }
}
.navDash__dropdown__profile__meta, .navDash__dropdown__profile__stats {
  display: flex;
  font-size: 0.85rem;
}
@media (min-width: 992px) {
  .navDash__dropdown__profile__meta, .navDash__dropdown__profile__stats {
    font-size: 0.93rem;
  }
}
.navDash__dropdown__profile__meta {
  margin-bottom: 1rem;
}
@media (min-width: 769px) {
  .navDash__dropdown__profile__meta {
    margin-bottom: 2rem;
  }
}
.navDash__dropdown__profile__meta .meta {
  color: white;
}
.navDash__dropdown__profile__meta .meta span {
  font-weight: 600;
  display: block;
  margin-top: -2px;
}
.navDash__dropdown__profile__meta .meta:not(:last-of-type) {
  margin-right: 2rem;
}
.navDash__dropdown__profile__stats {
  flex-wrap: wrap;
}
@media (max-width: 769px) {
  .navDash__dropdown__profile__stats {
    margin-left: 10px;
  }
}
.navDash__dropdown__profile__stats .stat {
  position: relative;
  display: flex;
  align-items: center;
  color: white;
  font-weight: bold;
  background-color: #6A00A3;
  border-radius: 20px;
  height: 30px;
  padding: 0 20px 0 35px;
  margin-bottom: 1.25rem;
}
@media (max-width: 992px) {
  .navDash__dropdown__profile__stats .stat {
    max-width: 33%;
    padding: 0 20px 0 25px;
  }
}
.navDash__dropdown__profile__stats .stat:not(:last-of-type) {
  margin-right: 2rem;
}
.navDash__dropdown__profile__stats .stat img {
  position: absolute;
  width: 40px;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  left: -15px;
}
@media (max-width: 992px) {
  .navDash__dropdown__profile__stats .stat img {
    width: 35px;
  }
}
@media (max-width: 992px) {
  .navDash__dropdown--lowres {
    display: none;
  }
}
.navDash__store {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1460px) {
  .navDash__store {
    flex-direction: row;
  }
}
.navDash__store img {
  align-self: flex-start;
  width: 150px;
  margin-bottom: 1rem;
}
@media (min-width: 1460px) {
  .navDash__store img {
    width: 100%;
    max-width: 225px;
    margin-bottom: unset;
    margin-right: 30px;
  }
}
.navDash__store__meta {
  text-align: left;
}
@media (min-width: 1460px) {
  .navDash__store__meta {
    text-align: right;
  }
}
.navDash__store__meta .discount {
  display: inline-block;
  background-color: #2E0046;
  color: #FD5B24;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  padding: 3px 11px;
  border-radius: 40px;
  font-weight: 600;
}
.navDash__store__meta h3 {
  color: white;
  font-size: 1.35rem;
  line-height: 32px;
  font-weight: 400;
  margin-bottom: 12px;
  padding-top: 5px;
  word-break: keep-all;
}
@media (min-width: 1460px) {
  .navDash__store__meta h3 {
    font-size: 1.66rem;
  }
}
.navDash__store__meta span {
  display: block;
  font-size: 1.125rem;
  color: white;
  font-weight: bold;
  margin-bottom: 25px;
}
.navDash__store__meta span del {
  opacity: 0.6;
  margin-right: 0.5rem;
}
@media (min-width: 1460px) {
  .navDash__store__meta span {
    font-size: 1rem;
    margin-bottom: 50px;
  }
}
.navDash__store__meta a {
  color: white;
  font-size: 1.125rem;
  font-weight: 600;
}
@media (min-width: 1460px) {
  .navDash__store__meta a {
    font-size: 1rem;
  }
}
.navDash__store__meta a:hover, .navDash__store__meta a:active, .navDash__store__meta a:focus {
  text-decoration: none;
  color: white;
}
.navDash__store__meta a i {
  margin-left: 7px;
}
.navDash__grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 565px;
}
@media (min-width: 767px) {
  .navDash__grid {
    grid-template-columns: 1fr 2fr;
  }
}
@media (min-width: 1024px) {
  .navDash__grid {
    grid-template-columns: 1fr 2.5fr 250px;
  }
}
@media (min-width: 1460px) {
  .navDash__grid {
    grid-template-columns: 1fr 2fr 1.5fr;
  }
}
.navDash__grid__item {
  position: relative;
}
@media (max-width: 1024px) {
  .navDash__grid__item:last-of-type {
    display: none;
  }
}
.navDash__grid__item.px {
  padding: 0 34px;
}
@media (min-width: 992px) {
  .navDash__grid__item.px {
    padding: 0 68px;
  }
}
.navDash__grid__item.pl {
  padding-left: 60px;
}

@media (max-width: 767px) {
  body.hasDropDown {
    overflow-y: hidden;
  }
}

.js-teacher-dropdown {
  display: none;
}

.dropdown-menu-arrow {
  top: -69px;
  width: 0;
  height: 0;
  position: relative;
  display: flex;
  justify-content: center;
  width: 50%;
}
.dropdown-menu-arrow:before, .dropdown-menu-arrow:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-width: 20px 8px;
  border-style: solid;
  border-color: transparent;
  z-index: 1001;
}
.dropdown-menu-arrow:after {
  bottom: -26px;
  right: -9px;
  border-bottom-color: #FF7041;
  top: 15px;
}

.dropdown-menu-arrow-log-in {
  top: -68px;
  width: 0;
  height: 0;
  position: relative;
  display: flex;
  justify-content: center;
  width: 50%;
}

.dropdown-menu-arrow-log-in::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-width: 20px 8px;
  border-style: solid;
  border-color: transparent;
  z-index: 1001;
  bottom: -26px;
  right: -9px;
  border-bottom-color: #6A10A3;
  top: 15px;
}

.dropdown-menu-arrow-log-in-hamburger {
  display: flex;
  left: 5px;
  top: -67px;
  width: 0;
  height: 0;
  position: relative;
}
.dropdown-menu-arrow-log-in-hamburger:before, .dropdown-menu-arrow-log-in-hamburger:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-width: 20px 8px;
  border-style: solid;
  border-color: transparent;
  z-index: 1001;
}
.dropdown-menu-arrow-log-in-hamburger:after {
  bottom: -26px;
  border-bottom-color: #6A10A3;
  top: 15px;
}

.dropdown-menu-arrow-sign-up-hamburger {
  top: -69px;
  display: flex;
  justify-content: flex-end;
  width: 83%;
  height: 0;
  position: relative;
}
.dropdown-menu-arrow-sign-up-hamburger:before, .dropdown-menu-arrow-sign-up-hamburger:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-width: 20px 8px;
  border-style: solid;
  border-color: transparent;
  z-index: 1001;
}
.dropdown-menu-arrow-sign-up-hamburger:after {
  bottom: -26px;
  border-bottom-color: #FF7041;
  top: 15px;
}

.item {
  color: #410064;
  font-size: 1.2rem;
}

.student-sign-up {
  color: #FF7041;
  font-size: 1.2rem;
}

@media (max-width: 991px) {
  .sign-up {
    display: none !important;
  }
}

@media (min-width: 991px) {
  .menu-sign-up {
    display: none;
  }
}

.VideoPlaylist {
  position: relative;
  min-height: 400px;
  max-height: 545px;
  overflow-y: scroll;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.VideoPlaylist h3 {
  font-size: 20px;
  color: #37274F;
  text-transform: capitalize;
  padding-top: 2em;
  margin-bottom: 0;
}
.VideoPlaylist h3.title {
  position: sticky;
  background-color: white;
  top: 0;
  z-index: 1;
  padding: 30px 30px 0 30px;
}
.VideoPlaylist h3 i {
  color: #37274F;
}
.VideoPlaylist h3 i:first-of-type {
  margin-right: 15px;
}
.VideoPlaylist h3 i:last-of-type:not(:first-of-type) {
  margin-left: 15px;
}
.VideoPlaylist ul {
  padding-left: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.VideoPlaylist ul li {
  text-transform: capitalize;
}
.VideoPlaylist .dropdown,
.VideoPlaylist .VideoPlaylist__dropdown {
  width: 100%;
}
.VideoPlaylist .dropdown {
  position: sticky;
  background-color: white;
  top: 0;
  z-index: 1;
  padding: 0 30px;
}
.VideoPlaylist .VideoPlaylist__dropdown {
  max-width: 308px;
  margin-left: 15px;
}

.VideoPlaylist__video {
  color: #2d2d2d;
}
@media (max-width: 991px) {
  .VideoPlaylist__video {
    margin-left: -1em;
    margin-right: -1em;
  }
}
.VideoPlaylist__video h1 {
  font-size: 20px;
  color: inherit;
  text-align: center;
}
@media (max-width: 991px) {
  .VideoPlaylist__video h1 {
    display: none !important;
  }
}
.VideoPlaylist__video--teacher p {
  color: #37274F;
  font-size: 0.93em;
  line-height: 24px;
  margin-bottom: 25px;
}
@media (min-width: 766px) {
  .VideoPlaylist__video--teacher p {
    display: none;
  }
}
.VideoPlaylist__video--teacher h1 {
  text-align: left;
}
.VideoPlaylist__video .VideoPlayer {
  height: 24em;
}
@media (max-width: 650px) {
  .VideoPlaylist__video .VideoPlayer {
    height: 15em;
  }
}

.VideoPlaylist__item {
  display: flex;
  align-items: center;
  padding: 30px;
}
.VideoPlaylist__item:active, .VideoPlaylist__item:focus {
  border-bottom: 0;
}
.VideoPlaylist__item:not(:last-of-type) {
  border-bottom: 1px solid #d9d9d9;
}
.VideoPlaylist__item img {
  width: 100px;
  height: 55px;
}
.VideoPlaylist__item .VideoPlaylist__itemPoster p {
  display: none;
}
.VideoPlaylist__item .VideoPlaylist__itemPoster span {
  position: absolute;
  left: 30px;
  display: inline-block;
  padding: 1px 7px;
  margin-bottom: 7px;
  background: #FD5B24;
  color: white;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  border-bottom-right-radius: 3px;
}
.VideoPlaylist__item--active .VideoPlaylist__itemPoster {
  position: relative;
}
.VideoPlaylist__item--active .VideoPlaylist__itemPoster span {
  left: 0;
}
.VideoPlaylist__item--active .VideoPlaylist__itemPoster p {
  display: block;
  position: absolute;
  font-size: 12px;
  width: 100%;
  height: 100%;
  padding-top: 1.5em;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
}

.VideoPlaylist__itemMeta {
  color: #2d2d2d;
  margin-left: 15px;
}
.VideoPlaylist__itemMeta h5 {
  font-size: 13px;
  color: inherit;
  margin-bottom: 5px;
}
.VideoPlaylist__itemMeta p {
  font-size: 12px;
  color: inherit;
  margin: 0;
}

.VideoPlaylist__scroll {
  appearance: none;
  position: sticky;
  bottom: 0;
  width: 100%;
  background: #37274F;
  border: 0;
  color: white;
  font-size: 10px;
  height: 25px;
}

.VideoList .VideoPlaylist {
  margin-top: 2.1em;
}
@media (max-width: 991px) {
  .VideoList .VideoPlaylist {
    margin: 0 -1em;
  }
}

.VideoModalContainer .VideoPlayer {
  height: 500px;
}

.ContentBlock {
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 1em;
  display: inline-block;
  position: relative;
  width: 100%;
}
.ContentBlock p {
  color: #2d2d2d;
  line-height: 1.71;
  font-size: 0.933em;
}
.ContentBlock--wrap {
  white-space: pre-line;
}
.ContentBlock--button {
  padding-bottom: 0;
}
.ContentBlock--purple {
  background-color: #37274F;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}
.ContentBlock--green {
  box-shadow: 0 2px 0 0 #609660;
  background-color: #71ae71;
}
.ContentBlock--purple p, .ContentBlock--purple .ContentBlock__title, .ContentBlock--green p, .ContentBlock--green .ContentBlock__title {
  color: white;
}
.ContentBlock--novel p {
  color: #37274F;
}
.ContentBlock--novel img {
  display: block;
  max-width: 157px;
  margin: 0 auto;
}
.ContentBlock__input input {
  -webkit-appearance: none;
  appearance: none;
  border: none;
}
.ContentBlock__input input:focus {
  outline: none;
}
.ContentBlock__input input::-webkit-input-placeholder {
  color: rgba(45, 45, 45, 0.2);
}
.ContentBlock__input input:-moz-placeholder {
  color: rgba(45, 45, 45, 0.2);
}
.ContentBlock__input input::-moz-placeholder {
  color: rgba(45, 45, 45, 0.2);
}
.ContentBlock__input input:-ms-input-placeholder {
  color: rgba(45, 45, 45, 0.2);
}
.ContentBlock__input input::-ms-input-placeholder {
  color: rgba(45, 45, 45, 0.2);
}
.ContentBlock__input input::placeholder {
  color: rgba(45, 45, 45, 0.2);
}
.ContentBlock:not(:last-of-type) {
  margin-bottom: 2.667em;
}
.ContentBlock:not(:last-of-type):last-of-type {
  margin-bottom: 0;
}
.ContentBlock__title {
  font-size: 1.333em;
  font-weight: bold;
  color: #2d2d2d;
}
.ContentBlock__title.CurrentNugget__title {
  margin-bottom: 0;
  display: inline-block;
}
.ContentBlock__dropdownIcon {
  width: 0;
  height: 0;
  display: inline-block;
  margin-left: 1em;
  border: 5px solid transparent;
  border-top: 5px solid #2f2f2f;
  border-bottom: none;
  z-index: 2;
  position: relative;
}
.ContentBlock__nuggetSelect {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 267px;
  height: 52px;
}
@media (max-width: 768px) {
  .ContentBlock__nuggetSelect {
    border-radius: 0;
    width: 100%;
  }
}
@media (min-width: 769px) {
  .ContentBlock__nuggetSelect:after {
    content: "";
    position: absolute;
    width: 1px;
    background-color: #ccd0d5;
    height: 52px;
  }
}
.ContentBlock.AvatarPreviewBlock {
  padding-bottom: 0;
}
.ContentBlock.AvatarPreviewBlock.ContentBlock--disabled .ContentBlock__link {
  opacity: 0.45;
  box-shadow: 0 2px 0 0 rgba(113, 174, 113, 0.5);
}
.ContentBlock.AvatarPreviewBlock .ContentBlock__link {
  padding: 0;
  box-shadow: 0 2px 0 0 #609660;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.ContentBlock__link {
  border-top: solid 1px rgba(45, 45, 45, 0.1);
  padding: 1.333em 0 0.333em;
  text-align: center;
  margin-top: 1.667em;
  margin-left: -15px;
  margin-right: -15px;
  font-size: 16px;
  margin-bottom: 0;
  font-weight: bold;
  line-height: 1.25;
  display: block;
  color: #2d2d2d;
}
.ContentBlock__link:hover {
  cursor: pointer;
  text-decoration: none;
  color: #2d2d2d;
}
.ContentBlock__link button {
  border: none;
  color: white;
  width: 100%;
  padding: 1em 0;
  background-color: #71ae71;
}
.ContentBlock__body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20em;
}
.ContentBlock__body img {
  width: 75%;
  height: auto;
}
.ContentBlock .AudioPlayer {
  margin-top: 20px;
}
.ContentBlock .AudioPlayer__time {
  color: white;
  font-size: 12px;
}
@media (max-width: 1550px) {
  .ContentBlock .AudioPlayer__time {
    font-size: 10px;
  }
}
.ContentBlock.AssignmentProgress {
  overflow: hidden;
}
.ContentBlock.AssignmentProgress.VisibleTabletOnly {
  margin-top: 30px;
  margin-bottom: 40px;
}
.ContentBlock.AssignmentProgress .expiredWarning {
  position: absolute;
  top: -32px;
  right: -32px;
  transform: rotate(-25deg);
  font-size: 7em;
  color: #ff4141;
}
.ContentBlock.AssignmentProgress .AssignmentProgress__more {
  display: none;
}
.ContentBlock.AssignmentProgress .AssignmentProgress__more h5 {
  color: #37274F;
}
.ContentBlock.AssignmentProgress .AssignmentProgress__more h5:first-of-type {
  margin-top: 20px;
}
.ContentBlock.AssignmentProgress .AssignmentProgress__more .AssignmentGroup--unfinished:not(:first-of-type) h5 {
  display: none;
}
.ContentBlock.AssignmentProgress .AssignmentProgress__assignment {
  margin-bottom: 20px;
}
.ContentBlock.AssignmentProgress .AssignmentProgress__assignment p {
  margin-bottom: 5px;
}
.ContentBlock.AssignmentProgress .AssignmentProgress__assignment.expired > p {
  color: #ff4141;
}
.ContentBlock.AssignmentProgress .AssignmentProgress__assignment.done > p {
  color: #71ae71;
}
.ContentBlock.AssignmentProgress.showAll .AssignmentProgress__more {
  display: block;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty {
  background-color: white;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty p.title {
  margin-bottom: 10px;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty ul {
  padding-left: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty li {
  padding-bottom: 0;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty li:not(:last-of-type) {
  margin-bottom: 15px;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty li:hover a {
  color: #FD5B24;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty li a {
  transition: 200ms;
  color: #37274F;
  font-weight: 600;
  margin-bottom: 0;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty .AssignmentProgress__assignment {
  display: none;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty .AssignmentProgress__assignment:first-of-type {
  display: block;
}
.ContentBlock.AssignmentProgress.AssignmentProgress--empty.showAll .AssignmentProgress__assignment {
  display: block;
}
.ContentBlock.AssignmentProgress .AssignmentNotification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  background-color: white;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  padding: 2rem;
  border-radius: 3px;
  bottom: 10px;
  z-index: 1;
  box-shadow: 0 2px 4px 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
@media (min-width: 769px) {
  .ContentBlock.AssignmentProgress .AssignmentNotification {
    display: none;
  }
}
.ContentBlock.AssignmentProgress .AssignmentNotification h3 {
  display: none;
}
.ContentBlock.AssignmentProgress .AssignmentNotification i {
  color: #ff4141;
  margin-right: 10px;
}
.ContentBlock.AssignmentProgress .AssignmentNotification i:last-of-type {
  margin-right: 0;
  margin-left: 15px;
  font-size: 23px;
  -webkit-text-stroke: 4px white;
}
.ContentBlock.AssignmentProgress .AssignmentNotification .AssignmentProgress__assignment {
  margin-bottom: 0;
}
.ContentBlock.AssignmentProgress .AssignmentNotification .AssignmentProgress__assignment p {
  text-align: center;
  color: #ff4141;
  font-size: 13px;
  margin-bottom: 0;
}
.ContentBlock.AssignmentProgress .AssignmentNotification .AssignmentProgress__assignment progress {
  display: none;
}

.Link {
  cursor: pointer;
  text-decoration: underline;
}

.ReactLink {
  color: #37274F;
  text-decoration: none;
}
.ReactLink__disconnected {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #D50000;
  margin-right: 7px;
}
.ReactLink__tooltip {
  background-color: #ECF1FA;
  padding: 0;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5254901961);
}
.ReactLink__tooltip .rc-tooltip-arrow {
  border-top-color: #fff !important;
  left: 48% !important;
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.5254901961)) !important;
}
.ReactLink__tooltip .rc-tooltip-inner {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5254901961);
  border-radius: 10px;
}
.ReactLink:hover {
  color: #37274F;
  text-decoration: none;
}
.ReactLink:focus {
  color: #37274F;
}

@media (max-width: 768px) {
  .ActivitiesList {
    display: flex;
    flex-wrap: wrap;
  }
}

.ActivitySummary {
  display: block;
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 1.333em;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  position: relative;
}
.ActivitySummary:hover {
  text-decoration: none;
}
@media (max-width: 768px) {
  .ActivitySummary {
    width: 48%;
    min-height: 6.667em;
    display: inline-block;
  }
  .ActivitySummary:nth-of-type(2n+1) {
    margin-right: 4%;
  }
  .ActivitySummary--novel {
    width: 100%;
    min-height: unset;
    margin-right: 0;
  }
}
.ActivitySummary--locked {
  opacity: 0.6;
  cursor: not-allowed;
}
.ActivitySummary--locked img {
  position: relative !important;
  right: unset !important;
  top: unset !important;
  bottom: 2px;
  width: 20px;
  margin-right: 10px;
}
@media (min-width: 992px) {
  .ActivitySummary--locked img {
    width: 25px;
    margin-right: 15px;
  }
}
.ActivitySummary--locked:hover p {
  text-decoration: none;
}
.ActivitySummary__info {
  width: 100%;
  height: 5em;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .ActivitySummary__info {
    position: relative;
    height: 100%;
    align-items: flex-start;
    padding-top: 0.667em;
  }
}
.ActivitySummary__info--novel {
  display: flex;
  align-items: center;
  height: 5rem;
  padding: 0 20px;
  margin: 0 0 60px 0;
  background-color: #37274F;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05), 0px 2px 0px #523D6F;
}
.ActivitySummary__info--novel.finished {
  background-color: #71ae71;
  box-shadow: 0 2px 0 0 #609660;
}
.ActivitySummary__info--novel img {
  position: relative !important;
  right: unset !important;
  top: unset !important;
  width: 88px;
  height: auto;
}
.ActivitySummary__info--novel p {
  color: white !important;
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
}
.ActivitySummary__info--novel p i {
  color: white;
}
@media (max-width: 992px) {
  .ActivitySummary__info--novel {
    width: 100% !important;
    margin-right: 0 !important;
    margin: 30px 0 60px 0;
    height: 5rem;
    min-height: unset;
  }
  .ActivitySummary__info--novel img {
    margin-right: 1rem;
  }
  .ActivitySummary__info--novel p {
    margin-left: 5px !important;
  }
}
.ActivitySummary p {
  font-size: 20px;
  margin-left: 1em;
  color: #37274F;
  margin-bottom: 0;
  font-weight: bold;
}
@media (max-width: 768px) {
  .ActivitySummary p {
    font-size: 1em;
  }
}
.ActivitySummary p i {
  margin-right: 10px;
  font-size: 0.9em;
}
.ActivitySummary .QuestionProgressIndicator {
  color: black;
  font-size: 1.067em;
  margin-right: 20px;
}
@media (max-width: 768px) {
  .ActivitySummary .QuestionProgressIndicator {
    font-size: 0.8em;
    position: absolute;
    bottom: 1.25em;
    left: 1.25em;
  }
}
.ActivitySummary img {
  position: absolute;
  right: 10%;
  top: -2px;
}
@media (max-width: 768px) {
  .ActivitySummary img {
    right: 20%;
    z-index: 2;
  }
}
.ActivitySummary--completed {
  background-color: #71ae71;
  box-shadow: 0 2px 0 0 #609660;
}
.ActivitySummary--completed p {
  color: white;
}
.ActivitySummary--completed .QuestionProgressIndicator {
  color: white;
}
.ActivitySummary progress {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background-color: transparent;
  color: #ff7041;
  border: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.ActivitySummary progress::-ms-fill {
  border: none;
}
.ActivitySummary progress::-webkit-progress-value {
  background-color: #ff7041;
}
.ActivitySummary progress::-webkit-progress-bar {
  background-color: transparent;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.ActivitySummary progress::-moz-progress-bar {
  background-color: #ff7041;
  overflow: hidden;
}

.Lyrics__header {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 0.5em;
}
@media (max-width: 991px) {
  .Lyrics__header {
    margin-top: 2em;
    justify-content: flex-start;
  }
}
.Lyrics__header--teacher {
  justify-content: space-between;
}
@media (max-width: 991px) {
  .Lyrics__header--teacher {
    justify-content: space-between;
  }
  .Lyrics__header--teacher h1 {
    position: relative !important;
    visibility: visible !important;
    color: #37274F !important;
    top: 0 !important;
  }
}
.Lyrics__header--teacher a {
  font-size: 0.93em;
  color: #37274F;
  text-decoration: none;
  cursor: pointer;
}
.Lyrics__header--teacher a i {
  margin-right: 10px;
}
.Lyrics__header h1 {
  font-size: 20px;
}
@media (max-width: 991px) {
  .Lyrics__header h1 {
    visibility: hidden;
  }
}
.Lyrics__header p {
  font-size: 17px;
  display: none;
  color: #37274F;
  margin: 0;
  cursor: pointer;
}
@media (max-width: 991px) {
  .Lyrics__header p {
    display: block;
  }
}

.Lyrics__languageSelector {
  display: none;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 1em;
  padding: 0.5em;
}
.Lyrics__languageSelector .Lyrics__languageSelector__button {
  border: 0;
  width: 100%;
  text-align: center;
  color: #37274F;
  background-color: white;
}
.Lyrics__languageSelector .Lyrics__languageSelector__button:active, .Lyrics__languageSelector .Lyrics__languageSelector__button:focus, .Lyrics__languageSelector .Lyrics__languageSelector__button:hover, .Lyrics__languageSelector .Lyrics__languageSelector__button--active {
  font-weight: 600;
  outline: 0;
  text-decoration: underline;
}
@media (max-width: 991px) {
  .Lyrics__languageSelector {
    display: block;
  }
}

.Lyrics__box {
  display: block;
  margin-bottom: 35px;
}
@media (max-width: 991px) {
  .Lyrics__box {
    display: none;
  }
}
.Lyrics__box h3 {
  color: #37274F;
  font-size: 16px;
  text-transform: capitalize;
}
@media (max-width: 991px) {
  .Lyrics__box h3 {
    display: none;
  }
}
.Lyrics__box p span {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  height: 40px;
}
@media (max-width: 1560px) {
  .Lyrics__box p span {
    font-size: 12px;
  }
}

.Lyrics__box__mobile {
  display: none;
  text-align: center;
}
.Lyrics__box__mobile p span {
  color: #37274F;
  font-size: 16px;
}
@media (max-width: 991px) {
  .Lyrics__box__mobile {
    display: block;
  }
}

.Lyrics_languageSelector {
  display: none;
}
@media (max-width: 991px) {
  .Lyrics_languageSelector {
    display: block;
  }
}

.MusicPlaylist h1 {
  font-size: 20px;
}
@media (max-width: 991px) {
  .MusicPlaylist h1 {
    display: none !important;
  }
}
.MusicPlaylist ul {
  padding-left: 0;
}
.MusicPlaylist ul li {
  border-bottom: 2px solid #2a1f3b;
}
.MusicPlaylist ul li:first-of-type {
  padding-bottom: 0;
}
.MusicPlaylist .AudioPlayer {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.MusicPlaylist .AudioPlayer__label {
  font-size: 12px;
}
@media (max-width: 991px) {
  .MusicPlaylist .AudioPlayer__label {
    font-size: 10px;
  }
}

.MusicPlaylist__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #37274F;
  color: white;
  padding: 21px 24px;
}
.MusicPlaylist__item:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.MusicPlaylist__item p {
  opacity: 0.4;
  margin-bottom: 0;
}
.MusicPlaylist__item i {
  font-size: 17px;
  display: none;
}
.MusicPlaylist__item--active p {
  opacity: 1;
}
.MusicPlaylist__item--active i {
  display: block;
}

@keyframes sliding-in {
  100% {
    transform: translateX(15px);
    box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), -100px 2px 100px 0 rgba(62, 47, 84, 0.2);
  }
}
@keyframes sliding-out {
  0% {
    transform: translateX(15px);
    box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), -100px 2px 100px 0 rgba(62, 47, 84, 0.2);
  }
  100% {
    transform: translateX(100%);
  }
}
.AssignmentSideNavigation {
  width: 35em;
  right: 0;
  padding: 7em 3em 4em;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  overflow-y: scroll;
}
.AssignmentSideNavigation__slide--in {
  animation: sliding-in 0.5s forwards;
  -webkit-animation: sliding-in 0.5s forwards;
}
.AssignmentSideNavigation__slide--out {
  animation: sliding-out 0.5s forwards;
  -webkit-animation: sliding-out 0.5s forwards;
}
.AssignmentSideNavigation .Assignment__content, .AssignmentSideNavigation h3 {
  text-align: left;
}
.AssignmentSideNavigation .ArchivedAssignments .ContentBlock__title {
  margin: 25px 0;
}

.Assignments__archived {
  margin-top: 2em;
}
.Assignments__archived .Assignment__content {
  min-height: unset !important;
}

.AssignmentsList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.AssignmentsList .FinishNugget__title {
  color: white;
}
.AssignmentsList .Assignment {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-bottom: 0.933em;
  width: 100%;
}
.AssignmentsList .Assignment h3 {
  margin: 0;
}
.AssignmentsList .Assignment .FinishNugget__title {
  margin-bottom: 0.25em;
}
.AssignmentsList .Assignment p {
  font-size: 1.067em;
  line-height: 1.25;
  color: white;
  margin-bottom: 1.5em;
  text-transform: capitalize;
}
.AssignmentsList .Assignment p img {
  width: 0.75em;
  margin-left: 0.5em;
}
.AssignmentsList .Assignment p.Assignment__name {
  text-transform: none;
  margin-bottom: 0;
  display: inline-block;
  font-weight: bold;
  font-size: 1.2em;
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 2px;
}
@media (max-width: 1550px) {
  .AssignmentsList .Assignment p.Assignment__name {
    font-size: 1em;
    width: 100%;
  }
}
.AssignmentsList .Assignment p.Assignment__deadline {
  font-size: 12px;
  text-transform: unset;
  width: 50%;
  margin-bottom: 6px;
}
@media (max-width: 1550px) {
  .AssignmentsList .Assignment p.Assignment__deadline {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 5px;
  }
}
.AssignmentsList .Assignment .Assignment__content {
  display: flex;
  align-items: center;
}
@media (max-width: 1550px) {
  .AssignmentsList .Assignment .Assignment__content {
    flex-direction: column;
  }
}
.AssignmentsList .Assignment .Assignment__currentNugget {
  bottom: auto;
}
.AssignmentsList .Assignment__nugget {
  display: block;
  width: 100%;
  line-height: 1.6;
}
@media (max-width: 1550px) {
  .AssignmentsList .Assignment__nugget {
    width: unset;
    margin-right: 5px;
  }
}
.AssignmentsList .Assignment p {
  color: #2d2d2d;
  margin-bottom: 0;
  display: inline-block;
}
.AssignmentsList .Assignment p.Assignment__name {
  position: relative;
}
.AssignmentsList .Assignment p.Assignment__name span {
  display: none;
}
.AssignmentsList .Assignment .FinishNugget__title,
.AssignmentsList .Assignment .Assignment__featuredBackground, .AssignmentsList .Assignment::before {
  display: none;
}
.AssignmentsList .Assignment__currentNugget, .AssignmentsList .Assignment__featuredBackground, .AssignmentsList .Assignment::before {
  position: absolute;
  bottom: 0;
}
.AssignmentsList .Assignment::before {
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  background-image: linear-gradient(to left, rgba(114, 92, 141, 0), #3e2f54 62%, #3e2f54);
  z-index: 2;
  width: 85%;
  opacity: 0.9;
}
.AssignmentsList .Assignment__content {
  position: relative;
  z-index: 3;
  height: 100%;
}
.AssignmentsList .Assignment__featuredBackground {
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  z-index: 1;
  height: 100%;
}
.AssignmentsList .Assignment__currentNugget {
  right: 0;
  display: flex;
  align-items: center;
  border-radius: 8px;
  font-size: 1.067em;
  padding: 0.5em 0.75em;
  color: white;
}
.AssignmentsList .Assignment__currentNugget .fa {
  margin-right: 0.5em;
  font-size: 0.733em;
}
.AssignmentsList .Assignment--unfinished .Assignment__currentNugget {
  background-color: white;
  color: #37274F;
}
.AssignmentsList .Assignment--expired .Assignment__currentNugget {
  background-color: #ff4141;
}
.AssignmentsList .Assignment--expired:nth-of-type(1n+2) .Assignment__deadline {
  color: #ff4141;
}
.AssignmentsList .Assignment--done .Assignment__currentNugget {
  background-color: #71ae71;
}
.AssignmentsList .Assignment--done:first-of-type .Assignment__content {
  align-items: flex-start !important;
}
.AssignmentsList .Assignment--done:first-of-type .Assignment__deadline {
  width: 100% !important;
}
.AssignmentsList .Assignment--done:first-of-type .Assignment__deadline span {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
.AssignmentsList .Assignment--soon .Assignment__currentNugget {
  background-color: #FD5B24;
}
.AssignmentsList .Assignment--soon:nth-of-type(1n+2) .Assignment__deadline {
  color: #FD5B24;
}

.SummarizedAssignments {
  width: 80%;
}
@media (max-width: 991px) {
  .SummarizedAssignments {
    width: 100%;
  }
}

.SummarizedAssignmentsList {
  margin-bottom: 2.5em;
}
.SummarizedAssignmentsList .Assignment {
  width: 49%;
}
@media (max-width: 768px) {
  .SummarizedAssignmentsList .Assignment {
    width: 100%;
  }
}
.SummarizedAssignmentsList .Assignment--expired:nth-of-type(1n+3) .Assignment__deadline {
  color: #ff4141;
}
.SummarizedAssignmentsList .Assignment--soon:nth-of-type(1n+3) .Assignment__deadline {
  color: #FD5B24;
}

.AssignmentsList .Assignment:nth-of-type(1),
.SummarizedAssignmentsList .Assignment:nth-of-type(2) {
  min-height: 10.8em;
  box-shadow: 0 2px 10px 0 rgba(224, 226, 230, 0.5);
}
@media (max-width: 1550px) {
  .AssignmentsList .Assignment:nth-of-type(1),
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) {
    min-height: 8.8em;
  }
}
.AssignmentsList .Assignment:nth-of-type(1)::before,
.AssignmentsList .Assignment:nth-of-type(1) p span,
.AssignmentsList .Assignment:nth-of-type(1) .FinishNugget__title,
.AssignmentsList .Assignment:nth-of-type(1) .Assignment__content,
.AssignmentsList .Assignment:nth-of-type(1) .Assignment__featuredBackground,
.SummarizedAssignmentsList .Assignment:nth-of-type(2)::before,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) p span,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) .FinishNugget__title,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__content,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__featuredBackground {
  display: inline-block;
}
.AssignmentsList .Assignment:nth-of-type(1) .Assignment__content,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__content {
  padding: 0;
  width: 100%;
  min-height: 8.8em;
}
@media (max-width: 1550px) {
  .AssignmentsList .Assignment:nth-of-type(1) .Assignment__content,
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__content {
    min-height: 6.8em;
  }
}
.AssignmentsList .Assignment:nth-of-type(1) .Assignment__nugget,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__nugget {
  font-size: 16px;
}
@media (min-width: 1200px) and (max-width: 1380px) {
  .AssignmentsList .Assignment:nth-of-type(1) .Assignment__nugget,
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__nugget {
    font-weight: 600;
    font-size: 13px !important;
  }
}
@media (max-width: 1550px) {
  .AssignmentsList .Assignment:nth-of-type(1) .Assignment__nugget,
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__nugget {
    font-weight: 600;
    font-size: 14px;
  }
}
.AssignmentsList .Assignment:nth-of-type(1) .Assignment__deadline,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__deadline {
  font-size: 13px;
  width: 100%;
}
.AssignmentsList .Assignment:nth-of-type(1) .Assignment__deadline span,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__deadline span {
  display: block;
  width: 100%;
}
.AssignmentsList .Assignment:nth-of-type(1) p,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) p {
  color: white;
  display: block;
}
.AssignmentsList .Assignment:nth-of-type(1) p.Assignment__name,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) p.Assignment__name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70%;
  margin-bottom: 5px;
}
.AssignmentsList .Assignment:nth-of-type(1) .Assignment__currentNugget,
.SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__currentNugget {
  bottom: 0;
  right: 0;
}

@media (max-width: 768px) {
  .SummarizedAssignmentsList .Assignment--expired:nth-of-type(2) .Assignment__deadline, .SummarizedAssignmentsList .Assignment--soon:nth-of-type(2) .Assignment__deadline {
    color: #ff4141;
  }
}

.Assignments__archived .Assignment:nth-of-type(1) {
  min-height: auto;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
}
.Assignments__archived .Assignment:nth-of-type(1)::before,
.Assignments__archived .Assignment:nth-of-type(1) p span,
.Assignments__archived .Assignment:nth-of-type(1) .FinishNugget__title,
.Assignments__archived .Assignment:nth-of-type(1) .Assignment__content,
.Assignments__archived .Assignment:nth-of-type(1) .Assignment__featuredBackground {
  display: none;
}
.Assignments__archived .Assignment:nth-of-type(1) .Assignment__content {
  display: flex;
  align-items: center;
  min-height: auto;
}
.Assignments__archived .Assignment:nth-of-type(1) p {
  color: #2d2d2d;
  margin-bottom: 0;
  display: inline-block;
}
.Assignments__archived .Assignment:nth-of-type(1) p.Assignment__name {
  position: relative;
  width: 50%;
}
.Assignments__archived .Assignment:nth-of-type(1) .Assignment__name span {
  display: none;
}
.Assignments__archived .Assignment:nth-of-type(1) .Assignment__currentNugget {
  bottom: auto;
}
.Assignments__archived .Assignment:nth-of-type(1) .Assignment__name {
  align-self: flex-start;
}
.Assignments__archived .Assignment:nth-of-type(1) .Assignment__deadline > span {
  font-size: 13px;
  font-weight: normal;
  display: inline;
}

@media (max-width: 768px) {
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) {
    min-height: auto;
    box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  }
  .SummarizedAssignmentsList .Assignment:nth-of-type(2)::before,
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) p span,
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) .FinishNugget__title,
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__content,
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__featuredBackground {
    display: none;
  }
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__content {
    display: flex;
    align-items: center;
    min-height: auto;
  }
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) p {
    color: #2d2d2d;
    margin-bottom: 0;
    display: inline-block;
  }
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) p.Assignment__name {
    position: relative;
    width: 50%;
  }
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__name span {
    display: none;
  }
  .SummarizedAssignmentsList .Assignment:nth-of-type(2) .Assignment__currentNugget {
    bottom: auto;
  }
}

.NoAssignments {
  background-color: #E7EBF3;
  border-radius: 8px;
  color: #37274F;
}
.NoAssignments p:last-of-type {
  margin-bottom: 0;
}
.NoAssignments__summarized {
  width: 100%;
  padding: 3em;
  text-align: center;
}
.NoAssignments__summarized p:last-of-type {
  text-decoration: underline;
  font-size: 0.9em;
  cursor: pointer;
}
.NoAssignments__unfinished {
  padding: 12px;
}

.WarningDueDate {
  font-size: 16px;
}
@media (min-width: 1200px) and (max-width: 1380px) {
  .WarningDueDate {
    font-size: 13px;
  }
}

.StudentProfile .StorySlider h3 .ViewAll {
  left: 135px;
  top: 1.5em;
  text-decoration: underline;
}
@media (max-width: 991px) {
  .StudentProfile .StorySlider h3 .ViewAll {
    display: block;
  }
}
.StudentProfile .StorySlider h3 .SortSettingsDropDown {
  top: 1.267em;
  bottom: auto;
  height: auto;
}

.StorySlider {
  margin-top: -1.3em;
  overflow-x: hidden;
}
.StorySlider .StoryPickerList {
  min-width: 100%;
  position: relative;
  margin-left: -1em;
}
.StorySlider .StoryPickerList .StoryPickerList__item {
  -webkit-user-drag: none;
  width: 266px;
  height: 300px;
  margin-top: 0;
}
.StorySlider h3 {
  padding-top: 1em;
}

.StoryPickerList {
  padding: 0;
}
.StoryPickerList .unslicked {
  display: grid;
  grid-template-columns: repeat(auto-fill, 266px);
  justify-content: space-between;
}
@media (min-width: 992px) {
  .StoryPickerList .slick-list {
    height: 20em;
  }
}
.StoryPickerList .StoryPickerList__item {
  -webkit-user-drag: none;
  margin-top: 2em;
  width: 266px;
  height: 300px;
  position: relative;
  padding-bottom: 0;
}
.StoryPickerList .StoryPickerList__item:hover, .StoryPickerList .StoryPickerList__item:focus {
  text-decoration: none;
  border: none;
  outline: none;
  cursor: pointer;
}
@media (max-width: 768px) {
  .StoryPickerList .StoryPickerList__item {
    width: 266px;
    min-height: 20em;
    margin-top: 2.5em;
  }
}
.StoryPickerList .StoryPickerList__item h3, .StoryPickerList .StoryPickerList__item::before,
.StoryPickerList .StoryPickerList__item .StoryList__indicators,
.StoryPickerList .StoryPickerList__item .StoryList__bgImage {
  position: absolute;
}
.StoryPickerList .StoryPickerList__item::before {
  content: "";
  left: 1em;
  right: 1em;
  z-index: 2;
  height: 100%;
  font-size: 1em;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.39) 0%, rgba(23, 23, 23, 0.31) 8%, rgba(38, 38, 38, 0.23) 17%, rgba(54, 54, 54, 0.16) 25%, rgba(71, 71, 71, 0.08) 33%, rgba(89, 89, 89, 0) 41%, rgba(89, 89, 89, 0) 41%, rgba(89, 89, 89, 0) 47%, rgba(89, 89, 89, 0) 53%, rgba(89, 89, 89, 0) 59%, rgba(89, 89, 89, 0) 64%, rgba(89, 89, 89, 0) 70%, rgba(89, 89, 89, 0) 70%, rgba(81, 81, 81, 0.12) 74%, rgba(73, 73, 73, 0.24) 77%, rgba(65, 65, 65, 0.35) 81%, rgba(57, 57, 57, 0.47) 84%, rgba(50, 50, 50, 0.59) 88%, rgba(50, 50, 50, 0.59) 88%, rgba(47, 47, 47, 0.63) 90%, rgba(43, 43, 43, 0.67) 93%, rgba(40, 40, 40, 0.72) 95%, rgba(36, 36, 36, 0.76) 97%, rgba(33, 33, 33, 0.8) 100%);
  top: 0;
  bottom: 0;
  border-radius: 8px;
}
.StoryPickerList .StoryPickerList__item h3 {
  color: white;
  font-size: 1.44em;
  top: 0.3em;
  left: 1.25em;
  right: 1.25em;
  bottom: auto;
  z-index: 2;
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators {
  left: 2em;
  right: 2em;
  bottom: 1em;
  z-index: 3;
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators .flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators .flex-row:first-of-type {
  justify-content: flex-start;
  direction: rtl;
  margin-bottom: 1em;
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators .flex-row span {
  display: flex;
  align-items: center;
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators p {
  margin: 0;
  color: white;
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators p .fa {
  margin-right: 0.5em;
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators img {
  width: 1em;
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators img:not(:last-of-type) {
  margin-right: 0.5em;
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators .ReplayedIndicator {
  width: 1.467em;
  height: 1.467em;
  border-radius: 50%;
  color: white;
  text-align: center;
  background-color: #ff4141;
  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.5);
}
.StoryPickerList .StoryPickerList__item .StoryList__indicators .ReplayedIndicator:not(:first-of-type) {
  margin-right: -0.6em;
}
.StoryPickerList .StoryPickerList__item .StoryList__bgImage {
  border-radius: 8px;
  bottom: 0;
  top: 0;
  width: calc(100% - 2em);
  height: 100%;
  border-radius: 8px;
  z-index: 1;
  object-fit: cover;
}

.Notifications__new {
  background-color: #ff4141;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  position: absolute;
  top: 0.95em;
  right: 1em;
}

.NotificationSideBar .ContentBlock__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.NotificationSideBar .ContentBlock__title span {
  font-size: 0.8em;
  font-weight: 400;
  cursor: pointer;
}

.Notification {
  margin-bottom: 20px;
  background-color: white;
}
.Notification .Notifications__new {
  height: 10px;
  width: 10px;
}
.Notification--read {
  opacity: 0.7;
  background-color: #FAFAFA;
}
.Notification--read .Notifications__new {
  display: none;
}
.Notification__date {
  text-align: right;
}
.Notification__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Notification__from {
  display: flex;
  align-items: center;
}
.Notification__from img {
  width: 30px;
  height: auto;
  margin: 0 15px 0 0;
}
.Notification__from p {
  color: #2d2d2d;
  font-size: 0.8em;
  font-weight: 600;
  margin: 0;
}
.Notification__message {
  margin-top: 30px;
  text-align: left;
  color: #2d2d2d;
  font-size: 1em;
  overflow-x: hidden;
}
.Notification__link {
  display: flex;
  align-items: center;
  color: #37274F;
  font-weight: 600;
}
.Notification__link:hover {
  color: #37274F;
  text-decoration: none;
}
.Notification__link i {
  margin-right: 15px;
}

.DashboardNotifications__notification {
  position: relative;
  display: flex;
  align-items: center;
  padding: 30px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-size: 0.93em;
  font-weight: 600;
  background-color: #FD5B24;
  color: white;
  box-shadow: 0px 2px 0px #B8502E;
}
.DashboardNotifications__notification--hasImage {
  padding: 15px;
}
.DashboardNotifications__notification:hover {
  color: white;
  text-decoration: none;
}
.DashboardNotifications__notification p {
  margin-bottom: 0;
}
.DashboardNotifications__notification__image {
  flex-shrink: 0;
  width: 75px;
  margin-right: 15px;
}
@media (max-width: 991px) {
  .DashboardNotifications__notification__image {
    width: 50px;
  }
}
.DashboardNotifications__notification img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.DashboardNotifications__notification span {
  font-weight: 400;
  position: absolute;
  bottom: 5px;
  right: 10px;
  color: white;
}
.DashboardNotifications__notification i {
  z-index: 1;
  color: #37274F;
  position: absolute;
  top: 10px;
  right: 15px;
}
.DashboardNotifications__notification--read {
  background-color: white;
  color: #37274F;
  box-shadow: 0px 2px 0px #D4D5D9;
}
.DashboardNotifications__notification--read:hover {
  color: #37274F;
  text-decoration: none;
}
.DashboardNotifications__notification--read span {
  color: #37274F;
}
@media (max-width: 769px) {
  .DashboardNotifications {
    display: flex;
    overflow-y: scroll;
  }
  .DashboardNotifications__notification {
    min-width: 300px;
    padding: 20px 15px;
    font-size: 12px;
    margin-right: 15px;
  }
  .DashboardNotifications__notification--hasImage {
    padding: 10px 15px;
  }
  .DashboardNotifications__banner {
    content: "";
    background-color: #2C1C43;
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
  }
  .DashboardNotifications__banner--grey {
    background-color: #D2D7E1;
  }
}

.ProgressBar__indicator {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background-color: transparent;
  color: #FD5B24;
  border: none;
  border-radius: 0;
  overflow: hidden;
  z-index: 2;
}
.ProgressBar__indicator::-ms-fill {
  border: none;
}
.ProgressBar__indicator::-moz-progress-value {
  background-color: #FD5B24;
}
.ProgressBar__indicator::-webkit-progress-value {
  background-color: #FD5B24;
}
.ProgressBar__indicator::-webkit-progress-bar {
  background-color: transparent;
  border-radius: 0;
  overflow: hidden;
}
.ProgressBar__indicator::-moz-progress-bar {
  background-color: #FD5B24;
  border-radius: 0;
  overflow: hidden;
}
.ProgressBar__indicator--completed::-moz-progress-value {
  background-color: #71ae71;
}
.ProgressBar__indicator--completed::-webkit-progress-value {
  background-color: #71ae71;
}
.ProgressBar__indicator--completed::-webkit-progress-bar {
  background-color: #71ae71;
}
.ProgressBar__indicator--completed::-moz-progress-bar {
  background-color: #71ae71;
}

.StudentProfile .StorySlider h3 .SortSettingsDropDown li span {
  padding: 0;
  top: 0;
  text-decoration: underline;
  font-weight: bold;
  font-size: inherit;
  position: relative;
}

.StudentProfile .StorySlider h3 .SortSettingsDropDown--visible li span {
  text-decoration: none;
}

.SortSettingsDropDown {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  right: 0;
  top: 0;
  height: 100%;
  padding-right: 1.267em;
}
@media (max-width: 400px) {
  .SortSettingsDropDown {
    position: relative !important;
    min-width: 100% !important;
  }
}
.SortSettingsDropDown span {
  font-weight: bold;
  display: inline-block;
}
.SortSettingsDropDown > div {
  padding-left: 1em;
  justify-content: flex-end;
}
@media (max-width: 400px) {
  .SortSettingsDropDown > div {
    flex-direction: row-reverse;
    margin-bottom: 1em;
    padding-left: 0;
  }
}
.SortSettingsDropDown > div, .SortSettingsDropDown .fa {
  display: flex;
}
.SortSettingsDropDown .fa {
  margin-left: 0.5em;
}
.SortSettingsDropDown p {
  margin: 0;
}
@media (max-width: 500px) {
  .SortSettingsDropDown p {
    display: none;
  }
}
.SortSettingsDropDown ul {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.SortSettingsDropDown li {
  display: none;
  padding: 0;
  font-size: 1.067em;
  line-height: 1;
  text-decoration: underline;
  color: #2d2d2d;
  text-align: right;
  font-weight: normal;
}
.SortSettingsDropDown li:hover, .SortSettingsDropDown li:focus {
  border: none;
}
.SortSettingsDropDown li.isVisible {
  display: block;
}
.SortSettingsDropDown--visible {
  z-index: 5;
  background-color: white;
  min-width: 21.5em;
  left: auto;
  height: auto;
  top: -1.267em;
  padding-top: 1.267em;
  display: inline-block;
  width: auto;
}
@media (max-width: 400px) {
  .SortSettingsDropDown--visible {
    position: absolute;
  }
}
.SortSettingsDropDown--visible > div {
  justify-content: flex-start;
}
.SortSettingsDropDown--visible p {
  display: none;
}
.SortSettingsDropDown--visible .fa {
  position: absolute;
  top: 1.267em;
  right: 1.267em;
  color: #37274F;
}
@media (max-width: 400px) {
  .SortSettingsDropDown--visible .fa {
    margin: 0 0.5em 0 0;
    position: unset;
    margin: 0;
  }
}
.SortSettingsDropDown--visible li {
  display: block;
  line-height: 2;
  font-size: 21px;
  text-decoration: none;
  color: #37274F;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 991px) {
  .SortSettingsDropDown--visible li {
    font-size: 13px;
  }
}
.SortSettingsDropDown--visible li.isVisible::before {
  margin-top: 0.211em;
  content: "\f00c";
  color: inherit;
  font-size: inherit;
  font-family: "Font Awesome 5 Pro";
}
.SortSettingsDropDown--visible ul {
  padding: 1.4em 1.4em 1.667em 1.667em;
  width: 100%;
  height: 100%;
}
@media (max-width: 991px) {
  .SortSettingsDropDown--visible ul {
    padding-top: 1em;
    padding-bottom: 0;
  }
}

.Alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10020;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 85px;
  transition: 200ms;
}
.Alert:nth-of-type(2) {
  top: 5.7em;
}
.Alert:nth-of-type(3) {
  top: 11.4em;
}
.Alert:nth-of-type(4) {
  top: 17.1em;
}
.Alert:nth-of-type(5) {
  top: 22.9em;
}
.Alert .fa {
  position: absolute;
  top: 1em;
  right: 1em;
  color: white;
  font-size: 2em;
}
.Alert .fa:hover {
  cursor: pointer;
}
@media (max-width: 991px) {
  .Alert .fa {
    top: 0.5em;
    right: 0.5em;
    font-size: 1.5em;
  }
}
.Alert p, .Alert h3 {
  color: white;
  font-weight: bold;
}
.Alert h3 {
  margin-bottom: 5px;
}
@media (max-width: 991px) {
  .Alert h3 {
    font-size: 22px;
  }
}
.Alert p {
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .Alert p {
    font-size: 14px;
  }
}
.Alert__succes {
  background-color: #71ae71;
  box-shadow: 0 2px 0 0 #609660;
}
.Alert__error {
  background-color: #FD5B24;
  box-shadow: 0 2px 0 0 #bf2d2d;
}

.TeacherAlerts {
  position: fixed;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 30px 30px 30px;
  display: flex;
  flex-direction: column-reverse;
  z-index: 1000000;
}
@media (max-width: 590px) {
  .TeacherAlerts {
    left: unset;
    transform: unset;
    width: 100%;
  }
}
.TeacherAlerts__flyout {
  left: unset;
  right: 0;
  transform: unset;
}
.TeacherAlerts__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 530px;
  padding: 20px 15px;
  color: white;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 590px) {
  .TeacherAlerts__item {
    width: 100%;
  }
}
.TeacherAlerts__item--success {
  background-color: #71ae71;
}
.TeacherAlerts__item--error {
  background-color: #ff4141;
}
.TeacherAlerts__item--message {
  background-color: #37274F;
}
.TeacherAlerts__item--flyout {
  width: 495px;
  margin-right: -15px;
}
@media (max-width: 590px) {
  .TeacherAlerts__item--flyout {
    width: 100%;
    margin-right: 0;
  }
}
.TeacherAlerts__item i {
  cursor: pointer;
  font-size: 1.2em;
}

.rect-auto {
  clip: rect(auto, auto, auto, auto);
}

.pie {
  position: absolute;
  border: 0.08em solid #307bbb;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  transform: rotate(0deg);
}
.pie-fill {
  transform: rotate(180deg);
}

.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: #cccccc;
}
.c100 * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.c100 *:before, .c100 *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.c100:after, .c100 p, .c100 .bar, .c100 .fill, .c100 .slice {
  position: absolute;
}
.c100 p, .c100 .slice, .c100 .bar, .c100 .fill {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.c100 .bar {
  border: 4px solid #307bbb;
  width: 41px;
  height: 41px;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  transform: rotate(0deg);
}
.c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
  clip: rect(auto, auto, auto, auto);
}
.c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
  border: 4px solid #307bbb;
  width: 41px;
  height: 41px;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  transform: rotate(0deg);
}
.c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill {
  transform: rotate(180deg);
}
.c100.center {
  float: none;
  margin: 0 auto;
}
.c100.big {
  font-size: 240px;
}
.c100.small {
  font-size: 80px;
}
.c100 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.c100:after {
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-color: #f5f5f5;
  width: 0.84em;
  height: 0.84em;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
}
.c100 .slice {
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p1 .bar {
  transform: rotate(3.6deg);
}
.c100.p2 .bar {
  transform: rotate(7.2deg);
}
.c100.p3 .bar {
  transform: rotate(10.8deg);
}
.c100.p4 .bar {
  transform: rotate(14.4deg);
}
.c100.p5 .bar {
  transform: rotate(18deg);
}
.c100.p6 .bar {
  transform: rotate(21.6deg);
}
.c100.p7 .bar {
  transform: rotate(25.2deg);
}
.c100.p8 .bar {
  transform: rotate(28.8deg);
}
.c100.p9 .bar {
  transform: rotate(32.4deg);
}
.c100.p10 .bar {
  transform: rotate(36deg);
}
.c100.p11 .bar {
  transform: rotate(39.6deg);
}
.c100.p12 .bar {
  transform: rotate(43.2deg);
}
.c100.p13 .bar {
  transform: rotate(46.8deg);
}
.c100.p14 .bar {
  transform: rotate(50.4deg);
}
.c100.p15 .bar {
  transform: rotate(54deg);
}
.c100.p16 .bar {
  transform: rotate(57.6deg);
}
.c100.p17 .bar {
  transform: rotate(61.2deg);
}
.c100.p18 .bar {
  transform: rotate(64.8deg);
}
.c100.p19 .bar {
  transform: rotate(68.4deg);
}
.c100.p20 .bar {
  transform: rotate(72deg);
}
.c100.p21 .bar {
  transform: rotate(75.6deg);
}
.c100.p22 .bar {
  transform: rotate(79.2deg);
}
.c100.p23 .bar {
  transform: rotate(82.8deg);
}
.c100.p24 .bar {
  transform: rotate(86.4deg);
}
.c100.p25 .bar {
  transform: rotate(90deg);
}
.c100.p26 .bar {
  transform: rotate(93.6deg);
}
.c100.p27 .bar {
  transform: rotate(97.2deg);
}
.c100.p28 .bar {
  transform: rotate(100.8deg);
}
.c100.p29 .bar {
  transform: rotate(104.4deg);
}
.c100.p30 .bar {
  transform: rotate(108deg);
}
.c100.p31 .bar {
  transform: rotate(111.6deg);
}
.c100.p32 .bar {
  transform: rotate(115.2deg);
}
.c100.p33 .bar {
  transform: rotate(118.8deg);
}
.c100.p34 .bar {
  transform: rotate(122.4deg);
}
.c100.p35 .bar {
  transform: rotate(126deg);
}
.c100.p36 .bar {
  transform: rotate(129.6deg);
}
.c100.p37 .bar {
  transform: rotate(133.2deg);
}
.c100.p38 .bar {
  transform: rotate(136.8deg);
}
.c100.p39 .bar {
  transform: rotate(140.4deg);
}
.c100.p40 .bar {
  transform: rotate(144deg);
}
.c100.p41 .bar {
  transform: rotate(147.6deg);
}
.c100.p42 .bar {
  transform: rotate(151.2deg);
}
.c100.p43 .bar {
  transform: rotate(154.8deg);
}
.c100.p44 .bar {
  transform: rotate(158.4deg);
}
.c100.p45 .bar {
  transform: rotate(162deg);
}
.c100.p46 .bar {
  transform: rotate(165.6deg);
}
.c100.p47 .bar {
  transform: rotate(169.2deg);
}
.c100.p48 .bar {
  transform: rotate(172.8deg);
}
.c100.p49 .bar {
  transform: rotate(176.4deg);
}
.c100.p50 .bar {
  transform: rotate(180deg);
}
.c100.p51 .bar {
  transform: rotate(183.6deg);
}
.c100.p52 .bar {
  transform: rotate(187.2deg);
}
.c100.p53 .bar {
  transform: rotate(190.8deg);
}
.c100.p54 .bar {
  transform: rotate(194.4deg);
}
.c100.p55 .bar {
  transform: rotate(198deg);
}
.c100.p56 .bar {
  transform: rotate(201.6deg);
}
.c100.p57 .bar {
  transform: rotate(205.2deg);
}
.c100.p58 .bar {
  transform: rotate(208.8deg);
}
.c100.p59 .bar {
  transform: rotate(212.4deg);
}
.c100.p60 .bar {
  transform: rotate(216deg);
}
.c100.p61 .bar {
  transform: rotate(219.6deg);
}
.c100.p62 .bar {
  transform: rotate(223.2deg);
}
.c100.p63 .bar {
  transform: rotate(226.8deg);
}
.c100.p64 .bar {
  transform: rotate(230.4deg);
}
.c100.p65 .bar {
  transform: rotate(234deg);
}
.c100.p66 .bar {
  transform: rotate(237.6deg);
}
.c100.p67 .bar {
  transform: rotate(241.2deg);
}
.c100.p68 .bar {
  transform: rotate(244.8deg);
}
.c100.p69 .bar {
  transform: rotate(248.4deg);
}
.c100.p70 .bar {
  transform: rotate(252deg);
}
.c100.p71 .bar {
  transform: rotate(255.6deg);
}
.c100.p72 .bar {
  transform: rotate(259.2deg);
}
.c100.p73 .bar {
  transform: rotate(262.8deg);
}
.c100.p74 .bar {
  transform: rotate(266.4deg);
}
.c100.p75 .bar {
  transform: rotate(270deg);
}
.c100.p76 .bar {
  transform: rotate(273.6deg);
}
.c100.p77 .bar {
  transform: rotate(277.2deg);
}
.c100.p78 .bar {
  transform: rotate(280.8deg);
}
.c100.p79 .bar {
  transform: rotate(284.4deg);
}
.c100.p80 .bar {
  transform: rotate(288deg);
}
.c100.p81 .bar {
  transform: rotate(291.6deg);
}
.c100.p82 .bar {
  transform: rotate(295.2deg);
}
.c100.p83 .bar {
  transform: rotate(298.8deg);
}
.c100.p84 .bar {
  transform: rotate(302.4deg);
}
.c100.p85 .bar {
  transform: rotate(306deg);
}
.c100.p86 .bar {
  transform: rotate(309.6deg);
}
.c100.p87 .bar {
  transform: rotate(313.2deg);
}
.c100.p88 .bar {
  transform: rotate(316.8deg);
}
.c100.p89 .bar {
  transform: rotate(320.4deg);
}
.c100.p90 .bar {
  transform: rotate(324deg);
}
.c100.p91 .bar {
  transform: rotate(327.6deg);
}
.c100.p92 .bar {
  transform: rotate(331.2deg);
}
.c100.p93 .bar {
  transform: rotate(334.8deg);
}
.c100.p94 .bar {
  transform: rotate(338.4deg);
}
.c100.p95 .bar {
  transform: rotate(342deg);
}
.c100.p96 .bar {
  transform: rotate(345.6deg);
}
.c100.p97 .bar {
  transform: rotate(349.2deg);
}
.c100.p98 .bar {
  transform: rotate(352.8deg);
}
.c100.p99 .bar {
  transform: rotate(356.4deg);
}
.c100.p100 .bar {
  transform: rotate(360deg);
}

.BucketGame .Primary__btn {
  margin: 3em auto 0;
}
.BucketGame .slick-slider {
  margin-bottom: 3.333em;
}
@media (max-width: 400px) {
  .BucketGame .slick-slider {
    margin-bottom: 2em;
  }
}
.BucketGame .slick-disabled {
  display: none !important;
}
.BucketGame p {
  text-align: center;
  font-size: 1.067em;
  color: #37274F;
  font-weight: bold;
  margin: 0;
}
.BucketGame .BucketGame__controls,
.BucketGame .BucketGame__button,
.BucketGame .BucketGame__button .MediaObject {
  display: flex;
  align-items: center;
}
.BucketGame .BucketGame__controls {
  justify-content: center;
  background-color: transparent;
  padding: 1em 2em;
  border-radius: 5em;
  margin: 1em auto 3em;
  width: 25em;
  height: 9.933em;
  position: relative;
  background-image: url("https://assets.senorwooly.com/static/images/bucket-game-controller-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 375px) {
  .BucketGame .BucketGame__controls {
    background-size: contain;
    height: 9.5em;
  }
}
@media (max-width: 325px) {
  .BucketGame .BucketGame__controls {
    height: 8.067em;
    width: 100%;
  }
}
@media (min-width: 325px) and (max-width: 375px) {
  .BucketGame .BucketGame__controls {
    width: 22.75em;
  }
}
.BucketGame .BucketGame__controls .BucketGame__button,
.BucketGame .BucketGame__controls .BucketGame__button .MediaObject {
  justify-content: center;
  width: 7.2em;
  height: 7.2em;
}
@media (max-width: 375px) {
  .BucketGame .BucketGame__controls .BucketGame__button,
  .BucketGame .BucketGame__controls .BucketGame__button .MediaObject {
    width: 6.5em;
    height: 6.5em;
  }
}
@media (max-width: 325px) {
  .BucketGame .BucketGame__controls .BucketGame__button,
  .BucketGame .BucketGame__controls .BucketGame__button .MediaObject {
    width: 6em;
    height: 6em;
  }
}
.BucketGame .BucketGame__controls .BucketGame__button {
  border-radius: 50%;
  text-align: center;
  transform: rotate(10deg);
  position: absolute;
  right: 2em;
  border: 1px solid transparent;
  top: 0;
  bottom: 0;
  margin: auto;
}
.BucketGame .BucketGame__controls .BucketGame__button:hover, .BucketGame .BucketGame__controls .BucketGame__button:active {
  cursor: pointer;
  border: 1px solid #d9d9d9;
}
.BucketGame .BucketGame__controls .BucketGame__button:hover p, .BucketGame .BucketGame__controls .BucketGame__button:hover .MediaObject, .BucketGame .BucketGame__controls .BucketGame__button:active p, .BucketGame .BucketGame__controls .BucketGame__button:active .MediaObject {
  box-shadow: none;
}
@media (max-width: 375px) {
  .BucketGame .BucketGame__controls .BucketGame__button {
    right: 1.5em;
  }
}
@media (max-width: 325px) {
  .BucketGame .BucketGame__controls .BucketGame__button {
    right: 1em;
  }
}
.BucketGame .BucketGame__controls .BucketGame__button p {
  width: 100%;
  height: 100%;
  background: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #FD5B24;
  transform: rotate(-10deg);
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
.BucketGame .BucketGame__controls .BucketGame__button p, .BucketGame .BucketGame__controls .BucketGame__button .MediaObject {
  border-radius: 50%;
}
.BucketGame .BucketGame__controls .BucketGame__button .MediaObject {
  background-color: #37274F;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}
.BucketGame .BucketGame__controls .BucketGame__button p, .BucketGame .BucketGame__controls .BucketGame__button .MediaType__image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.BucketGame .BucketGame__controls .BucketGame__button--selected {
  background-color: #FD5B24;
}
.BucketGame .BucketGame__controls .BucketGame__button--selected p, .BucketGame .BucketGame__controls .BucketGame__button--selected .MediaObject {
  background-color: #FD5B24;
  color: white;
  box-shadow: 0 2px 0 0 #c4532e;
}
.BucketGame .BucketGame__controls .BucketGame__button:first-of-type:not(:last-of-type) {
  left: 2em;
  right: auto;
}
@media (max-width: 375px) {
  .BucketGame .BucketGame__controls .BucketGame__button:first-of-type:not(:last-of-type) {
    left: 1.5em;
  }
}
@media (max-width: 325px) {
  .BucketGame .BucketGame__controls .BucketGame__button:first-of-type:not(:last-of-type) {
    left: 1em;
  }
}
.BucketGame .BucketGame__controls .BucketGame__button:nth-of-type(1) {
  transform: rotate(-10deg);
}
.BucketGame .BucketGame__controls .BucketGame__button:nth-of-type(1) p {
  transform: rotate(10deg);
}
.BucketGame .BucketGame__controls .BucketGame__button .MediaType__image {
  width: inherit;
  height: inherit;
  padding: 0.25em;
}
.BucketGame .BucketGame__controls .BucketGame__button img {
  width: 100%;
  border-radius: 100%;
  pointer-events: none;
  height: 100%;
  object-fit: cover;
}
.BucketGame .BucketGame__controls .BucketGame__button img::-moz-selection {
  background-color: transparent;
}
.BucketGame .BucketGame__controls .BucketGame__slidesLeft {
  margin: 0 1.8em;
  position: relative;
  text-align: center;
}
@media (max-width: 325px) {
  .BucketGame .BucketGame__controls .BucketGame__slidesLeft {
    margin: 0 1em;
  }
}
.BucketGame .BucketGame__controls .BucketGame__slidesLeft .c100, .BucketGame .BucketGame__controls .BucketGame__slidesLeft .c100 p {
  display: flex;
  align-items: center;
  justify-content: center;
}
.BucketGame .BucketGame__controls .BucketGame__slidesLeft .c100 {
  margin: 0;
  text-align: center;
}
.BucketGame .BucketGame__controls .BucketGame__slidesLeft .c100:hover:after, .BucketGame .BucketGame__controls .BucketGame__slidesLeft .c100:after {
  top: 3px;
  left: 3px;
  width: 43px;
  height: 43px;
}
.BucketGame .BucketGame__controls .BucketGame__slidesLeft .c100:after {
  background-color: white;
}
.BucketGame .BucketGame__controls .BucketGame__slidesLeft .c100.small {
  font-size: 49px !important;
}
.BucketGame .BucketGame__controls .BucketGame__slidesLeft .c100 .bar, .BucketGame .BucketGame__controls .BucketGame__slidesLeft .c100 .fill {
  border-color: #37274F;
}
.BucketGame .BucketGame__controls .BucketGame__slidesLeft p {
  z-index: 2;
  color: #37274F;
  font-weight: bold;
  font-size: 16px;
}

.BucketGameModal .ProgressIndicators {
  display: none;
}
.BucketGameModal .Modal__text {
  margin-bottom: 2em;
}

.BucketGameReview {
  background-color: white;
  margin-bottom: 1em;
}
@media (max-width: 768px) {
  .BucketGameReview {
    display: flex;
    margin: 0 -3em 1em;
    width: auto;
    flex-wrap: wrap;
  }
}
.BucketGameReview h4 {
  text-align: center;
}
@media (max-width: 768px) {
  .BucketGameReview h4 {
    text-align: left;
  }
}
.BucketGameReview .BucketGameAnswers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .BucketGameReview .BucketGameAnswers {
    width: 100%;
  }
}
.BucketGameReview .BucketGameAnswers img {
  width: 4em;
  padding: 0;
  height: 4em;
}
.BucketGameReview .BucketGameReviewAnswer {
  position: relative;
  margin: 0.5em 0;
}
.BucketGameReview .BucketGameReviewAnswer .ProgressIndicator {
  position: absolute;
  bottom: -0.333em;
  right: -0.333em;
}

.BucketGame .slick-slide .TaskSliderCard {
  width: 23.571em;
  height: 16.4em;
}
@media (max-width: 500px) {
  .BucketGame .slick-slide .TaskSliderCard {
    height: 13.333em;
    width: 22em;
  }
}
@media (min-width: 400px) and (max-width: 500px) {
  .BucketGame .slick-slide .TaskSliderCard {
    margin-left: 0;
    margin-right: 0;
    width: 23.5em;
    height: 15em;
  }
}
@media (max-width: 325px) {
  .BucketGame .slick-slide .TaskSliderCard {
    width: 18em;
  }
}

.TaskSliderCard {
  position: relative;
  height: 230px;
  font-size: 14px;
  margin-left: 15px;
  margin-right: 15px;
  color: #37274F;
  background-color: white;
  border-radius: 8px;
}
@media (max-width: 991px) {
  .TaskSliderCard {
    height: 175px;
  }
}
.TaskSliderCard--review {
  margin-left: 0;
}
.TaskSliderCard__text {
  padding: 1em;
}
.TaskSliderCard__identifier {
  position: absolute;
  bottom: 15px;
  left: 15px;
  font-weight: 600;
  color: #CBCCF7;
}
.TaskSliderCard__block {
  width: 100%;
  height: 100%;
}
.TaskSliderCard__block .MediaObject {
  background-color: #37274F;
  overflow-x: hidden;
  border-radius: 3px;
}
.TaskSliderCard__block .AudioPlayer {
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.TaskSliderCard__block .VideoPlayer {
  height: 100%;
}
.TaskSliderCard__block .MediaType__image {
  width: 100%;
  height: 100%;
}
.TaskSliderCard__block .MediaType__image img {
  width: inherit;
  height: inherit;
  object-fit: contain;
}

.Markdown__prompt, .Markdown__subTitle, .Markdown__question {
  color: #2d2d2d;
}
.Markdown__title, .Markdown__cardText {
  text-align: center;
}
.Markdown__prompt {
  font-size: 22px;
  line-height: 1.64;
  margin-top: 0;
  margin-bottom: 1em;
}
.Markdown__subTitle {
  font-size: 16px;
  line-height: 1.88;
  margin-bottom: 1.25em;
}
.Markdown__subTitle:last-of-type {
  margin-top: 1em;
}
.Markdown__question {
  font-size: 1.2em;
  line-height: 2;
  font-weight: normal;
}
.Markdown__title {
  line-height: 1.6;
  font-size: 22px;
  color: #37274F;
  margin-top: 2em;
}
.Markdown__cardText {
  font-size: 1.2em;
  color: #37274F;
  margin: 0;
}

.rc-tooltip.rc-tooltip-zoom-enter, .rc-tooltip.rc-tooltip-zoom-leave {
  display: block;
}

.rc-tooltip-zoom-enter,
.rc-tooltip-zoom-appear {
  opacity: 0;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  animation-play-state: paused;
}

.rc-tooltip-zoom-leave {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
  animation-play-state: paused;
}

.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
  animation-name: rcToolTipZoomIn;
  animation-play-state: running;
}

.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
  animation-name: rcToolTipZoomOut;
  animation-play-state: running;
}

@keyframes rcToolTipZoomIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}
@keyframes rcToolTipZoomOut {
  0% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
}
.rc-tooltip {
  position: absolute;
  z-index: 20000;
  display: block;
  visibility: visible;
  line-height: 1.5;
  font-size: 14px;
  background-color: white;
  padding: 1px;
  border-radius: 8px;
  box-shadow: 0 2px 10px 0 rgba(224, 226, 230, 0.5);
}
@media (max-width: 991px) {
  .rc-tooltip {
    font-size: 12px;
  }
}

.rc-tooltip-hidden {
  display: none;
}

.rc-tooltip-inner {
  padding: 10px 12px;
  color: #333333;
  text-align: left;
  text-decoration: none;
  background-color: #ffffff;
  border-radius: 3px;
  min-height: 34px;
}

.rc-tooltip-arrow,
.rc-tooltip-arrow-inner {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.rc-tooltip-placement-top .rc-tooltip-arrow,
.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
  bottom: -9px;
  margin-left: -6px;
  border-width: 10px 10px 0;
  border-top-color: white;
}

.rc-tooltip-placement-top .rc-tooltip-arrow-inner,
.rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner,
.rc-tooltip-placement-topRight .rc-tooltip-arrow-inner {
  bottom: 1px;
  margin-left: -6px;
  border-width: 6px 6px 0;
  border-top-color: #ffffff;
}

.rc-tooltip-placement-top .rc-tooltip-arrow {
  left: 50%;
}

.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
  left: 15%;
}

.rc-tooltip-placement-topRight .rc-tooltip-arrow {
  right: 15%;
}

.rc-tooltip-placement-right .rc-tooltip-arrow,
.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
  left: -5px;
  margin-top: -6px;
  border-width: 6px 6px 6px 0;
  border-right-color: #b1b1b1;
}

.rc-tooltip-placement-right .rc-tooltip-arrow-inner,
.rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner,
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner {
  left: 1px;
  margin-top: -6px;
  border-width: 6px 6px 6px 0;
  border-right-color: #ffffff;
}

.rc-tooltip-placement-right .rc-tooltip-arrow {
  top: 50%;
}

.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
  top: 15%;
  margin-top: 0;
}

.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
  bottom: 15%;
}

.rc-tooltip-placement-left .rc-tooltip-arrow,
.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
  right: -5px;
  margin-top: -6px;
  border-width: 6px 0 6px 6px;
  border-left-color: #b1b1b1;
}

.rc-tooltip-placement-left .rc-tooltip-arrow-inner,
.rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner,
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner {
  right: 1px;
  margin-top: -6px;
  border-width: 6px 0 6px 6px;
  border-left-color: #ffffff;
}

.rc-tooltip-placement-left .rc-tooltip-arrow {
  top: 50%;
}

.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
  top: 15%;
  margin-top: 0;
}

.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
  bottom: 15%;
}

.rc-tooltip-placement-bottom .rc-tooltip-arrow,
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
  top: -5px;
  margin-left: -6px;
  border-width: 0 6px 6px;
  border-bottom-color: #b1b1b1;
}

.rc-tooltip-placement-bottom .rc-tooltip-arrow-inner,
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner,
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner {
  top: 1px;
  margin-left: -6px;
  border-width: 0 6px 6px;
  border-bottom-color: #ffffff;
}

.rc-tooltip-placement-bottom .rc-tooltip-arrow {
  left: 50%;
}

.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
  left: 15%;
}

.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
  right: 15%;
}

.translationTooltip__selector {
  position: relative;
  margin-bottom: 2px;
  border-bottom: 1px solid #37274F;
  cursor: pointer;
}
.translationTooltip__selector--active + .translationTooltip__translation {
  display: block;
}
.translationTooltip__selector:hover {
  background: #CBCCF7;
  border-radius: 3px;
  border-bottom: 0;
  margin-bottom: 0;
}

.AgainstTheClock {
  padding-top: 100px;
  min-height: 720px;
}
@media (max-width: 992px) {
  .AgainstTheClock {
    padding-top: 25px;
  }
}
.AgainstTheClock__play {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  font-size: 3rem;
}
@media (max-width: 992px) {
  .AgainstTheClock__play {
    top: 58%;
  }
}
@media (max-width: 400px) {
  .AgainstTheClock__play {
    top: 55%;
  }
}
.AgainstTheClock__video {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 40px auto;
}
.AgainstTheClock__video .VideoPlayer {
  width: 100%;
  height: 27em;
}
@media (max-width: 500px) {
  .AgainstTheClock__video .VideoPlayer {
    height: 14em;
  }
}
.AgainstTheClock__video .VideoPlayer .vjs-poster {
  background-size: contain !important;
}
.AgainstTheClock__video i {
  margin-top: 2px;
  margin-left: 7px;
  color: #37274F;
}
@media (max-width: 992px) {
  .AgainstTheClock__topbar {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}
.AgainstTheClock__stats {
  position: absolute;
  top: -30px;
  right: -25px;
}
@media (max-width: 992px) {
  .AgainstTheClock__stats {
    position: relative;
    display: flex;
    left: 0;
  }
  .AgainstTheClock__stats .Stat:first-of-type {
    margin-right: 8px;
  }
}
@media (min-width: 992px) {
  .AgainstTheClock__stats .Stat {
    margin-bottom: 15px;
  }
}
.AgainstTheClock__countDown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 295px;
  height: 55px;
  position: absolute;
  top: -25px;
  left: 15px;
  background: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 600;
  min-width: 80px;
  text-align: center;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 992px) {
  .AgainstTheClock__countDown {
    position: relative;
    left: unset;
    width: 100%;
    padding: 6px 15px;
    height: 100%;
    font-size: 12px;
    margin-left: 8px;
    max-width: 300px;
  }
}
.AgainstTheClock__countDown progress {
  width: 196px;
  -webkit-appearance: none;
  appearance: none;
  height: 43px;
  background-color: white;
  color: #FD5B24;
  border-radius: 8px;
  overflow: hidden;
  padding: 5px;
  box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 992px) {
  .AgainstTheClock__countDown progress {
    width: 75%;
  }
}
@media (max-width: 992px) {
  .AgainstTheClock__countDown progress {
    height: 25px;
  }
}
.AgainstTheClock__countDown progress::-ms-fill {
  border: none;
}
.AgainstTheClock__countDown progress::-webkit-progress-bar {
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
}
.AgainstTheClock__countDown progress::-moz-progress-bar {
  border-radius: 8px;
  overflow: hidden;
}
.AgainstTheClock__countDown--ok span {
  color: #71ae71;
}
.AgainstTheClock__countDown--ok progress {
  color: #71ae71;
}
.AgainstTheClock__countDown--ok progress::-moz-progress-value {
  background-color: #71ae71;
}
.AgainstTheClock__countDown--ok progress::-webkit-progress-value {
  background-color: #71ae71;
}
.AgainstTheClock__countDown--ok progress::-moz-progress-bar {
  background-color: #71ae71;
}
.AgainstTheClock__countDown--alert span {
  color: #FD5B24;
}
.AgainstTheClock__countDown--alert progress {
  color: #FD5B24;
}
.AgainstTheClock__countDown--alert progress::-moz-progress-value {
  background-color: #FD5B24;
}
.AgainstTheClock__countDown--alert progress::-webkit-progress-value {
  background-color: #FD5B24;
}
.AgainstTheClock__countDown--alert progress::-moz-progress-bar {
  background-color: #FD5B24;
}
.AgainstTheClock__countDown--warning span {
  color: #ff4141;
}
.AgainstTheClock__countDown--warning progress {
  color: #ff4141;
}
.AgainstTheClock__countDown--warning progress::-moz-progress-value {
  background-color: #ff4141;
}
.AgainstTheClock__countDown--warning progress::-webkit-progress-value {
  background-color: #ff4141;
}
.AgainstTheClock__countDown--warning progress::-moz-progress-bar {
  background-color: #ff4141;
}
.AgainstTheClock__hint {
  background-color: #B5EAFE;
  color: #37274F;
  border-radius: 38px;
  min-width: 200px;
  max-width: 275px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 992px) {
  .AgainstTheClock__hint {
    min-width: 120px;
  }
}
.AgainstTheClock__hint .rc-tooltip-inner {
  background-color: #B5EAFE;
  color: #37274F;
}
.AgainstTheClock__hint .rc-tooltip-arrow {
  border-top-color: #B5EAFE;
  border-bottom-color: #B5EAFE;
}
.AgainstTheClock__hint .rc-tooltip-inner {
  border-radius: 38px;
  text-align: center;
  font-weight: bold;
  padding: 15px;
}
.AgainstTheClock__hint--spacer {
  display: none;
}
.AgainstTheClock__questionWrapper {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}
@media (max-width: 992px) {
  .AgainstTheClock__questionWrapper {
    bottom: 10px !important;
  }
}
.AgainstTheClock__question {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 7px 15px 15px;
  background-color: #FD5B24;
  border-radius: 30px 30px 30px 0;
  text-align: center;
  font-size: 1.25em;
  font-weight: 600;
  color: white;
  overflow: hidden;
}
@media (max-width: 992px) {
  .AgainstTheClock__question {
    padding: 10px;
    font-size: 0.9em;
  }
}
.AgainstTheClock__question span {
  flex: 1;
}
.AgainstTheClock__question.is-correct {
  background-color: #71ae71;
}
.AgainstTheClock__question.is-wrong {
  background-color: #ff4141;
}
.AgainstTheClock__question img {
  width: 45px;
  height: 45px;
  border: 3px solid white;
  border-radius: 50%;
  cursor: pointer;
}
@media (max-width: 992px) {
  .AgainstTheClock__question img {
    bottom: 9px;
    width: 35px;
    height: 35px;
  }
}
.AgainstTheClock__answers {
  width: 100%;
  max-width: 720px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 25px;
  margin-bottom: 30px;
}
@media (max-width: 991px) {
  .AgainstTheClock__answers {
    flex-direction: column;
    padding: 0;
  }
}
.AgainstTheClock__answerWrapper {
  position: relative;
  width: 50%;
  height: max-content;
}
@media (max-width: 991px) {
  .AgainstTheClock__answerWrapper {
    width: 100%;
  }
  .AgainstTheClock__answerWrapper:first-of-type {
    margin-bottom: 20px;
  }
}
@media (min-width: 992px) {
  .AgainstTheClock__answerWrapper:first-of-type {
    margin-right: 7px;
  }
  .AgainstTheClock__answerWrapper:last-of-type {
    margin-left: 7px;
  }
}
.AgainstTheClock__answer {
  transition: 250ms;
  cursor: pointer;
  background-color: white;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  width: 100%;
  border-radius: 8px;
  font-size: 1.125em;
  padding: 18px 15px;
  text-align: center;
  font-weight: 600;
}
@media (max-width: 992px) {
  .AgainstTheClock__answer {
    font-size: 0.9em;
  }
}
.AgainstTheClock__answer > div:first-of-type {
  padding: 0 50px 0 12px;
}
.AgainstTheClock__answer:hover, .AgainstTheClock__answer--selected {
  color: white;
  background-color: #FD5B24;
}
.AgainstTheClock__answer--correct {
  color: white;
  background-color: #71ae71;
}
.AgainstTheClock__answer--wrong {
  color: white;
  background-color: #ff4141;
}
.AgainstTheClock__answerHint {
  position: absolute;
  right: 10px;
  top: 6px;
  z-index: 1;
  transition: 250ms;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0px 1px 4px rgba(45, 45, 45, 0.15);
  cursor: pointer;
  box-sizing: content-box;
  padding: 3px;
}
@media (max-width: 992px) {
  .AgainstTheClock__answerHint {
    width: 35px;
    height: 35px;
  }
}
.AgainstTheClock__answerHint:hover {
  background-color: #F5906F;
}
.AgainstTheClock__answerHint img {
  width: 45px;
  height: 45px;
}
@media (max-width: 992px) {
  .AgainstTheClock__answerHint img {
    width: 35px;
    height: 35px;
  }
}
.AgainstTheClock__answerHint--expanded {
  position: relative;
  width: 100%;
  padding: 15px 10px 10px 10px;
  margin-top: -5px;
  border-radius: 0 0 8px 8px;
  background-color: #f8fafe;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  font-weight: 600;
  border-top: 1px solid #DFE7F9;
}
.AgainstTheClock__answerHint--expanded .AgainstTheClock__timer::-moz-progress-value {
  background-color: #37274F;
}
.AgainstTheClock__answerHint--expanded .AgainstTheClock__timer::-webkit-progress-value {
  background-color: #37274F;
}
.AgainstTheClock__answerHint--expanded .AgainstTheClock__timer::-moz-progress-bar {
  background-color: #37274F;
}
.AgainstTheClock__timer {
  position: absolute;
  bottom: 0;
  -webkit-appearance: none;
  left: 0;
  right: 0;
  width: 100%;
  height: 5px;
}
.AgainstTheClock__timer::-ms-fill {
  border: none;
}
.AgainstTheClock__timer::-moz-progress-value {
  background-color: white;
}
.AgainstTheClock__timer::-webkit-progress-value {
  background-color: white;
}
.AgainstTheClock__timer::-webkit-progress-bar {
  background-color: transparent;
  border-radius: 0 0 60px 0;
  overflow: hidden;
}
.AgainstTheClock__timer::-moz-progress-bar {
  background-color: white;
  border-radius: 0;
  overflow: hidden;
}
.AgainstTheClock .overVideo {
  z-index: 10;
}
@media (max-width: 992px) {
  .AgainstTheClock .overVideo {
    top: unset;
    margin-bottom: 15px;
  }
}

.carousel-inner.againsttheclock {
  overflow: visible;
  margin: -1px;
}

.BadgeUnlockables {
  margin-bottom: 1.2em;
}
.BadgeUnlockables .row.equal {
  display: flex;
  flex-wrap: wrap;
}
.BadgeUnlockables .row.equal > div {
  display: flex;
  flex-wrap: wrap;
  height: 170px;
  padding-bottom: 5px;
  margin-bottom: 25px;
  overflow: hidden;
}
.BadgeUnlockables__badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 144px;
  margin-right: 15px;
}
@media (max-width: 991px) {
  .BadgeUnlockables__badge {
    width: 130px;
  }
}
.BadgeUnlockables__badge:hover {
  text-decoration: none !important;
}
.BadgeUnlockables__badge img {
  height: auto;
  width: 40%;
  align-self: center;
  flex: 0 0 auto;
  margin-bottom: 10px;
}
.BadgeUnlockables__badge p {
  text-align: center;
  margin-bottom: 0;
  font-size: 12px;
  margin-bottom: 5px;
}
.BadgeUnlockables__badge .ProgressBar__indicator {
  color: #37274F;
  border-radius: 0 0 8px 8px;
}
.BadgeUnlockables__badge .ProgressBar__indicator::-moz-progress-bar {
  background-color: #37274F;
}
.BadgeUnlockables__badge .ProgressBar__indicator::-webkit-progress-value {
  background-color: #37274F;
}
.BadgeUnlockables__badge .ProgressBar__indicator--completed {
  display: none;
}
.BadgeUnlockables__badge--achieved {
  justify-content: center;
  background: radial-gradient(circle at 50% -142%, #a4ff00, #9bee34 20%, #92de4a 40%, #88ce59 60%, #7dbe66 81%, #71ae71);
}
.BadgeUnlockables__badge--achieved img {
  width: 65%;
}
.BadgeUnlockables__badge--achieved p:first-of-type {
  color: white;
}
.BadgeUnlockables__badge--achieved p:last-of-type {
  display: none;
}

.ProgressBar {
  position: relative;
}
.ProgressBar span {
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  font-size: 12px;
  color: white;
  text-align: center;
}
.ProgressBar p {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 0 !important;
  margin-top: 5px;
}
.ProgressBar progress {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  background-color: #d9d9d9;
  color: #FD5B24;
  border: 1px solid white;
  border-radius: 17px;
  overflow: hidden;
  padding: 1px;
  box-shadow: 0 2px 4px 0 rgba(45, 45, 45, 0.2);
}
@media (max-width: 991px) {
  .ProgressBar progress {
    width: 100%;
  }
}
.ProgressBar progress::-ms-fill {
  border: none;
}
.ProgressBar progress::-moz-progress-value {
  background-color: #FD5B24;
}
.ProgressBar progress::-webkit-progress-value {
  background-color: #FD5B24;
}
.ProgressBar progress::-webkit-progress-bar {
  background-color: transparent;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.ProgressBar progress::-moz-progress-bar {
  background-color: #FD5B24;
  border-radius: 8px;
  overflow: hidden;
}
.ProgressBar--completed progress {
  color: #71ae71;
}
.ProgressBar--completed progress::-moz-progress-value {
  background-color: #71ae71;
}
.ProgressBar--completed progress::-webkit-progress-value {
  background-color: #71ae71;
}
.ProgressBar--completed progress::-moz-progress-bar {
  background-color: #71ae71;
}

.TextInputActivity .ExcerciseBlock {
  margin-top: 0;
  margin-bottom: 3.33em;
  margin-top: 7px;
}
.TextInputActivity .ExcerciseBlock .Markdown__question {
  color: #37274F;
  background-color: #E0E3E9;
  padding: 1em;
  border-radius: 3px;
  min-height: 112px;
}
.TextInputActivity .ExcerciseBlock .Markdown__question p {
  line-height: 32px;
  margin-bottom: 0;
}
.TextInputActivity .ExcerciseBlock .VideoPlayer {
  height: 20em;
}
.TextInputActivity .Markdown__prompt {
  color: #37274F;
}
.TextInputActivity .Markdown__prompt p {
  margin-bottom: 0;
}
.TextInputActivity .TextInputActivity__answer {
  width: 100%;
}
.TextInputActivity .TextInputActivity__answer input {
  display: inline-block;
  background-color: white;
  border-radius: 8px;
  padding: 14px 20px;
  width: 100%;
  border: 0;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  font-size: 1.2em;
  font-weight: bold;
}
.TextInputActivity .TextInputActivity__answer input::-webkit-input-placeholder {
  font-size: 0.875em;
  font-weight: normal;
}
.TextInputActivity .TextInputActivity__answer--correct input {
  border: 1px solid #71ae71;
  box-shadow: 0 2px 0 0 #609660;
}
.TextInputActivity .TextInputActivity__answer--wrong input {
  border: 1px solid #ff4141;
  box-shadow: 0 2px 0 0 #bf2d2d;
}

.product__head {
  margin-bottom: 25px;
}

.variation__sizechart {
  display: inline-block;
  margin-bottom: 5px;
  cursor: pointer;
  position: relative;
  color: #37274F;
}
@media (max-width: 992px) {
  .variation__sizechart {
    margin-top: 25px;
  }
}
.variation__sizechart:after {
  content: "";
  display: block;
  height: 2px;
  background-color: #37274F;
}

.variation__alert {
  color: #ff4141;
  font-weight: bold;
  margin-bottom: 15px;
}

.select__wrapper {
  position: relative;
  max-width: 370px;
}
.select__wrapper select {
  cursor: pointer;
}
.select__wrapper .form-control.variation {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 3px;
  border: 1px solid #37274F;
  background-color: white;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
}
.select__wrapper:after {
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  content: "\f107";
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #37274F;
  font-size: 1.7rem;
  pointer-events: none;
}

.Stat {
  position: relative;
  background-color: white;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 6px;
  border-radius: 8px;
  min-width: 102px;
}
@media (max-width: 992px) {
  .Stat {
    min-width: 62px;
  }
}
.Stat__inner {
  display: flex;
  align-items: center;
  background-color: #FD5B24;
  font-weight: 600;
  color: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 992px) {
  .Stat__inner {
    padding: 4px;
  }
}
.Stat__inner img {
  width: 25px;
  height: auto;
  margin-right: 10px;
}
@media (max-width: 992px) {
  .Stat__inner img {
    width: 18px;
    margin-right: 5px;
  }
}
.Stat__inner span {
  font-size: 1.25em;
}
@media (max-width: 992px) {
  .Stat__inner span {
    font-size: 0.8em;
  }
}
.Stat--inverted {
  background-color: #FD5B24;
}
.Stat--inverted .Stat__inner {
  background-color: white;
  color: #FD5B24;
}
.Stat__points {
  margin: 0;
  padding: 5px 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  color: white;
  font-weight: 600;
  min-width: 50px;
  text-align: center;
  font-weight: 600;
}
@media (max-width: 992px) {
  .Stat__points {
    min-width: 25px;
    font-size: 10px;
  }
}
.Stat__points--positive {
  background-color: #71ae71;
}
.Stat__points--negative {
  background-color: #ff4141;
}

.Stats__stat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 125px;
  background: #71ae71;
  border-radius: 8px;
  border: 1px solid #3F6A3F;
  box-shadow: 0px 2px 0px #3E613E;
}
@media (max-width: 992px) {
  .Stats__stat {
    margin-bottom: 80px;
  }
}
@media (max-width: 768px) {
  .Stats__stat {
    margin-bottom: 0;
    width: 155px;
    height: 100px;
  }
}
.Stats__stat img {
  height: 70px;
  width: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -50px;
}
@media (max-width: 769px) {
  .Stats__stat img {
    height: 50px;
    top: -35px;
  }
}
@media (max-width: 769px) {
  .Stats__stat--imageTopLeft img {
    height: 50px;
  }
}
.Stats__stat__difference {
  position: absolute;
  top: -12px;
  right: -12px;
  padding: 2px 12px;
  background-color: white;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-weight: 600;
}
.Stats__stat__difference.positive {
  color: #71ae71;
}
.Stats__stat__difference.negative {
  color: #ff4141;
}
.Stats__stat__description--medium {
  font-weight: 400;
}
.Stats__stat__description--large {
  font-weight: 600;
}
.Stats__stat p {
  color: white;
  text-align: center;
}
.Stats__stat p:first-of-type {
  font-size: 2em;
  margin-bottom: 5px;
}
.Stats__stat p:last-of-type {
  font-size: 0.93em;
  margin-bottom: 0;
}
@media (max-width: 769px) {
  .Stats__stat p:first-of-type {
    font-size: 20px;
    font-weight: 700;
  }
  .Stats__stat p:last-of-type {
    font-size: 10px;
  }
}
.Stats__header {
  margin-bottom: 60px;
}
.Stats__header__title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  cursor: pointer;
}
.Stats__header__title h4 {
  color: #37274F;
  margin: 0 10px 0 0;
}
.Stats__header__title i {
  color: #37274F;
  font-size: 32px;
  font-weight: 200;
}
@media (max-width: 769px) {
  .Stats__header__title h4 {
    font-size: 16px;
  }
  .Stats__header__title i {
    font-size: 16px;
  }
}
.Stats__header .dropdown ul {
  padding: 0 0 0 10px;
  margin: 0;
}
.Stats__header .dropdown ul li {
  padding: 10px 10px 10px 0;
  font-weight: 700;
  color: #37274F;
  cursor: pointer;
  border-bottom: 1px solid #ECEFF7;
}
.Stats__header .dropdown ul li:last-child {
  border-bottom: none;
}
@media (max-width: 769px) {
  .Stats__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 20px;
  }
  .Stats__header__hide {
    font-size: 12px;
  }
}

.RecentStories {
  padding-top: 60px;
  margin-bottom: 60px;
}
.RecentStories--basic {
  padding-top: 0;
}
.RecentStories__tile {
  display: inline-block;
  width: 100%;
  height: 162px;
  margin-bottom: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.19);
  border-radius: 6px;
}
@media (max-width: 769px) {
  .RecentStories__tile {
    width: 260px;
  }
}
.RecentStories__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.RecentStories__tile span {
  color: white;
  font-weight: 600;
  text-decoration: none;
  background-color: #FD5B24;
  padding: 5px 11px;
  position: absolute;
  top: 0;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 8px;
}

.ReactTable.Table {
  border: 0;
  margin-bottom: 20px;
  color: #37274F;
}
.ReactTable.Table .rt-thead.-header {
  margin-bottom: 10px;
  box-shadow: none;
  padding: 0 15px;
}
.ReactTable.Table .rt-thead.-header .rt-th {
  border: 0;
  text-align: left;
  font-weight: 600;
  display: flex;
}
.ReactTable.Table .rt-thead.-header .rt-th.center {
  text-align: center;
  justify-content: center;
}
.ReactTable.Table .rt-thead.-header .rt-th.right {
  text-align: right;
  justify-content: flex-end;
}
.ReactTable.Table .rt-thead.-header .rt-th.-sort-asc {
  box-shadow: none;
  -webkit-box-shadow: none;
}
.ReactTable.Table .rt-thead.-header .rt-th.-sort-asc:after {
  content: "\f062";
  font-family: "Font Awesome 5 Pro";
  color: #FD5B24;
  margin-left: 5px;
  margin-top: 2px;
}
.ReactTable.Table .rt-thead.-header .rt-th.-sort-desc {
  box-shadow: none;
  -webkit-box-shadow: none;
}
.ReactTable.Table .rt-thead.-header .rt-th.-sort-desc:after {
  content: "\f063";
  font-family: "Font Awesome 5 Pro";
  color: #FD5B24;
  margin-left: 5px;
  margin-top: 2px;
}
.ReactTable.Table .rt-thead.-filters {
  padding-left: 30px;
  padding-right: 15px;
}
.ReactTable.Table .rt-thead.-filters .rt-th {
  border: 0;
}
.ReactTable.Table .rt-tr {
  align-items: center;
}
.ReactTable.Table .rt-tr .rt-td:first-of-type {
  margin-right: 15px;
}
.ReactTable.Table .rt-tr-group {
  padding: 11px 15px;
  background: #FFFFFF;
  margin-bottom: 15px;
  border-bottom: 0;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  font-size: 1.06em;
  height: 73px;
}
@media (max-width: 992px) {
  .ReactTable.Table .rt-tr-group {
    height: 50px;
    justify-content: center;
  }
}
@media (max-width: 769px) {
  .ReactTable.Table .rt-tr-group {
    margin-bottom: 6px;
  }
}
.ReactTable.Table .rt-tr-group .rt-td {
  border: 0;
}
.ReactTable.Table .rt-tr-group .rt-td.title {
  font-size: 1.33em;
}
.ReactTable.Table .rt-tr-group .rt-td.bold {
  font-weight: 600;
}
.ReactTable.Table .rt-tr-group .rt-td.center {
  text-align: center;
}
.ReactTable.Table .rt-tr-group .rt-td.right {
  text-align: right;
}
.ReactTable.Table .rt-tr-group .rt-td.show-overflow {
  overflow: visible;
}
.ReactTable.Table .rt-tr-group .rt-td.avatars {
  display: inline-flex;
  padding-left: 5%;
}
.ReactTable.Table .rt-tr-group .rt-td.pointer {
  cursor: pointer;
}
.ReactTable.Table .rt-tr-group .rt-td.coins {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ReactTable.Table .rt-tr-group .rt-td.coins:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(https://assets.senorwooly.com/static/images/wooly-coins.svg) no-repeat;
  margin-right: 7px;
}
.Table__buttonGroup {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

.Table__button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: #37274F;
  font-weight: 500;
  font-size: 0.875em;
  text-decoration: underline;
  cursor: pointer;
}
.Table__button:focus {
  outline: none;
}

.ReactTable.Table .rt-thead.-header .rt-th input, .ReactTable.Table .rt-tr-group .rt-td input[type=checkbox] {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 2px solid #442F54;
  box-sizing: border-box;
  border-radius: 8px;
  width: 23px;
  height: 23px;
  cursor: pointer;
}
.ReactTable.Table .rt-thead.-header .rt-th input:checked, .ReactTable.Table .rt-tr-group .rt-td input[type=checkbox]:checked {
  background-color: #442F54;
  box-shadow: inset 0 0 0 2px white;
  border: 2px solid #442F54;
}
.ReactTable.Table .rt-thead.-header .rt-th input:active, .ReactTable.Table .rt-tr-group .rt-td input[type=checkbox]:active {
  outline: 0;
}

.FetchError {
  margin-top: 50px;
  margin-bottom: 50px;
}
.FetchError p {
  margin-bottom: 0;
  font-size: 1.25em;
  color: #37274F;
  font-weight: 500;
}
.FetchError button {
  appearance: none;
  transition: 250ms;
  background-color: #FD5B24;
  color: white;
  padding: 10px 30px;
  border-radius: 3px;
  margin-top: 2em;
  border: 0;
  box-shadow: 0px 2px 0px #B8502E;
}
.FetchError button:hover {
  transition: 250ms;
  background-color: #37274F;
  box-shadow: none;
}

.RangeSlider__tooltip {
  background-color: #ECF1FA;
  padding: 0;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5254901961);
}
.RangeSlider__tooltip .rc-tooltip-arrow {
  border-top-color: #ECF1FA !important;
  left: 48% !important;
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.5254901961)) !important;
}
.RangeSlider__tooltip .rc-tooltip-placement-top .rc-tooltip-arrow {
  left: 48%;
}
.RangeSlider__tooltip .rc-tooltip-inner {
  background-color: #ECF1FA;
  color: #DECAFB;
  border-radius: 8px;
}
.RangeSlider__tooltip .rc-tooltip-inner .arrow-content-tooltip .react-tooltip-lite {
  box-sizing: border-box;
  border: 1px solid gray;
  border-radius: 8px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
}
.RangeSlider__container {
  position: relative;
}
.RangeSlider__overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #ECF1FA;
  opacity: 0.9;
  z-index: 1000000;
}
.RangeSlider__text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
  color: #FF7041;
  font-size: 20px;
  font-weight: bold;
  opacity: 0.9;
}
.RangeSlider__view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: absolute;
  top: 20px;
  text-align: center;
  font-weight: bold;
  width: 100%;
  text-decoration: underline;
  cursor: pointer;
  color: #37264F;
}

.NuggetRangeSlider__tooltip {
  background-color: #ECF1FA;
  padding: 0;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5254901961);
}
.NuggetRangeSlider__tooltip .rc-tooltip-arrow {
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.1529411765)) !important;
  right: 4% !important;
}
.NuggetRangeSlider__tooltip .rc-tooltip-placement-topRight {
  right: 4% !important;
}
.NuggetRangeSlider__tooltip .rc-tooltip-inner {
  width: 504px;
}
.NuggetRangeSlider__tooltip .rc-tooltip-inner .arrow-content-tooltip .react-tooltip-lite {
  box-sizing: border-box;
  border: 1px solid gray;
  border-radius: 8px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
}
.NuggetRangeSlider__container {
  position: relative;
}
.NuggetRangeSlider__overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #ECF1FA;
  opacity: 0.9;
  z-index: 1000000;
}
.NuggetRangeSlider__text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
  color: #FF7041;
  font-size: 20px;
  font-weight: bold;
  opacity: 0.9;
}
.NuggetRangeSlider__view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: absolute;
  top: 20px;
  text-align: center;
  font-weight: bold;
  width: 100%;
  text-decoration: underline;
  cursor: pointer;
  color: #37264F;
}

.UsernamePasswordModal .modal-backdrop {
  background-color: black;
  opacity: 80%;
}
.UsernamePasswordModal .modal-backdrop.in {
  opacity: 0.8;
}
.UsernamePasswordModal .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: visible;
  margin-top: 0px !important;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .UsernamePasswordModal {
    margin-top: 0px !important;
  }
}
@media (max-width: 991px) {
  .UsernamePasswordModal {
    display: flex;
    justify-content: center;
    margin: 0;
  }
}
.UsernamePasswordModal .modal-title {
  color: rgb(65, 0, 100);
  font-size: 22px;
  font-weight: bold;
}
@media (max-width: 992px) {
  .UsernamePasswordModal .modal-title {
    font-size: 15px;
  }
}
.UsernamePasswordModal .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.UsernamePasswordModal .modal-header h4 {
  color: #37274F;
}
.UsernamePasswordModal .modal-header button {
  right: 12px;
  top: 7px;
  position: absolute;
}
.UsernamePasswordModal .modal-body {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0;
  width: 60%;
  margin: 0 auto;
}
@supports (-ms-ime-align: auto) {
  .UsernamePasswordModal .modal-body {
    justify-content: space-around;
  }
}
@media (max-width: 992px) {
  .UsernamePasswordModal .modal-body {
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }
}
.UsernamePasswordModal .modal-body .Coppa {
  margin: 0 50px 0 50px;
}
.UsernamePasswordModal .modal-body .Coppa p {
  margin-bottom: 0;
}
.UsernamePasswordModal .modal-body button {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1.4em;
  color: #37274F;
  width: 10em;
  height: 50px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  border: 0;
}
.UsernamePasswordModal .modal-body button:focus {
  outline: none;
}
.UsernamePasswordModal .modal-body button.selected {
  background-color: #37274F;
  color: white;
}
.UsernamePasswordModal .modal-body .TeacherForm__dropdown {
  width: 83%;
  margin-bottom: 0;
}
.UsernamePasswordModal .modal-body .Coppa {
  margin-top: -25px;
}
.UsernamePasswordModal__title {
  font-size: 22px;
}
.UsernamePasswordModal__message {
  color: #37274F;
  font-size: 16px;
  text-align: center;
  width: 375px;
}
.UsernamePasswordModal .modal-content {
  width: 730px !important;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .UsernamePasswordModal .modal-content {
    height: 100% !important;
    width: 330px !important;
  }
}
.UsernamePasswordModal .modal-image {
  height: 343px;
  margin-right: 20px;
}
@media (max-width: 992px) {
  .UsernamePasswordModal .modal-image {
    margin: 0 auto !important;
  }
}
.UsernamePasswordModal .authContainer {
  display: flex;
  justify-content: center;
  margin-right: -90px;
}
@media (max-width: 992px) {
  .UsernamePasswordModal .authContainer {
    flex-direction: column-reverse;
    align-items: center;
    margin: 0 !important;
  }
}
.UsernamePasswordModal .movieIcon {
  height: 100px;
  cursor: pointer;
  margin-top: -40px;
  margin-left: 10px;
}
@media (max-width: 992px) {
  .UsernamePasswordModal .movieIcon {
    margin-left: 65px;
  }
}

.TablePagination {
  display: flex;
  justify-content: flex-end;
}
.TablePagination ul {
  display: flex;
}
.TablePagination ul li:first-child {
  padding-right: 10px;
}
.TablePagination ul li:first-child a {
  padding-right: 10px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-radius: 8px;
}
.TablePagination ul li:nth-of-type(2) a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.TablePagination ul li:last-child {
  padding-left: 10px;
}
.TablePagination ul li:last-child a {
  padding-left: 10px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-radius: 8px;
}
.TablePagination ul li:nth-last-of-type(2) a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.TablePagination ul li:active {
  border-bottom: none;
}
.TablePagination ul li a {
  border: none;
  font-size: 20px;
  color: #37274F;
}
.TablePagination a {
  background: #FFFFFF;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 0px rgba(0, 0, 0, 0.05);
  height: 45px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.TablePagination a i {
  font-size: 20px;
  font-weight: 700;
  color: #37274F;
}
.TablePagination__page--first {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.TablePagination__page--last {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.TablePagination .selected {
  background-color: #F9FAFC;
  font-weight: 700;
  cursor: not-allowed;
}
.TablePagination .disabled {
  cursor: not-allowed;
}

.SelectTable__menu {
  padding: 0px 15px 15px 15px;
  display: inline-flex;
}
.SelectTable__menu input {
  margin: 0 15px 0 5px;
}
.SelectTable__menu input:focus {
  outline: 0;
}
.SelectTable__selectAll {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 2px solid #442F54;
  box-sizing: border-box;
  border-radius: 8px;
  width: 23px;
  height: 23px;
  cursor: pointer;
}
.SelectTable__selectAll:checked {
  background-color: #442F54;
  box-shadow: inset 0 0 0 2px white;
  border: 2px solid #442F54;
}

.ToggleAction {
  display: flex;
  align-items: center;
}
.ToggleAction i {
  vertical-align: middle;
  font-size: 18px;
}

.AvatarList {
  display: inline-flex;
}
.AvatarList .avatar {
  vertical-align: middle;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid white;
  margin-right: -19px;
  overflow: hidden;
}
.AvatarList .avatar img {
  width: 150%;
  height: auto;
  object-fit: fill;
  object-position: -10px -5px;
}
.AvatarList--last {
  background-color: #37274F;
  display: flex;
  justify-content: center;
  align-items: center;
}
.AvatarList--last div {
  color: white;
}

.dropdown {
  display: inline-block;
  cursor: pointer;
}
.dropdown .dropdown-menu {
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: unset;
}
.dropdown .dropdown-menu ul {
  padding: 5px 5px 5px 15px;
  margin: 0;
  max-height: 264px;
  overflow-y: auto;
}
.dropdown .dropdown-menu li {
  padding: 15px 25px 15px 0;
  font-weight: 700;
  font-size: 20px;
  color: #37274F;
  cursor: pointer;
  border-bottom: 1px solid #ECEFF7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
}
.dropdown .dropdown-menu li:last-child {
  border-bottom: none;
}
@media (max-width: 769px) {
  .dropdown .dropdown-menu li {
    font-size: 14px;
  }
}
.dropdown .dropdown-menu li a {
  color: #37274F;
}
.dropdown .dropdown-menu__button {
  display: inline-flex;
}
.dropdown .dropdown-menu--teacher {
  display: block;
}

.NoRecordIndicator {
  display: flex;
  align-items: center;
  background: #ECF1FA;
  border: 1px solid #D2D5DC;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 40px 20px;
}
@media (max-width: 769px) {
  .NoRecordIndicator {
    padding: 20px 15px;
  }
}
.NoRecordIndicator__avatar {
  margin-right: 30px;
}
.NoRecordIndicator__avatar img {
  width: 90px;
}
@media (max-width: 769px) {
  .NoRecordIndicator__avatar img {
    width: 70px;
  }
}
.NoRecordIndicator__message {
  color: #37274F;
  font-size: 24px;
  font-weight: 600;
}
@media (max-width: 769px) {
  .NoRecordIndicator__message {
    font-size: 1em;
  }
}

.AutoSuggestionInput {
  position: relative;
}
.AutoSuggestionInput .react-autosuggest__suggestions-container--open {
  position: absolute;
  max-height: 400px;
  overflow-y: auto;
  z-index: 2;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  width: 100%;
}
.AutoSuggestionInput .react-autosuggest__suggestions-list {
  padding: 20px 15px 5px 15px;
  margin: 0;
}
.AutoSuggestionInput .react-autosuggest__suggestions-list li {
  color: #37274F;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.AutoSuggestionInput .react-autosuggest__suggestions-list li:not(:last-of-type) {
  margin-bottom: 15px;
  border-bottom: 1px solid #DDE2ED;
  padding-bottom: 15px;
}
.AutoSuggestionInput .react-autosuggest__input {
  width: 100%;
  min-height: 64px;
  padding: 0 15px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #DBE0EA;
  color: #37274F;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
}
.AutoSuggestionInput .react-autosuggest__input::placeholder {
  color: #442F54;
  opacity: 0.7;
}

.AutoSuggestionInput__dropdown {
  position: relative;
}
.AutoSuggestionInput__dropdown input {
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.AutoSuggestionInput__dropdown:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -9px;
  right: 20px;
  content: "\f107";
  color: #37274F;
  font-size: 2rem;
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
}

.AutoSuggestionInput__text {
  position: relative;
}
.AutoSuggestionInput__text input {
  box-shadow: inset 0px 2px 2px rgba(45, 45, 45, 0.13);
}
.AutoSuggestionInput__text.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.AutoSuggestionInput__noSuggestion {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background-color: white;
  padding: 25px 10px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.TeacherDashboard {
  padding-top: 60px;
  padding-bottom: 60px;
}
.TeacherDashboard__heading {
  margin-bottom: 25px;
}
.TeacherDashboard__title {
  display: inline-block;
  font-size: 1.33em;
  color: #37274F;
  margin-right: 15px;
  margin-bottom: 0;
}
.TeacherDashboard__link {
  font-size: 0.93em;
  color: #37274F;
  text-decoration: underline;
  cursor: pointer;
}
.TeacherDashboard__link--light {
  color: white;
}
.TeacherDashboard__classes--basic {
  position: relative;
}
@media (max-width: 992px) {
  .TeacherDashboard__classes--basic {
    margin: 50px 0;
  }
}
.TeacherDashboard__classes--basic a {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  background-color: white;
  border: 1px solid rgba(255, 112, 65, 0.2);
  border-radius: 8px;
  padding: 20px 25px;
  font-size: 0.93em;
  font-weight: 600;
}
.TeacherDashboard__classes--basic a:hover {
  text-decoration: none;
}
.TeacherDashboard__classes--basic a span {
  padding-right: 60px;
  border-right: 1px solid rgba(255, 112, 65, 0.2);
}
@media (max-width: 992px) {
  .TeacherDashboard__classes--basic a span {
    padding-right: 20px;
  }
}
.TeacherDashboard__classes--basic a div {
  padding-left: 30px;
}
.TeacherDashboard__classes--basic a div i {
  margin-left: 15px;
}
.TeacherDashboard__classes--basic img {
  width: 100%;
  height: auto;
  padding-top: 40px;
}
.TeacherDashboard__classes .TeacherDashboard__heading {
  margin-bottom: 50px;
}
.TeacherDashboard .UserSettings--teacher {
  margin-bottom: 95px;
  color: #37274F;
}
@media (max-width: 992px) {
  .TeacherDashboard .UserSettings--teacher {
    margin-bottom: 30px;
  }
}
@media (max-width: 769px) {
  .TeacherDashboard .UserSettings--teacher {
    display: none;
  }
}
.TeacherDashboard .UserSettings--teacher:hover {
  text-decoration: none;
}
.TeacherDashboard .UserSettings--teacher .ContentBlock__title::after {
  content: "\f061";
  font-family: "Font Awesome 5 Pro";
  border: 0;
  margin: unset;
  width: unset;
  height: unsets;
  position: absolutes;
}
.TeacherDashboard .rt-tr {
  cursor: pointer;
}
.TeacherDashboard .ClassesTable__avatar {
  padding-left: 0 !important;
  justify-content: center;
}
@media (max-width: 769px) {
  .TeacherDashboard__mobileProfile::after {
    content: "";
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("https://assets.senorwooly.com/static/images/mobile_dashboard_bg.svg");
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin-top: -60px;
  }
  .TeacherDashboard__statsPro {
    justify-content: space-between;
    font-weight: 600;
    margin: 0 -15px 20px -15px;
    padding: 10px;
    background-color: #2C1C43;
    color: white;
  }
  .TeacherDashboard .ClassesTable__header {
    font-size: 12px;
  }
  .TeacherDashboard .ClassesTable__label {
    font-size: 14px !important;
  }
  .TeacherDashboard .ClassesTable__avatar .avatar {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
  .TeacherDashboard .Stats .row {
    flex-wrap: wrap;
  }
  .TeacherDashboard .Stats__stat {
    margin-bottom: 35px;
  }
  .TeacherDashboard .DoubleChevronDown {
    margin-top: 10px;
  }
  .TeacherDashboard .DoubleChevronDown .fal {
    margin-top: -10px;
  }
}

.TeacherProfile {
  display: flex;
  margin-bottom: 30px;
}
@media (max-width: 1559px) and (max-width: 1559px) {
  .TeacherProfile {
    flex-direction: column;
  }
}
.TeacherProfile .flex {
  width: 100%;
}
.TeacherProfile img {
  height: auto;
  width: 100%;
  max-width: 165px;
  margin-right: 15px;
  margin-bottom: -5px;
  align-self: flex-start;
}
.TeacherProfile__name {
  margin-top: 30px;
  color: #37274F;
  margin-bottom: 10px;
}
.TeacherProfile__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.TeacherProfile h6 {
  font-weight: 400;
  color: #37274F;
  font-size: 0.93rem;
  margin-bottom: 5px;
}
.TeacherProfile__school {
  font-weight: 600;
  color: #37274F;
  font-size: 0.85em;
  margin-bottom: 12px;
}
.TeacherProfile__plan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  height: 36px;
  max-width: 175px;
}
@media (min-width: 992px) {
  .TeacherProfile__plan {
    min-width: 160px;
  }
}
.TeacherProfile__plan--pro {
  border: 1px solid #FF7041;
  height: 50px;
}
.TeacherProfile__plan--pro .TeacherProfile__plan__name {
  background-color: #FD5B24;
  color: white;
}
.TeacherProfile__plan--pro .TeacherProfile__plan__name span {
  font-weight: 600;
}
.TeacherProfile__plan--basic {
  border: 1px solid #37274F;
}
.TeacherProfile__plan--basic .TeacherProfile__plan__name {
  background-color: #37274F;
  color: white;
  border-right: 1px solid #37274F;
}
.TeacherProfile__plan--basic .TeacherProfile__plan__status {
  color: #37274F;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.TeacherProfile__plan--basic .TeacherProfile__plan__status i {
  margin-left: 4px;
}
.TeacherProfile__plan__name {
  padding: 2px 10px;
  margin-bottom: 0;
  text-transform: capitalize;
  border-right: 1px solid #FF7041;
  text-transform: uppercase;
  font-size: 0.9rem;
  height: 100%;
  display: flex;
  align-items: center;
}
.TeacherProfile__plan__status {
  font-size: 0.65em;
  margin-bottom: 0;
  color: #FD5B24;
  width: 100%;
  text-align: center;
}
@media (max-width: 991px) {
  .TeacherProfile__plan__status {
    font-size: 0.85em;
  }
}
@media (min-width: 1440px) {
  .TeacherProfile__plan__status {
    font-size: 0.75em;
  }
}
.TeacherProfile__plan__status span {
  font-weight: 600;
}
.TeacherProfile__link {
  height: 100%;
  display: inline-flex;
  align-items: center;
  height: 44px;
  border-radius: 5px;
  background-color: #523d6f;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}
.TeacherProfile__link:hover {
  text-decoration: none;
}
@media (max-width: 992px) {
  .TeacherProfile__link {
    display: none;
  }
}
.TeacherProfile__link span {
  padding: 20px;
  color: white;
  font-weight: 600;
}
.TeacherProfile__link img {
  height: 100%;
  width: auto;
}
@media (max-width: 769px) {
  .TeacherProfile__name {
    font-size: 24px;
    margin-top: 0;
    color: white;
  }
  .TeacherProfile__school {
    color: white;
  }
  .TeacherProfile__content {
    height: 100%;
  }
  .TeacherProfile img {
    width: 100%;
  }
  .TeacherProfile__accountSettings {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    margin-bottom: 5px;
  }
  .TeacherProfile__accountSettings .far {
    margin-left: 5px;
  }
  .TeacherProfile__plan {
    height: 36px !important;
    margin-top: 5px;
  }
  .TeacherProfile__plan__name {
    font-size: 10px;
  }
  .TeacherProfile__plan__status {
    padding: 0 5px;
    font-size: 9px;
  }
}

.QuickMenu {
  position: absolute;
  top: 75px;
  right: 135px;
  display: flex;
}
@media (max-width: 992px) {
  .QuickMenu {
    position: relative;
    top: -35px;
    right: 45px;
  }
}
@media (max-width: 769px) {
  .QuickMenu {
    right: 35px;
    top: 110px !important;
  }
}
.QuickMenu__container {
  position: absolute;
  left: 0;
  right: 0;
}
.QuickMenu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 70px;
  color: white;
  font-weight: 600;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  font-size: 10px;
  border-radius: 50%;
  cursor: pointer;
}
.QuickMenu__item i {
  font-size: 20px;
  margin-bottom: 2px;
  color: white;
}
.QuickMenu__item:not(:last-of-type) {
  margin-right: 10px;
}
.QuickMenu__item--stories {
  background-color: #3541A8;
}
.QuickMenu__item--messages {
  background-color: #442F54;
}
.QuickMenu__item--assignments {
  background-color: #FD5B24;
}
.QuickMenu__item--classes {
  background-color: #FFC700;
}
.QuickMenu__toggle {
  -webkit-appearance: none;
  background-color: #FD5B24;
  color: white;
  border: 0;
  border-radius: 6px;
  box-shadow: 0px 2px 0px #411B0E;
  height: 44px;
  padding: 0 13px;
  margin-right: 10px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 1200px) {
  .QuickMenu__toggle {
    max-height: 39px;
  }
}
@media (max-width: 750px) {
  .QuickMenu__toggle {
    display: none;
  }
}
.QuickMenu__wrapper {
  z-index: 10002;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.Flyout {
  z-index: 10002;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 530px;
  height: 100vh;
  background-color: white;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}
@media (max-width: 992px) {
  .Flyout {
    width: 100vw;
  }
}
.Flyout__header {
  display: flex;
  align-items: flex-start;
  background-color: white;
  border-bottom: 1px solid #E8EEF9;
  padding: 30px;
}
.Flyout__header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  font-size: 22px;
  margin-right: 30px;
  color: white;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}
.Flyout__header__title__container {
  position: relative;
}
.Flyout__header__title {
  margin-bottom: 0;
  color: #37274F;
  font-size: 2em;
}
.Flyout__header__subtitle {
  font-weight: 400;
  color: white;
  opacity: 0.5;
  font-size: 0.93rem;
  margin-top: 7px;
}
.Flyout__header__close {
  justify-self: flex-end;
  flex-grow: 1;
  text-align: right;
  font-size: 25px;
  color: #B7B7B7;
  cursor: pointer;
  margin-top: 5px;
}
.Flyout__body {
  background-color: #f8fafe;
  height: 100%;
  padding: 30px;
  flex-grow: 1;
  overflow-y: auto;
}
@media (max-width: 992px) {
  .Flyout__body {
    padding-bottom: 120px;
  }
}
.Flyout__background {
  z-index: 10002;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #37274F;
}

.StudentInformation {
  font-size: 1em;
  color: #37274F;
  margin-bottom: 60px;
}

.Coppa {
  background-color: #ECF1FA;
  padding: 20px 15px;
  color: #37274F;
  border-radius: 8px;
  border: 1px solid #37274F;
  margin-bottom: 40px;
}
.Coppa h4 {
  color: #37274F;
  font-size: 15px;
}
.Coppa p {
  font-size: 12px;
}
.Coppa__message {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-weight: 400;
  color: #37274F;
  cursor: pointer;
  font-size: 12px;
}
.Coppa__message .styledChecker {
  width: 23px;
  height: 23px;
  border: 2px solid #37274F;
  border-radius: 8px;
  margin-right: 10px;
  background-color: white;
}
.Coppa__message .styledChecker.checked {
  background-color: #37274F;
  border: 1px solid white;
  box-shadow: 0 0 0 2px #37274F;
}

.AssignmentEstimate {
  background-color: #ECF1FA;
  border: 1px solid #D2D5DC;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 40px;
}
.AssignmentEstimate p {
  color: #37274F;
  margin-bottom: 0;
}
.AssignmentEstimate p:first-of-type {
  font-weight: 400;
  font-size: 12px;
}
.AssignmentEstimate p:last-of-type {
  font-weight: 600;
  font-size: 16px;
}
.AssignmentEstimate .TeacherForm__error {
  margin-bottom: 0;
}

.MessageField {
  padding: 40px 30px 0 30px;
  background-color: white;
  border-radius: 8px;
  color: #37274F;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}
.MessageField input {
  margin-bottom: 30px;
  font-size: 1.55rem;
  font-weight: 400;
  border: 0;
  line-height: 1.625rem;
  max-width: 100%;
}
.MessageField input:focus {
  outline: 0;
}
.MessageField input::placeholder {
  color: rgba(68, 47, 84, 0.7);
}
.MessageField textarea {
  width: 100%;
  min-height: 194px;
  resize: none;
  color: #37274F;
  font-size: 1rem;
  border: 0;
  line-height: 1.625rem;
}
.MessageField textarea:focus {
  outline: 0;
}
.MessageField textarea::placeholder {
  color: rgba(68, 47, 84, 0.7);
}

.StoryFlyout__story {
  width: 100%;
  padding: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  border-radius: 8px;
  cursor: pointer;
}
.StoryFlyout__story > div {
  display: flex;
  align-items: center;
}
.StoryFlyout__story img {
  width: 125px;
  height: 51px;
  object-fit: cover;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.19);
  border-radius: 6px;
  flex-shrink: 0;
}
.StoryFlyout__story span {
  display: inline-block;
  margin-left: 1.2em;
  color: #37274F;
  font-weight: 600;
  font-size: 18px;
}
.StoryFlyout__story i {
  font-size: 1.2em;
  color: #37274F;
  margin-left: 20px;
}
.StoryFlyout__story i.fa-lock-alt {
  margin-right: 4px;
}
.StoryFlyout__story--unlocked {
  color: #71ae71 !important;
}
.StoryFlyout__story--unlocked span, .StoryFlyout__story--unlocked i {
  color: #71ae71;
}
.StoryFlyout__story__messages {
  position: fixed;
  bottom: -30px;
  width: 100%;
  right: 0;
  left: 0;
  padding: 30px;
}
.StoryFlyout__story__message {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 15px;
  background-color: #37274F;
  color: white;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}
.StoryFlyout__story__message i {
  cursor: pointer;
}

.AssignmentFlyout__message {
  font-size: 16px;
  color: #37274F;
  margin-bottom: 30px;
}
.AssignmentFlyout__options {
  margin-bottom: 50px;
}
.AssignmentFlyout__confirm__cancel {
  min-width: 175px;
  min-height: 60px;
}
.AssignmentFlyout__confirm__submit {
  float: unset;
  width: 100%;
}
@media (max-width: 991px) {
  .AssignmentFlyout__confirm {
    display: flex;
    flex-direction: column-reverse;
  }
  .AssignmentFlyout__confirm__submit {
    margin-bottom: 20px;
  }
}

.MessageFlyout__actions {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}
.MessageFlyout__actions__inbox {
  font-weight: 600;
  color: #37274F;
  cursor: pointer;
}
.MessageFlyout__actions__inbox:hover {
  text-decoration: none;
  color: #37274F;
}

.ClassesOverview--basic img {
  width: 100%;
  height: auto;
}
.ClassesOverview__header {
  display: flex;
  align-items: center;
  padding: 60px 0 26px 0;
  margin-bottom: 26px;
  border-bottom: 1px solid #ECEFF7;
}
@media (max-width: 991px) {
  .ClassesOverview__header {
    border-bottom: none;
    padding-top: 0;
  }
}
.ClassesOverview h2 {
  color: #37274F;
}
.ClassesOverview span {
  font-size: 1.5em;
  color: #37274F;
}
@media (max-width: 991px) {
  .ClassesOverview .ClassesActions__button {
    width: 37px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 991px) {
  .ClassesOverview .ClassesOverview__settings--mobile {
    left: unset !important;
    min-width: unset;
    padding-right: 1rem !important;
  }
  .ClassesOverview .ClassesOverview__settings--mobile ul {
    padding: 0 0 0 0.7rem;
  }
}
.ClassesOverview__action {
  padding-right: 0;
}
.ClassesOverview__action button {
  max-height: 52px;
}
.ClassesOverview__action .ClassesActions__button {
  width: 62px;
}
.ClassesOverview__action .ClassDetail__button--edit {
  right: 0;
  left: unset;
  margin-top: 12px;
}
.ClassesOverview__action .ClassDetail__button--edit a:hover {
  text-decoration: none;
}
.ClassesOverview__button {
  width: 174px;
  font-size: 1em;
  font-weight: 700;
  color: #2d2d2d;
  border: 0;
}
.ClassesOverview__button:focus {
  outline: none;
}
.ClassesOverview__button .fa-plus {
  margin-right: 8px;
}
.ClassesOverview .ToggleAction ul {
  display: inline-flex;
  padding: 0;
  margin: 0;
}
.ClassesOverview .ToggleAction li {
  padding: 0 15px 0 15px;
  border-bottom: none;
}
.ClassesOverview .ToggleAction a {
  color: #37274F;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.ClassesOverview .SelectTable__menu__prof .fal {
  margin-left: 10px;
}
.ClassesOverview .SelectTable__menu__prof-action ul {
  display: block;
  padding-left: 15px;
}
.ClassesOverview .SelectTable__menu__prof-action .dropdown-menu {
  margin-top: 15px;
}
.ClassesOverview .Stats {
  margin-bottom: 60px;
}
.ClassesOverview .Stats .row {
  display: flex;
}
@media (max-width: 991px) {
  .ClassesOverview .Stats__header {
    margin-bottom: 15px;
  }
  .ClassesOverview .Stats {
    margin-bottom: 15px;
  }
  .ClassesOverview .Stats .row {
    overflow-x: scroll;
    padding-top: 50px;
    padding-bottom: 15px;
  }
  .ClassesOverview .SelectTable {
    font-size: 0.8rem;
    padding: 0 15px;
  }
  .ClassesOverview .SelectTable__menu {
    padding-left: 10px;
  }
  .ClassesOverview .ReactTable.Table .rt-tr-group {
    padding: 11px 10px;
  }
  .ClassesOverview .ReactTable.Table .rt-tr .rt-td:first-of-type {
    margin-right: 5px;
  }
  .ClassesOverview .ReactTable.Table .rt-thead.-header .rt-th:first-of-type {
    margin-right: 5px;
  }
  .ClassesOverview .ReactTable.Table .rt-thead.-header {
    padding: 0 10px;
  }
}
.ClassesOverview .ClassesOverviewHeader {
  color: #37274F;
}
.ClassesOverview .ClassesOverviewHeader__container {
  display: flex;
  align-items: center;
  font-size: 25px;
  cursor: pointer;
}
.ClassesOverview .ClassesOverviewHeader__title {
  font-size: 40px;
}
.ClassesOverview .ClassesOverviewHeader__subMessage {
  font-size: 25px;
}
.ClassesOverview .ClassesOverviewHeader .fa-angle-down {
  padding-left: 10px;
}
.ClassesOverview .ClassesOverviewHeader .dropdown-menu {
  margin-top: 15px;
}
.ClassesOverview .ClassesCellLevel__container {
  display: flex;
  align-items: center;
}
.ClassesOverview .ClassesCellLevel .fa-angle-down {
  padding-left: 10px;
}
.ClassesOverview .ClassesCellLevel .dropdown-menu {
  margin-top: 15px;
}
.ClassesOverview .ReactTable .rt-table {
  overflow: visible !important;
}
.ClassesOverview .ReactTable .rt-tbody {
  overflow: auto !important;
  max-height: 50vh;
}
.ClassesOverview .ReactTable .rt-tbody .rt-tr-group {
  border: none;
  position: relative;
  overflow: visible;
}
.ClassesOverview .ReactTable.Table .rt-thead.-header .rt-th {
  overflow: visible;
}
.ClassesOverview .ConfirmationModal .left-option {
  background-color: #37274F !important;
  color: white !important;
}

.ClassesOverviewMobile__classTitle {
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
}
.ClassesOverviewMobile__classTitle .fal {
  margin-left: 5px;
}

.ClassAuthentication {
  padding-bottom: 4rem;
}
.ClassAuthentication__actions {
  display: flex;
}
.ClassAuthentication__actions .ClassDetailEditor__button {
  margin-left: 0;
}
@media (max-width: 991px) {
  .ClassAuthentication__actions .ClassDetailEditor__button {
    width: 122px;
  }
}
.ClassAuthentication__warning {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.33rem;
  background-color: #ECF1FA;
  color: #FD5B24;
  font-weight: 600;
  font-size: 0.93rem;
  padding: 1rem 1.3rem;
  border: 1px solid #D2D5DC;
  border-radius: 8px;
  height: 54px;
}
@media (max-width: 992px) {
  .ClassAuthentication__warning {
    font-size: 0.65rem;
    padding: 0.5rem;
    margin-right: 10px;
  }
}
.ClassAuthentication .StudentDetail__back {
  margin: 2rem 0;
}
@media (max-width: 992px) {
  .ClassAuthentication .StudentDetail__back {
    display: block;
  }
}
.ClassAuthentication .ClassDetailHeader__classTitle {
  color: #37274F;
  cursor: auto;
  margin-bottom: 0;
}
.ClassAuthentication .ClassDetailHeader {
  margin-top: 0;
}
@media (max-width: 769px) {
  .ClassAuthentication .ClassDetailHeader {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 25px;
  }
  .ClassAuthentication .ClassDetailHeader .ClassDetailHeader__classTitle {
    margin-bottom: 1.5rem;
  }
}
.ClassAuthentication .TeacherForm__dropdown {
  margin-bottom: 50px;
}

.ClassDetail__container {
  padding-right: 30px;
}
@media (max-width: 769px) {
  .ClassDetail__container {
    padding-right: 15px;
  }
}
.ClassDetail .ToggleAction ul {
  display: inline-flex;
  padding: 0;
  margin: 0;
}
.ClassDetail .ToggleAction li {
  padding: 0 15px 0 15px;
  border-bottom: none;
}
.ClassDetail .ToggleAction a {
  color: #37274F;
  text-decoration: none;
  cursor: pointer;
}
.ClassDetail__button {
  width: 155px;
  font-size: 1em;
  font-weight: 700;
  color: #37274F;
  margin-left: 10px;
  height: 64px;
  border-width: 0;
}
.ClassDetail__button--iconOnly {
  width: 70px;
  background-color: #f8fafe;
}
.ClassDetail__button--twoIcon {
  background-color: #f8fafe;
  margin-left: 0 !important;
}
.ClassDetail__button--oneIcon {
  width: 180px;
  background-color: #f8fafe;
}
.ClassDetail__button:focus {
  outline: none;
}
.ClassDetail .divider {
  border: 1px solid #ECEFF7;
  display: inline-block;
  height: 24px;
}
.ClassDetail .ContentBlock {
  margin-bottom: 0;
}
.ClassDetail .Google {
  display: flex;
  align-items: center;
  width: 162px;
  cursor: pointer;
}
.ClassDetail .Google__center {
  margin-left: 10px;
}
.ClassDetail .Google__class {
  font-size: 12px;
  text-align: start;
}
.ClassDetail .Google__sync {
  color: #73677B;
  font-size: 10px;
  white-space: nowrap;
}
.ClassDetail .Google .divider {
  margin: 20px 10px;
}
.ClassDetail .Google .fal {
  padding-left: 0;
  font-size: 18px;
}
.ClassDetail .dropdown ul {
  margin: 0;
}
.ClassDetail .dropdown li {
  padding: 10px 10px 10px 0;
  font-weight: 700;
  color: #37274F;
  border-bottom: 1px solid #ECEFF7;
}
.ClassDetail .dropdown li:last-child {
  border-bottom: none;
}
.ClassDetail .ActivityFeed {
  margin-bottom: 30px;
}
@media (min-width: 769px) and (max-width: 991px) {
  .ClassDetail .ActivityFeed {
    padding-right: 30px;
  }
}
@media (max-width: 769px) {
  .ClassDetail .ActivityFeed {
    display: flex;
    width: 100vw;
    padding-top: 0;
    padding-bottom: 12px;
    margin-bottom: 18px;
    overflow-x: scroll;
  }
  .ClassDetail .ActivityFeed .Stats {
    padding-bottom: 2px;
  }
  .ClassDetail .ActivityFeed .Stats__header {
    margin-top: 0;
    margin-bottom: 32px;
    transform: translateY(-4px);
  }
  .ClassDetail .ActivityFeed .Stats__header__title {
    transform: translateX(-12px);
  }
  .ClassDetail .ActivityFeed .Stats > .row,
  .ClassDetail .ActivityFeed .Stats > .row > div,
  .ClassDetail .ActivityFeed .RecentFeed,
  .ClassDetail .ActivityFeed .RecentActivity {
    width: max-content;
  }
  .ClassDetail .ActivityFeed .Stats__stat {
    z-index: -1;
  }
  .ClassDetail .ActivityFeed .RecentFeed,
  .ClassDetail .ActivityFeed .RecentActivity {
    height: auto !important;
  }
  .ClassDetail .ActivityFeed .RecentActivity__header {
    margin-bottom: 10px;
  }
  .ClassDetail .ActivityFeed .RecentActivity__activity {
    width: 280px;
  }
}
.ClassDetail .ActivityFeed .StatsFeed {
  height: 235px;
}
@media (min-width: 769px) and (max-width: 991px) {
  .ClassDetail .ActivityFeed .StatsFeed {
    height: unset;
  }
}
@media (max-width: 769px) {
  .ClassDetail .ActivityFeed .StatsFeed {
    height: unset;
  }
}
.ClassDetail .ActivityFeed .RecentFeed {
  height: 235px;
}
.ClassDetail .RecentActivity {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ClassDetail .RecentActivity__content {
  margin-bottom: 3px;
  display: flex;
}
.ClassDetail__assignment {
  padding-right: 0;
  position: unset;
}
@media (min-width: 769px) and (max-width: 991px) {
  .ClassDetail__assignment {
    padding-right: 15px;
  }
}
@media (max-width: 991px) {
  .ClassDetail__assignment {
    padding: 0;
    margin-top: -40px;
  }
}
.ClassDetail--mobile {
  margin-bottom: 30px;
}
.ClassDetail--mobile img {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}
.ClassDetail--mobile .Header {
  display: flex;
  align-items: center;
  padding: 20px 0;
  min-height: 85px;
}
.ClassDetail--mobile .Class {
  display: flex;
  align-items: center;
}
.ClassDetail--mobile .Class i {
  color: white;
}
.ClassDetail--mobile .Class .fa-chevron-left {
  font-size: 1rem;
  padding-right: 10px;
}
.ClassDetail--mobile .Google {
  color: white;
  font-weight: 700;
  margin-left: -10px;
}
.ClassDetail--mobile .Google__center {
  margin-left: 5px;
}
.ClassDetail--mobile .Google__sync {
  color: white;
  font-weight: 700;
}
.ClassDetail--mobile .Cell__filter {
  color: white;
  margin-left: -35px;
}
.ClassDetail--mobile .dropdown-backdrop {
  background-color: black;
  opacity: 0.5;
}
.ClassDetail--mobile .dropdown-menu {
  position: fixed;
  left: 50%;
  top: 35%;
  transform: translateX(-50%);
}
.ClassDetail .TabActions {
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid gray;
  margin-bottom: 30px;
  font-size: 16px;
}
.ClassDetail .TabActions a {
  font-weight: 700;
  color: gray;
  padding-bottom: 15px;
  margin-bottom: -16px;
}
.ClassDetail .TabActions a.active {
  color: #FD5B24;
  border-bottom: 2px solid #FD5B24;
}
.ClassDetail .TabActions a:hover {
  text-decoration: none;
}
.ClassDetail .TabActions a:focus {
  text-decoration: none;
}
.ClassDetail .ResponsiveHeader {
  margin-bottom: 30px;
}
.ClassDetail .ResponsiveHeader__container {
  display: flex;
  align-items: center;
}
.ClassDetail .ResponsiveHeader__leftComponent .dropdown {
  width: 100%;
}
.ClassDetail .ResponsiveHeader__leftComponent .dropdown-menu {
  margin-top: 15px;
}
.ClassDetail .ResponsiveHeader__leftComponent .dropdown-menu__button {
  width: 100%;
}
.ClassDetail .ResponsiveHeader__rightComponent .Google {
  color: white;
  background-color: transparent;
  justify-content: flex-end;
  padding: 15px 0;
}
.ClassDetail .ResponsiveHeader__rightComponent .Google__sync {
  color: white;
}
.ClassDetail .ResponsiveHeader__rightComponent .Google .divider {
  display: none;
}
.ClassDetail .ResponsiveHeader__rightComponent .Google .fal {
  margin-left: 5px;
}
.ClassDetail .ResponsiveHeader .ClassesActions__button {
  background-color: unset;
  color: white;
  padding: 0;
}
.ClassDetail .ResponsiveHeader .ClassDetailActions__button {
  background-color: unset;
  color: white;
  padding: 0;
}
.ClassDetail .ResponsiveHeader .FilterStudents {
  color: white;
  font-weight: 700;
}
.ClassDetail .ResponsiveHeader .FilterStudents .fa-angle-down {
  padding-left: 5px;
}
@media (min-width: 769px) and (max-width: 991px) {
  .ClassDetail .Assignments {
    padding: 0 15px;
  }
  .ClassDetail .Assignments__filter {
    padding: 15px 15px;
  }
}

.ClassDetailHeader {
  display: flex;
  margin: 60px 0 30px 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #D4DAE7;
  padding-bottom: 30px;
}
.ClassDetailHeader__class {
  color: #37274F;
  display: flex;
  flex-direction: column;
}
.ClassDetailHeader__class .dropdown-menu__button {
  width: 100%;
}
.ClassDetailHeader__classTitle {
  font-size: 40px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
}
@media (max-width: 992px) {
  .ClassDetailHeader__classTitle {
    color: white;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ClassDetailHeader__classTitle .fal {
    padding-left: 5px;
  }
}
.ClassDetailHeader__classTitle__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ClassDetailHeader__classLevel {
  font-size: 25px;
}
.ClassDetailHeader__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.ClassDetailHeader .fal {
  padding-left: 10px;
}
.ClassDetailHeader .dropdown-menu {
  margin-top: 15px;
}
.ClassDetailHeader .dropdown-menu a {
  text-decoration: none;
}
.ClassDetailHeader .ClassDetailActions__download {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ClassDetailHeader .ClassDetailActions__button {
  margin: 10px 0 10px 10px;
}
.ClassDetailHeader .ClassDetailActions__button.active button {
  background-color: #FD5B24;
  color: white;
}
.ClassDetailHeader .ClassDetailActions__button:hover {
  color: #37274F;
}
.ClassDetailHeader .ReactLink {
  width: 100%;
}

.ClassDetail__button--edit {
  position: absolute;
  right: 0;
  min-width: 270px;
  left: -75px;
}
@media (max-width: 1211px) {
  .ClassDetail__button--edit {
    left: -110px;
  }
}
@media (min-width: 1211px) and (max-width: 1300px) {
  .ClassDetail__button--edit {
    left: -200px;
  }
}
.ClassDetail__button--edit ul {
  max-height: unset !important;
  overflow-y: unset !important;
}

.ClassDetailEditor {
  min-height: 88vh;
}
.ClassDetailEditor__header {
  margin-bottom: 26px;
  border-bottom: 1px solid #ECEFF7;
  display: flex;
  align-items: center;
}
.ClassDetailEditor__header__title {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  cursor: pointer;
}
.ClassDetailEditor__header__title h2 {
  color: #37274F;
  margin: 0 10px 0 0;
  padding: 0 4px;
  width: 100%;
  font-size: 1.8rem;
}
.ClassDetailEditor__header__title h2:focus {
  outline: none;
}
.ClassDetailEditor__header__title h4 {
  color: #37274F;
  font-weight: 200;
  margin: 0 10px 0 0;
}
.ClassDetailEditor__header__title i {
  color: #37274F;
  font-size: 32px;
  font-weight: 200;
}
.ClassDetailEditor__header__title.editing {
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
}
.ClassDetailEditor__header__title.editing p {
  margin-bottom: 0;
  padding: 4px;
  color: #2d2d2d;
}
.ClassDetailEditor__header__actions {
  margin-bottom: 40px;
}
.ClassDetailEditor__header__actions .dropdown-menu {
  margin-top: 15px;
}
.ClassDetailEditor__button {
  font-size: 1em;
  font-weight: 700;
  color: #37274F;
  margin-left: 10px;
  height: 52px;
  border-width: 0;
  width: 142px;
}
.ClassDetailEditor__button:focus {
  outline: none;
}
.ClassDetailEditor__button.active {
  background-color: #FD5B24;
  box-shadow: 0 2px 0 0 #c4532e;
  color: white;
}
.ClassDetailEditor__message {
  margin-right: 40px;
}
.ClassDetailEditor .dropdown-menu {
  margin-top: 15px;
}
.ClassDetailEditor .EditCell {
  display: block !important;
  width: 100% !important;
  height: unset !important;
  border: none !important;
}
.ClassDetailEditor .divider {
  border: 1px solid #ECEFF7;
  transform: rotate(90deg);
  display: inline-block;
  width: 24px;
  margin-left: 10px;
}
.ClassDetailEditor .ContentBlock {
  margin-bottom: 0;
}
.ClassDetailEditor .dropdown ul {
  padding: 0 0 0 10px;
  margin: 0;
}
.ClassDetailEditor .dropdown ul li {
  padding: 10px 10px 10px 0;
  font-size: 1.3em;
  font-weight: 700;
  color: #37274F;
  cursor: pointer;
  border-bottom: 1px solid #ECEFF7;
  min-width: 250px;
}
.ClassDetailEditor .dropdown ul li:last-child {
  border-bottom: none;
}
.ClassDetailEditor .ReactTable.Table .rt-tr-group {
  background: none;
  box-shadow: none;
}
.ClassDetailEditor .ReactTable.Table .rt-tr-group .rt-td input {
  display: none;
}
.ClassDetailEditor .ReactTable.Table .rt-tbody {
  overflow: visible;
}
.ClassDetailEditor .ReactTable.Table .rt-tbody .rt-tr-group {
  border-bottom: 0;
  overflow: visible;
}
.ClassDetailEditor .ReactTable.Table .editing {
  padding: 10px;
}
.ClassDetailEditor .ReactTable.Table .editing div:focus {
  outline: none;
}
.ClassDetailEditor .ReactTable.Table .editing--rightMargin {
  margin-right: 10px;
}
.ClassDetailEditor .SelectTable__selectAll {
  display: none;
}
.ClassDetailEditor .Table .colLevel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ClassDetailEditor .Table .colLevel .fal {
  padding-left: 10px;
}
.ClassDetailEditor .editing {
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 10px;
}
.ClassDetailEditor .editing:focus {
  outline: none;
}
.ClassDetailEditor .EditingClass__name {
  color: #37274F;
  margin: 0 10px 0 0;
  padding: 0 4px;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
}
.ClassDetailEditor .EditingClass__placeHolderName {
  font-size: 12px;
}
.ClassDetailEditor input {
  border: none;
}
.ClassDetailEditor input:focus {
  outline: none;
}

.RecentActivity {
  height: 100%;
}
.RecentActivity__header {
  margin-bottom: 25px;
}
.RecentActivity__content {
  margin: 0px -15px;
}
.RecentActivity__content .ContentBlock {
  min-height: 125px;
  height: 100%;
  padding: 10px;
}
.RecentActivity__type {
  background: #71ae71;
  border-radius: 4px;
  color: white;
  padding: 4px 12px;
  font-size: 0.7em;
  margin-bottom: 10px;
  padding: 4px 8px;
}
.RecentActivity__message {
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.RecentActivity__message p {
  color: #37274F;
  font-size: 1em;
  margin-bottom: 0;
}
.RecentActivity__image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin-right: 15px;
}
.RecentActivity__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 2px;
}
.RecentActivity__studentList {
  display: flex;
}
.RecentActivity__studentList .AvatarList {
  margin-right: 30px;
}
.RecentActivity__studentList p {
  margin-bottom: 0;
  align-self: center;
}
.RecentActivity i {
  color: #37274F;
  cursor: pointer;
}
@media (min-width: 769px) and (max-width: 991px) {
  .RecentActivity__activity {
    margin-bottom: 30px;
  }
}

.spinning {
  -webkit-animation: rotate 1s linear infinite;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.SetProficiencyModal .modal-backdrop {
  background-color: black;
  opacity: 80%;
}
.SetProficiencyModal .modal-backdrop.in {
  opacity: 0.8;
}
.SetProficiencyModal .modal-dialog {
  width: 600px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: visible;
}
@media (max-width: 769px) {
  .SetProficiencyModal .modal-dialog {
    width: 90vw !important;
    margin: 0;
  }
}
.SetProficiencyModal .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
@media (max-width: 769px) {
  .SetProficiencyModal .modal-header {
    height: 8vh;
    border-bottom: none;
  }
}
.SetProficiencyModal .modal-header h4 {
  color: #37274F;
}
@media (max-width: 769px) {
  .SetProficiencyModal .modal-header h4 {
    font-size: 1rem;
  }
}
.SetProficiencyModal .modal-header button {
  right: 12px;
  top: 5px;
  position: absolute;
}
.SetProficiencyModal .modal-body {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
@supports (-ms-ime-align: auto) {
  .SetProficiencyModal .modal-body {
    justify-content: space-around;
  }
}
@media (max-width: 769px) {
  .SetProficiencyModal .modal-body {
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    background-color: #f8fafe;
  }
}
.SetProficiencyModal .modal-body .btn-level {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1.3em;
  color: #37274F;
  border-radius: 6px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 10px 20px;
  margin-bottom: 20px;
  width: 100%;
}
.SetProficiencyModal .modal-body .btn-level:hover {
  background-color: #37274F;
  color: white;
}
@media (max-width: 769px) {
  .SetProficiencyModal .modal-body .btn-level {
    font-size: 1rem;
    margin: 5px 0;
    width: 50vw;
    align-self: center;
  }
  .SetProficiencyModal .modal-body .btn-level:hover {
    background-color: #37274F;
    color: white;
  }
}

.TeacherForm__title {
  font-size: 2.6em;
  color: #37274F;
  margin-top: 40px;
  margin-bottom: 60px;
}
.TeacherForm h3 {
  font-size: 1.2em;
  color: #37274F;
  margin-bottom: 24px;
}
.TeacherForm h3.paddingTop {
  padding-top: 20px;
}
.TeacherForm__error {
  color: #ff4141;
  margin-bottom: 15px;
}
.TeacherForm__message {
  background-color: #ECF1FA;
  padding: 22px;
  color: #37274F;
  border-radius: 8px;
  border: 1px solid #D2D5DC;
  margin-bottom: 40px;
}
.TeacherForm__message h3 {
  margin-bottom: 6px;
}
.TeacherForm__message p {
  margin-bottom: 15px;
}
.TeacherForm__message p:last-child {
  margin-bottom: 0;
}
.TeacherForm__listFilter {
  color: #37274F;
}
.TeacherForm__listFilter span {
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
}
.TeacherForm__listFilter span.active {
  font-weight: bold;
}
.TeacherForm__listFilter span:not(:last-of-type) {
  margin-right: 15px;
}
.TeacherForm__input {
  position: relative;
  margin-bottom: 30px;
  font-size: 1.06em;
  font-weight: 600;
  color: #37274F;
}
.TeacherForm__input label {
  transition: 250ms;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  opacity: 0.7;
  cursor: text;
}
.TeacherForm__input input {
  height: 64px;
  width: 100%;
  padding: 17px 15px 0 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: inset 0px 2px 2px rgba(45, 45, 45, 0.13);
  border: 1px solid #DBE0EA;
  -webkit-text-fill-color: #37274F;
  opacity: 1;
}
.TeacherForm__input input:focus ~ label, .TeacherForm__input input.hasValue ~ label {
  top: 10px;
  transform: translateY(0);
  font-size: 12px;
  font-weight: 400;
}
.TeacherForm__input.has-error input {
  border: 1px solid #ff4141;
}
.TeacherForm__select {
  position: relative;
}
.TeacherForm__select:after {
  content: "\f078";
  color: inherit;
  font-size: inherit;
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}
.TeacherForm__select select {
  -webkit-appearance: none;
  appearance: none;
  height: 64px;
  width: 100%;
  padding: 0 15px 0 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: inset 0px 2px 2px rgba(45, 45, 45, 0.13);
  border: 1px solid #DBE0EA;
  -webkit-text-fill-color: #37274F;
  opacity: 1;
  font-weight: 600;
}
.TeacherForm__select.has-error select {
  border: 1px solid #ff4141;
}
.TeacherForm__textarea textarea {
  width: 100%;
  padding: 17px 15px 0 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: inset 0px 2px 2px rgba(45, 45, 45, 0.13);
  border: 1px solid #DBE0EA;
  height: 197px;
  margin-bottom: 15px;
  resize: none;
  color: #37274F;
}
.TeacherForm__radio {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  background-color: white;
}
.TeacherForm__radio label {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  font-weight: 400;
  color: #37274F;
}
.TeacherForm__radio label .styledChecker {
  width: 23px;
  min-width: 23px;
  height: 23px;
  border: 2px solid #37274F;
  border-radius: 8px;
  margin-right: 10px;
}
.TeacherForm__radio label i {
  margin-left: auto;
}
.TeacherForm__radio input {
  display: none;
}
.TeacherForm__radio input:checked ~ label .styledChecker {
  background-color: #37274F;
  border: 1px solid white;
  box-shadow: 0 0 0 2px #37274F;
}
.TeacherForm__dropdown {
  position: relative;
  margin-bottom: 40px;
}
.TeacherForm__dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  width: 100%;
  padding: 0 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05), 0px 2px 0px rgba(45, 45, 45, 0.15);
  margin-bottom: 20px;
  color: #37274F;
  cursor: pointer;
}
.TeacherForm__dropdown__header i {
  transition: 250ms;
  font-size: 15px;
}
.TeacherForm__dropdown__header i.isOpen {
  transform: rotate(180deg);
}
.TeacherForm__dropdown label {
  transition: 250ms;
  position: absolute;
  top: 11px;
  left: 15px;
  transform: translateY(0);
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}
.TeacherForm__dropdown label i {
  display: inline-block;
  margin-left: 7px;
  font-weight: 300;
  cursor: pointer;
  font-size: 95%;
}
.TeacherForm__dropdown label.empty {
  position: unset;
  font-size: 1.2em;
  margin-bottom: 0;
}
.TeacherForm__dropdown span {
  display: block;
  font-size: 1.06em;
  font-weight: 600;
  margin-top: 16px;
}
.TeacherForm__dropdown__names {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 0;
}
.TeacherForm__dropdown__names span {
  margin-right: 10px;
}
.TeacherForm__dropdown .TeacherForm__dropdown__options {
  display: none;
  position: absolute;
  width: 100%;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  margin: 0;
  padding: 0;
  z-index: 2;
  max-height: 264px;
  overflow-y: auto;
}
.TeacherForm__dropdown .TeacherForm__dropdown__options li {
  color: #37274F;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  margin-left: 25px;
  padding: 15.5px 0;
}
.TeacherForm__dropdown .TeacherForm__dropdown__options li:focus, .TeacherForm__dropdown .TeacherForm__dropdown__options li:active {
  border-bottom: 0;
}
.TeacherForm__dropdown .TeacherForm__dropdown__options li.active:before {
  content: "";
  width: 7px;
  background-color: #FD5B24;
  position: absolute;
  height: 100%;
  left: -25px;
  top: 0;
  bottom: 0;
}
.TeacherForm__dropdown .TeacherForm__dropdown__options li:not(:last-of-type) {
  border-bottom: 1px solid #DDE2ED;
}
.TeacherForm__dropdown .TeacherForm__dropdown__options li.disabled {
  cursor: default !important;
  color: lightgray !important;
}
.TeacherForm__dropdown .TeacherForm__dropdown__options.isVisible {
  display: block;
}
.TeacherForm__dropdown .TeacherForm__dropdown__multiselect {
  display: none;
  position: absolute;
  width: 100%;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  z-index: 2;
  max-height: 350px;
  overflow-y: auto;
}
.TeacherForm__dropdown .TeacherForm__dropdown__multiselect.isVisible {
  display: block;
}
.TeacherForm__dropdown .TeacherForm__dropdown__multiselect span {
  color: rgba(68, 47, 84, 0.8);
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.TeacherForm__dropdown .TeacherForm__dropdown__multiselect span:after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background-color: #746666;
}
.TeacherForm__dropdown .TeacherForm__dropdown__multiselect ul {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.TeacherForm__dropdown .TeacherForm__dropdown__multiselect ul li {
  color: white;
  background-color: #37274F;
  opacity: 0.65;
  font-size: 1em;
  padding: 10px 20px;
  margin-right: 15px;
  margin-bottom: 15px;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid #270046;
  border-radius: 8px;
}
.TeacherForm__dropdown .TeacherForm__dropdown__multiselect ul li:active {
  border-bottom: 0;
}
.TeacherForm__dropdown .TeacherForm__dropdown__multiselect ul li.selected {
  opacity: 1;
}
.TeacherForm__dropdown .TeacherForm__dropdown__multiselect ul li.selectAll {
  background-color: rgb(255, 112, 65);
  border: 1px solid #FF7041;
}
.TeacherForm__submit {
  transition: 250ms;
  font-size: 1em;
  padding: 13px 25px;
  background-color: #37274F;
  color: white;
  font-weight: 600;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border: 0;
  float: right;
  min-width: 175px;
  min-height: 60px;
}
.TeacherForm__submit:focus {
  outline: none;
}
.TeacherForm__submit--dark {
  background-color: #37274F;
  color: white;
  box-shadow: 0px 2px 0px #241835;
}
.TeacherForm__submit--dark:hover {
  filter: brightness(85%);
}
.TeacherForm__submit--light {
  background-color: white;
  color: #37274F;
}
.TeacherForm__submit--light:hover {
  background-color: #37274F;
  color: white;
}
.TeacherForm__submit--small {
  width: 145px;
  min-width: unset;
  min-height: unset;
  margin-top: -4px;
}
.TeacherForm__submit__message {
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  color: #37274F;
  font-weight: 600;
  cursor: pointer;
}
.TeacherForm__submit--password {
  float: unset;
  color: white;
  width: unset;
  padding: 20px 60px;
}
.TeacherForm__submit--left {
  float: left;
}
.TeacherForm__submit--link {
  display: flex;
  justify-content: center;
  align-items: center;
}
.TeacherForm__submit--link:hover {
  background-color: #37274F;
  color: white;
  text-decoration: none;
}
.TeacherForm__button {
  transition: 250ms;
  font-size: 15px;
  font-weight: 600;
  padding: 10px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  width: 100%;
  border: 0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}
.TeacherForm__button--dark {
  background-color: #37274F;
  color: white;
}
.TeacherForm__button--light {
  background-color: white;
  color: #37274F;
}
.TeacherForm__button--danger {
  color: white;
  background-color: #ff4141;
  width: unset;
}
.TeacherForm__button:hover {
  background-color: #37274F;
  color: white;
}

.ActivationCode {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 15px 15px 15px;
  margin-top: 40px;
  margin-bottom: 40px;
  color: #37274F;
  border-bottom: 1px solid #E8EEF9;
}
.ActivationCode label {
  position: absolute;
  top: 10px;
  left: 15px;
  transform: translateY(0);
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}
.ActivationCode label input {
  display: block;
  font-size: 2em;
  font-weight: 600;
  margin-top: 25px;
  background: none;
  border: 0;
  user-select: none;
}
.ActivationCode label input:focus, .ActivationCode label input:active {
  outline: none;
}
.ActivationCode label i {
  margin-top: 20px;
  font-size: 1.33em;
  cursor: pointer;
  color: #5A6C8F;
}
.ActivationCode label i:not(:last-of-type) {
  margin-right: 10px;
}

.react-datepicker__input-container input,
.react-datepicker__input-container .TeacherForm__Calendar__inputs {
  height: 40px;
  border-radius: 6px;
  border: 0;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  width: 204px;
  cursor: pointer;
  padding: 15px;
  font-size: 0.93em;
  background-color: white;
}
.react-datepicker__input-container .TeacherForm__Calendar__inputs {
  display: flex;
  padding: 0 15px;
  width: 100%;
  align-items: center;
}
.react-datepicker__input-container:after {
  content: "\f078";
  color: inherit;
  font-size: inherit;
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}

.react-datepicker.TeacherForm__Calendar {
  width: 100%;
  font-family: "azo-sans-web", sans-serif;
  color: #37274F;
  border: 1px solid #DBE0EA;
  border-radius: 8px;
  margin-bottom: 40px;
  padding: 1px;
}
@media (min-width: 470px) {
  .react-datepicker.TeacherForm__Calendar {
    min-width: 420px;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__triangle {
    display: none;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__navigation {
    top: 28px;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__navigation--previous {
    border-right: 2px solid rgba(0, 0, 0, 0.54);
    border-bottom: 2px solid rgba(0, 0, 0, 0.54);
    border-left: 0;
    border-top: 0;
    width: 10px;
    height: 10px;
    transform: rotate(-225deg);
    left: 28px;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__navigation--next {
    right: 120px;
    border-right: 2px solid rgba(0, 0, 0, 0.54);
    border-bottom: 2px solid rgba(0, 0, 0, 0.54);
    border-left: 0;
    border-top: 0;
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__header {
    background-color: white;
    border-bottom: 0;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__current-month {
    padding: 15px 0;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container {
    width: 80%;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__current-month,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker-time__header,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker-year-header {
    color: #37274F;
    font-weight: 400;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day-name,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__time-name {
    color: #37274F;
    margin: 0;
    width: 14.2857142857%;
    padding: 12px;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day-name:hover,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day:hover,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__time-name:hover {
    border-radius: 50%;
  }
}
@media (min-width: 470px) and (max-width: 992px) {
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day-name:hover,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day:hover,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__time-name:hover {
    border-radius: 3px;
  }
}
@media (min-width: 470px) {
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day-name.react-datepicker__day--disabled,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day.react-datepicker__day--disabled,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__time-name.react-datepicker__day--disabled {
    color: #d9d9d9;
    border-radius: 50%;
  }
}
@media (min-width: 470px) and (max-width: 992px) {
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day-name.react-datepicker__day--disabled,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day.react-datepicker__day--disabled,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__time-name.react-datepicker__day--disabled {
    border-radius: 3px;
  }
}
@media (min-width: 470px) {
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day-name.react-datepicker__day--selected,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day.react-datepicker__day--selected,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__time-name.react-datepicker__day--selected {
    color: white;
    background-color: #37274F;
    border-radius: 3px;
    font-weight: 400 !important;
    border-radius: 50%;
  }
}
@media (min-width: 470px) and (max-width: 992px) {
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day-name.react-datepicker__day--selected,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day.react-datepicker__day--selected,
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__time-name.react-datepicker__day--selected {
    border-radius: 3px;
  }
}
@media (min-width: 470px) {
  .react-datepicker.TeacherForm__Calendar .react-datepicker__month-container .react-datepicker__day-name {
    color: rgba(0, 0, 0, 0.6);
    padding-bottom: 0;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__time-container {
    position: relative;
    width: 20%;
    border-left: 1px solid #DBE0EA;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__time-container:before {
    content: "";
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 0px;
    background: linear-gradient(white, transparent 60px);
    z-index: 1;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__time-container .react-datepicker__header--time {
    display: none;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__time-container .react-datepicker__time-box {
    margin: unset;
    width: unset;
  }
  .react-datepicker.TeacherForm__Calendar .react-datepicker__time-container .react-datepicker__time-list-item {
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 470px) and (max-width: 991px) {
  .react-datepicker.TeacherForm__Calendar .react-datepicker__time-container .react-datepicker__time-list-item {
    font-size: 10px;
  }
}
@media (min-width: 470px) {
  .react-datepicker.TeacherForm__Calendar .react-datepicker__time-container .react-datepicker__time-list-item--selected {
    background-color: #37274F !important;
    font-weight: 400 !important;
  }
}

.SpanSelect .SpanSelect__Datepicker {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8fafe;
}
.SpanSelect .SpanSelect__Datepicker .button__group {
  display: flex;
  margin-left: auto;
}
@media (max-width: 991px) {
  .SpanSelect .SpanSelect__Datepicker .button__group {
    margin-top: 5px;
  }
}
.SpanSelect .SpanSelect__Datepicker button.filter {
  transition: 200ms;
  color: white;
  font-weight: 600;
  background-color: #37274F;
  box-shadow: 0px 2px 0px #241835;
  border-radius: 6px;
  border: 0;
  appearance: none;
  font-size: 16px;
  padding: 10px 27px;
  margin-bottom: 20px;
  margin-right: 20px;
}
.SpanSelect .SpanSelect__Datepicker button.filter:hover {
  filter: brightness(90%);
}
@media (max-width: 991px) {
  .SpanSelect .SpanSelect__Datepicker button.filter {
    font-size: 0.85rem;
  }
}
.SpanSelect .TeacherForm__Calendar {
  display: flex;
  justify-content: center;
  border: 0;
  border-radius: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-bottom: 0;
  font-size: 16px;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__navigation--next,
.SpanSelect .TeacherForm__Calendar .react-datepicker__navigation--previous {
  border-right: 2px solid #37274F;
  border-bottom: 2px solid #37274F;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__navigation--next {
  right: 60px;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__navigation--previous {
  left: 60px;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day {
  padding: 10px !important;
}
@media (max-width: 991px) {
  .SpanSelect .TeacherForm__Calendar .react-datepicker__day {
    padding: 5px !important;
  }
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day-name {
  font-size: 12px;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--outside-month {
  visibility: hidden;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__week {
  margin-bottom: 10px;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--in-range {
  border-radius: 0 !important;
  background-color: #DBE0E9 !important;
  border-bottom: 2px solid #C6CDDA !important;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--in-range:hover {
  filter: brightness(90%);
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--in-selecting-range {
  border-radius: 0;
  background-color: #DBE0E9;
  border-bottom: 2px solid #C6CDDA;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--range-start,
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--range-end {
  background-color: #442F54 !important;
  color: white !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #2E1D3A !important;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--selecting-range-end,
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--selecting-range-start {
  background-color: #442F54 !important;
  color: white !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #2E1D3A !important;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--range-start,
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--selecting-range-start {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--range-start:hover,
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--selecting-range-start:hover {
  border-radius: 0 !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--range-end,
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--selecting-range-end {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--range-end:hover,
.SpanSelect .TeacherForm__Calendar .react-datepicker__day--selecting-range-end:hover {
  border-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.SpanSelect .TeacherForm__Calendar.hasRange .react-datepicker__day--selecting-range-end,
.SpanSelect .TeacherForm__Calendar.hasRange .react-datepicker__day--selecting-range-start {
  border-radius: 50% !important;
  border-radius: 0;
  background-color: #f0f0f0 !important;
  border-bottom: 0 !important;
  color: #37274F !important;
}
.SpanSelect .TeacherForm__Calendar.hasRange .react-datepicker__day--selecting-range-end .react-datepicker__day--in-selecting-range,
.SpanSelect .TeacherForm__Calendar.hasRange .react-datepicker__day--selecting-range-start .react-datepicker__day--in-selecting-range {
  background-color: transparent;
  border-bottom: 0;
}
.SpanSelect .TeacherForm__Calendar,
.SpanSelect .react-datepicker__header {
  background-color: #f8fafe !important;
}
.SpanSelect .dropdown-menu {
  padding: 0 !important;
}
.SpanSelect .dropdown-menu ul {
  display: flex;
  padding: 0 !important;
}
.SpanSelect .dropdown-menu ul li {
  border-bottom: 0;
  padding: 15px 10px 10px 10px !important;
  border-bottom: 5px solid transparent;
  font-size: 14px;
}
@media (max-width: 991px) {
  .SpanSelect .dropdown-menu ul li {
    padding: 6px !important;
    font-size: 12px;
    border-bottom: 2px solid transparent;
  }
}
.SpanSelect .dropdown-menu ul li:first-of-type {
  padding-left: 20px !important;
}
@media (max-width: 991px) {
  .SpanSelect .dropdown-menu ul li:first-of-type {
    padding-left: 12px !important;
  }
}
.SpanSelect .dropdown-menu ul li:last-of-type {
  padding-right: 20px !important;
  border-bottom: 5px solid transparent;
}
@media (max-width: 991px) {
  .SpanSelect .dropdown-menu ul li:last-of-type {
    padding-right: 12px !important;
    border-bottom: 2px solid transparent;
  }
}
.SpanSelect .dropdown-menu ul li.selected {
  border-bottom: 5px solid #FD5B24;
}
@media (max-width: 991px) {
  .SpanSelect .dropdown-menu ul li.selected {
    border-bottom: 2px solid #FD5B24;
  }
}

.TeacherForm__student__submit {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .TeacherForm__student__submit {
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
  }
  .TeacherForm__student__submit span {
    margin-bottom: 0;
    margin-right: 30px;
  }
}

.teacherRegister {
  padding: 4rem 0 8rem 0;
}
@media (min-width: 992px) {
  .teacherRegister {
    padding: 6rem 0 12rem 0;
  }
}
.teacherRegister img {
  width: 100%;
  max-width: 320px;
  border-radius: 6px;
}
@media (max-width: 992px) {
  .teacherRegister img {
    display: block;
    margin: 0 auto 2rem auto;
  }
}
.teacherRegister h2 {
  color: #FD5B24;
  font-size: 2rem;
}
.teacherRegister hr {
  color: #DBDFEA;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .teacherRegister hr {
    margin-bottom: 3.33rem;
  }
}
.teacherRegister fieldset {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.teacherRegister fieldset legend {
  padding-bottom: 0;
  margin-bottom: 1.5rem;
  color: #410064;
  border-bottom: 0;
  font-size: 1.33rem;
}
.teacherRegister fieldset > div {
  margin-bottom: 1.5rem;
}
.teacherRegister fieldset:first-of-type > div {
  width: 100%;
}
@media (min-width: 992px) {
  .teacherRegister fieldset:first-of-type > div {
    width: calc(50% - 0.75rem);
  }
}
@media (min-width: 992px) {
  .teacherRegister fieldset:first-of-type > div:nth-of-type(odd) {
    margin-right: 1.5rem;
  }
}
.teacherRegister fieldset:last-of-type > div {
  width: 100%;
}
.teacherRegister fieldset:nth-of-type(2) > div {
  width: 100%;
}
@media (min-width: 992px) {
  .teacherRegister fieldset:nth-of-type(2) > div {
    width: calc(50% - 0.75rem);
    margin-right: 1.5rem;
  }
}
.teacherRegister fieldset:nth-of-type(2) > div:nth-of-type(even) {
  margin-right: 0;
}
.teacherRegister fieldset .twitter-typeahead {
  height: unset;
}
.teacherRegister fieldset .twitter-typeahead #signupSchool {
  padding-top: 0;
}
.teacherRegister fieldset .twitter-typeahead #signupSchool.isEmpty {
  opacity: 0.7;
}
.teacherRegister fieldset .twitter-typeahead .tt-menu {
  width: 100%;
  background-color: white;
  border: 1px solid #DBDFEA;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  max-height: 200px;
  overflow: scroll;
}
.teacherRegister fieldset .twitter-typeahead .tt-searching {
  display: block;
  padding: 0.5rem 1.5rem;
}
.teacherRegister fieldset .twitter-typeahead .tt-suggestion {
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid #DBDFEA;
  cursor: pointer;
}
.teacherRegister fieldset .twitter-typeahead .tt-suggestion:hover {
  color: #37274F;
}
.teacherRegister fieldset .twitter-typeahead .tt-suggestion:hover .school-suggestion-details {
  color: #37274F;
}
.teacherRegister fieldset .twitter-typeahead .tt-suggestion .tt-highlight {
  color: #FD5B24;
}
.teacherRegister fieldset .twitter-typeahead .tt-suggestion .school-suggestion-details {
  font-weight: 400;
}
.teacherRegister__plans img {
  display: block;
  margin: 0 auto;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .teacherRegister__plans img {
    margin-bottom: 3.33rem;
  }
}
.teacherRegister__plans .signup__button {
  position: relative;
  background-color: white;
  white-space: inherit;
}
.teacherRegister__footer {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .teacherRegister__footer {
    flex-direction: row;
    justify-content: space-between;
  }
}
.teacherRegister__footer label {
  font-weight: 400;
  color: #37274F;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .teacherRegister__footer label {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
  }
}
.teacherRegister__footer label:first-of-type {
  margin-top: 10px;
}
.teacherRegister__footer label input {
  margin-right: 10px;
  margin-top: 0;
}
.teacherRegister__footer button {
  min-width: 265px;
}

.addSchoolMarkt__country {
  font-weight: bold;
}
.addSchoolMarkt__country span {
  color: #FD5B24;
}

.newbar {
  display: inline-flex;
  justify-content: space-between;
  background-color: #FD5B24;
  padding: 12px 17px 7px 17px;
  color: white;
  box-shadow: 0 2px 0 0 #c4532e;
  border-radius: 6px;
  margin-bottom: 20px;
}
.newbar span:first-of-type {
  position: relative;
  font-weight: 600;
  padding-right: 10px;
  margin-right: 8px;
}
.newbar span:first-of-type:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 1px;
  background-color: white;
  opacity: 0.65;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.newbar span:last-of-type {
  font-weight: 600;
}
.newbar button {
  appearance: none;
  margin-left: 25px;
  background-color: transparent;
  border: 0;
  outline: 0;
}

.ChangePrivacySettingsModal .modal-backdrop {
  background-color: black;
  opacity: 80%;
}
.ChangePrivacySettingsModal .modal-backdrop.in {
  opacity: 0.8;
}
.ChangePrivacySettingsModal .modal-dialog {
  width: 600px !important;
  max-width: 100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: visible;
}
@media (max-width: 991px) {
  .ChangePrivacySettingsModal .modal-dialog {
    margin: 0;
    padding: 10px;
  }
}
.ChangePrivacySettingsModal .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.ChangePrivacySettingsModal .modal-header h4 {
  color: #37274F;
}
.ChangePrivacySettingsModal .modal-header button {
  right: 12px;
  top: 7px;
  position: absolute;
}
.ChangePrivacySettingsModal .modal-body {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  margin: 30px 0;
}
@supports (-ms-ime-align: auto) {
  .ChangePrivacySettingsModal .modal-body {
    justify-content: space-around;
  }
}
.ChangePrivacySettingsModal .modal-body .Coppa {
  margin: 0 50px 0 50px;
}
.ChangePrivacySettingsModal .modal-body .Coppa p {
  margin-bottom: 0;
}
.ChangePrivacySettingsModal .modal-body button {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1.4em;
  color: #37274F;
  width: 10em;
  height: 50px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  border: 0;
}
.ChangePrivacySettingsModal .modal-body button:focus {
  outline: none;
}
.ChangePrivacySettingsModal .modal-body button.selected {
  background-color: #37274F;
  color: white;
}
.ChangePrivacySettingsModal .modal-body .TeacherForm__dropdown {
  width: 83%;
  margin-bottom: 0;
}
.ChangePrivacySettingsModal .modal-body .Coppa {
  margin-top: -25px;
}
.ChangePrivacySettingsModal__title {
  font-size: 22px;
}
.ChangePrivacySettingsModal__message {
  color: #37274F;
  font-size: 16px;
  text-align: center;
  width: 375px;
}

.InstructionalVideoModal .modal-backdrop {
  background-color: black;
  opacity: 80%;
}
.InstructionalVideoModal .modal-backdrop.in {
  opacity: 0.8;
}
.InstructionalVideoModal .modal-dialog {
  width: 600px !important;
  max-width: 100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: visible;
}
@media (max-width: 991px) {
  .InstructionalVideoModal .modal-dialog {
    margin: 0;
    padding: 10px;
  }
}
.InstructionalVideoModal .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.InstructionalVideoModal .modal-header h4 {
  color: #37274F;
}
.InstructionalVideoModal .modal-header button {
  right: 12px;
  top: 7px;
  position: absolute;
}
.InstructionalVideoModal .modal-body {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  margin: 30px 0;
}
@supports (-ms-ime-align: auto) {
  .InstructionalVideoModal .modal-body {
    justify-content: space-around;
  }
}
.InstructionalVideoModal .modal-body .Coppa {
  margin: 0 50px 0 50px;
}
.InstructionalVideoModal .modal-body .Coppa p {
  margin-bottom: 0;
}
.InstructionalVideoModal .modal-body button {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1.4em;
  color: #37274F;
  width: 10em;
  height: 50px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  border: 0;
}
.InstructionalVideoModal .modal-body button:focus {
  outline: none;
}
.InstructionalVideoModal .modal-body button.selected {
  background-color: #37274F;
  color: white;
}
.InstructionalVideoModal .modal-body .TeacherForm__dropdown {
  width: 83%;
  margin-bottom: 0;
}
.InstructionalVideoModal .modal-body .Coppa {
  margin-top: -25px;
}
.InstructionalVideoModal__title {
  font-size: 22px;
}
.InstructionalVideoModal__message {
  color: #37274F;
  font-size: 16px;
  text-align: center;
  width: 375px;
}

.video-modal {
  z-index: 13000;
}

.FlyoutToolTip {
  background-color: #6A10A3;
  top: 290px !important;
  color: #37274F;
  width: 100px !important;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.FlyoutToolTip .rc-tooltip-inner {
  background-color: #6A10A3;
  color: #fff;
  padding: 4px !important;
}
.FlyoutToolTip .rc-tooltip-arrow {
  border-top-color: #6A10A3;
  border-bottom-color: #6A10A3;
  left: 22%;
  bottom: -17px;
  margin-left: -10px;
  border-width: 31px 6px 0;
  transform: rotate(20deg);
}
.FlyoutToolTip .rc-tooltip-inner {
  text-align: center;
  font-weight: bold;
}

.AuthenticationFlyoutToolTip {
  background-color: #6A10A3;
  color: #37274F;
  width: 100px !important;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.AuthenticationFlyoutToolTip .rc-tooltip-inner {
  background-color: #6A10A3;
  color: #fff;
  padding: 4px !important;
}
.AuthenticationFlyoutToolTip .rc-tooltip-arrow {
  border-top-color: #6A10A3;
  border-bottom-color: #6A10A3;
  left: 22%;
  bottom: -17px;
  top: 36px;
  margin-left: -10px;
  border-width: 31px 6px 0;
  transform: rotate(20deg);
}
.AuthenticationFlyoutToolTip .rc-tooltip-inner {
  text-align: center;
  font-weight: bold;
}

.ConversionModal .modal-backdrop {
  background-color: black;
  opacity: 80%;
}
.ConversionModal .modal-backdrop.in {
  opacity: 0.8;
}
.ConversionModal .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: visible;
}
@media (max-width: 992px) {
  .ConversionModal .modal-dialog {
    top: 68% !important;
  }
}
@media (max-width: 991px) {
  .ConversionModal .modal-dialog {
    margin: 0;
    padding: 10px;
  }
}
.ConversionModal .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.ConversionModal .modal-header h4 {
  color: #37274F;
}
.ConversionModal .modal-header button {
  right: 12px;
  top: 7px;
  position: absolute;
}
.ConversionModal .modal-body {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0;
}
@supports (-ms-ime-align: auto) {
  .ConversionModal .modal-body {
    justify-content: space-around;
  }
}
@media (max-width: 992px) {
  .ConversionModal .modal-body {
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }
}
.ConversionModal .modal-body .Coppa {
  margin: 0 50px 0 50px;
}
.ConversionModal .modal-body .Coppa p {
  margin-bottom: 0;
}
.ConversionModal .modal-body button {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1.4em;
  color: #37274F;
  width: 10em;
  height: 50px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  border: 0;
}
.ConversionModal .modal-body button:focus {
  outline: none;
}
.ConversionModal .modal-body button.selected {
  background-color: #37274F;
  color: white;
}
.ConversionModal .modal-body .TeacherForm__dropdown {
  width: 83%;
  margin-bottom: 0;
}
.ConversionModal .modal-body .Coppa {
  margin-top: -25px;
}
.ConversionModal__title {
  font-size: 22px;
}
.ConversionModal__message {
  color: #37274F;
  font-size: 16px;
  text-align: center;
  width: 375px;
}
.ConversionModal .modal-content {
  width: 840px !important;
  height: 490px !important;
}
@media (max-width: 992px) {
  .ConversionModal .modal-content {
    height: 100% !important;
    width: 330px !important;
  }
}
.ConversionModal .modal-image {
  height: 343px;
  margin-right: 20px;
}
@media (max-width: 992px) {
  .ConversionModal .modal-image {
    margin: 0 auto !important;
  }
}
.ConversionModal .authContainer {
  display: flex;
  justify-content: center;
  margin-right: -90px;
}
@media (max-width: 992px) {
  .ConversionModal .authContainer {
    flex-direction: column-reverse;
    align-items: center;
    margin: 0 !important;
  }
}
.ConversionModal .movieIcon {
  height: 100px;
  cursor: pointer;
  margin-top: -40px;
  margin-left: 10px;
}
@media (max-width: 992px) {
  .ConversionModal .movieIcon {
    margin-left: 65px;
  }
}

.StudentDetail {
  margin-top: 20px;
}
.StudentDetail h1 {
  font-size: 1.6em;
  color: #37274F;
  margin-bottom: 15px;
}
.StudentDetail h1 i {
  margin-left: 12px;
}
@media (max-width: 992px) {
  .StudentDetail {
    margin-top: 0;
  }
  .StudentDetail .StudentInfo {
    margin: 0 -15px;
  }
  .StudentDetail .StudentInfo__block > h3,
  .StudentDetail .StudentInfo__block > p {
    display: none;
  }
}
.StudentDetail__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
@media (max-width: 992px) {
  .StudentDetail__header {
    display: none;
  }
}
.StudentDetail__header__below {
  margin-bottom: 40px;
}
.StudentDetail__header__below .dropdown-menu {
  right: 0;
}
.StudentDetail .StudentInfo__mobileLinks {
  display: flex;
  justify-content: space-between;
  color: white;
  padding-bottom: 10px;
  border-bottom: 1px solid #544569;
}
@media (min-width: 992px) {
  .StudentDetail .StudentInfo__mobileLinks {
    display: none;
  }
}
.StudentDetail .StudentInfo__mobileLinks div {
  padding-right: 15px;
  border-right: 1px solid #332445;
  cursor: pointer;
}
.StudentDetail .StudentInfo__mobileLinks a {
  padding-left: 15px;
  color: white;
  border-left: 1px solid #544569;
}
.StudentDetail .StudentInfo__mobileLinks a:hover {
  text-decoration: none;
}
.StudentDetail .StudentInfo__mobileLinks i {
  margin-right: 5px;
}
.StudentDetail__back {
  display: block;
  color: #37274F;
  margin-bottom: 50px;
  margin-top: 20px;
  cursor: pointer;
}
@media (max-width: 992px) {
  .StudentDetail__back {
    display: none;
  }
}
.StudentDetail__back:hover {
  text-decoration: none;
}
.StudentDetail__back i {
  margin-right: 10px;
}
.StudentDetail__download {
  transition: 250ms;
  background: #f8fafe;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 10px 25px;
  border: 0;
  display: flex;
  color: #37274F;
}
.StudentDetail__download:hover {
  color: white;
  background-color: #37274F;
}
.StudentDetail__download i {
  align-self: center;
}
.StudentDetail__message {
  appearance: none;
  transition: 250ms;
  display: block;
  background-color: #FD5B24;
  width: 100%;
  margin-bottom: 25px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 20px;
  color: white;
  font-weight: 600;
  border: 0;
}
.StudentDetail__message:hover {
  background-color: #37274F;
}
@media (max-width: 992px) {
  .StudentDetail__message {
    display: none;
  }
}
.StudentDetail__studentSelect {
  appearance: none;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
.StudentDetail__studentSelect__button {
  transition: 200ms;
  padding: 10px 15px;
  background-color: white;
  color: #37274F;
  border: 0;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.StudentDetail__studentSelect__button:hover {
  color: white;
  background-color: #37274F;
  text-decoration: none;
}
.StudentDetail__studentSelect__back {
  background-color: #f8fafe;
}
@media (min-width: 992px) {
  .StudentDetail__studentSelect__back {
    display: none;
  }
}
.StudentDetail__studentSelect__prev {
  padding-left: 20px;
}
.StudentDetail__studentSelect__prev i {
  margin-right: 10px;
}
.StudentDetail__studentSelect__next {
  padding-right: 20px;
}
.StudentDetail__studentSelect__next i {
  margin-left: 10px;
}
@media (max-width: 991px) {
  .StudentDetail__settings {
    display: none;
  }
}
.StudentDetail .UserSettings.UserSettings--teacher {
  margin-bottom: 25px;
}
.StudentDetail .UserSettings.UserSettings--teacher:hover {
  text-decoration: none;
}
.StudentDetail .UserSettings.UserSettings--teacher .ContentBlock__title::after {
  content: "\f061";
  font-family: "Font Awesome 5 Pro";
  border: 0;
  margin: unset;
  width: unset;
  height: unsets;
  position: absolute;
}
.StudentDetail__story {
  display: flex;
  margin-bottom: 45px;
}
@media (min-width: 992px) {
  .StudentDetail__story {
    margin-bottom: 115px;
  }
}
.StudentDetail__story__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 992px) {
  .StudentDetail__story__header {
    justify-content: flex-end;
    align-items: unset;
  }
}
.StudentDetail__story__header .dropdown {
  margin-bottom: 30px;
}
.StudentDetail__story__header .dropdown .StudentDetail__playthrough {
  position: relative;
  background-color: white;
  padding: 15px 37px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  font-size: 0.93em;
  color: #37274F;
  cursor: pointer;
}
@media (max-width: 992px) {
  .StudentDetail__story__header .dropdown .StudentDetail__playthrough {
    padding: 15px 25px;
  }
}
.StudentDetail__story__header .dropdown .StudentDetail__playthrough img {
  position: absolute;
  left: -10px;
  top: -6px;
}
.StudentDetail__story__header .dropdown .StudentDetail__playthrough i {
  margin-left: 13px;
}
.StudentDetail__story__header .dropdown .dropdown-menu {
  margin-top: 15px;
}
.StudentDetail__story__name {
  color: white;
  font-size: 1.2em;
  line-height: 1.5em;
}
@media (max-width: 992px) {
  .StudentDetail__story__name {
    color: #37274F;
    margin-bottom: 40px;
  }
}
.StudentDetail__story__image {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.19);
  border-radius: 6px;
  height: 244px;
  width: 182px;
  padding: 15px;
  margin-right: 50px;
  flex: 0 0 auto;
}
.StudentDetail__story__image img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: -1;
}
.StudentDetail__story__image span {
  display: block;
  color: white;
  font-size: 0.8em;
}
.StudentDetail__story__stats {
  background: linear-gradient(180deg, #F8FAFE 0%, #FFFFFF 100%);
  box-shadow: 0px 1px 0px rgba(45, 45, 45, 0.15);
  border-radius: 8px;
  padding: 12px 22px;
  margin-bottom: 30px;
}
.StudentDetail__story__stats > div {
  color: #37274F;
  display: inline-block;
}
.StudentDetail__story__stats > div:first-of-type {
  margin-right: 30px;
}
.StudentDetail__story__stats > div span {
  margin-right: 5px;
  font-weight: 600;
}
.StudentDetail__story__nuggets {
  display: flex;
  flex: 1;
  overflow-x: auto;
  height: 244px;
  padding-bottom: 20px;
  scroll-behavior: smooth;
  scrollbar-color: rgba(55, 39, 79, 0.5) #F8FAFE;
  scrollbar-width: thin;
}
.StudentDetail__story__nuggets::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0;
  height: 5px;
}
.StudentDetail__story__nuggets::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(55, 39, 79, 0.5);
}
@media (max-width: 992px) {
  .StudentDetail__story__nuggets::-webkit-scrollbar {
    display: none;
  }
}
.StudentDetail__story__nuggets__markers {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 36px;
  height: 244px;
}
.StudentDetail__story__nuggets__markers span {
  color: #37274F;
  font-size: 0.66em;
}
.StudentDetail__story__nuggets__markers span:first-of-type {
  margin-top: 10px;
}
.StudentDetail__story__nuggets__markers span:nth-of-type(2) {
  margin-bottom: 30px;
}
.StudentDetail__story__nuggets__markers span:last-of-type {
  position: absolute;
  bottom: -20px;
  left: 45px;
}
.StudentDetail__story__nuggets__wrapper {
  overflow: hidden;
}
.StudentDetail__story__nugget {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 20px;
  cursor: pointer;
}
.StudentDetail__story__nugget:hover .NuggetProgress, .StudentDetail__story__nugget.active .NuggetProgress {
  border: 2px solid #37274F;
}
.StudentDetail__story__nugget:not(:last-of-type) {
  margin-right: 25px;
}
@media (min-width: 1200px) {
  .StudentDetail__story__nugget:not(:last-of-type) {
    margin-right: 35px;
  }
}
@media (min-width: 1260px) {
  .StudentDetail__story__nugget:not(:last-of-type) {
    margin-right: 45px;
  }
}
@media (min-width: 1550px) {
  .StudentDetail__story__nugget:not(:last-of-type) {
    margin-right: 65px;
  }
}
@media (max-width: 992px) {
  .StudentDetail__story__nugget:not(:last-of-type) {
    margin-right: 45px;
  }
}
@media (max-width: 992px) {
  .StudentDetail__story__nugget:last-of-type {
    margin-right: 45px;
  }
}
.StudentDetail__story__nugget .NuggetProgress {
  transition: 150ms;
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 130px;
  box-shadow: -2px 0 0 rgba(45, 45, 45, 0.15), 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 2px solid #F1F1F1;
  border-radius: 12px;
  background-color: white;
}
.StudentDetail__story__nugget .NuggetProgress__wrapper__outer {
  position: relative;
  display: flex;
  align-items: space-between;
  transform: rotate(270deg);
  margin-top: 20px;
}
.StudentDetail__story__nugget .NuggetProgress::-ms-fill {
  border: none;
}
.StudentDetail__story__nugget .NuggetProgress::-moz-progress-value {
  background-color: #FD5B24;
}
.StudentDetail__story__nugget .NuggetProgress::-webkit-progress-value {
  background-color: #FD5B24;
}
.StudentDetail__story__nugget .NuggetProgress::-webkit-progress-bar {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
}
.StudentDetail__story__nugget .NuggetProgress::-moz-progress-bar {
  background-color: #FD5B24;
  border-radius: 12px;
  overflow: hidden;
}
.StudentDetail__story__nugget .NuggetProgress--isCompleted::-moz-progress-value {
  background-color: #71ae71;
}
.StudentDetail__story__nugget .NuggetProgress--isCompleted::-webkit-progress-value {
  background-color: #71ae71;
}
.StudentDetail__story__nugget .NuggetProgress--isCompleted::-moz-progress-bar {
  background-color: #71ae71;
}
.StudentDetail__story__nugget .NuggetProgress--extra {
  width: 40px;
}
.StudentDetail__story__nugget .NuggetProgress--extra::-moz-progress-value {
  background-color: #439C43;
}
.StudentDetail__story__nugget .NuggetProgress--extra::-webkit-progress-value {
  background-color: #439C43;
}
.StudentDetail__story__nugget .NuggetProgress--extra::-moz-progress-bar {
  background-color: #439C43;
}
.StudentDetail__story__nugget .NuggetProgress__lock {
  position: absolute;
  font-size: 9px;
  left: 8px;
  bottom: 5px;
  color: #CBCDD0;
  transform: rotate(90deg);
}
.StudentDetail__story__nugget.disabled {
  cursor: default;
}
.StudentDetail__story__nugget.disabled:hover .NuggetProgress {
  border: 2px solid #F1F1F1;
}
.StudentDetail .NuggetOverview {
  margin-top: 60px;
  margin-bottom: 40px;
}
@media (max-width: 992px) {
  .StudentDetail .NuggetOverview {
    margin-top: 0;
    padding-top: 0;
  }
}
.StudentDetail .NuggetOverview header {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 992px) {
  .StudentDetail .NuggetOverview header {
    justify-content: space-between;
  }
}
.StudentDetail .NuggetOverview header span {
  font-size: 1.06em;
  cursor: pointer;
  color: #37274F;
}
.StudentDetail .NuggetOverview header span i {
  margin-left: 10px;
}
.StudentDetail .NuggetOverview__totals {
  display: flex;
  font-size: 10px;
}
.StudentDetail .NuggetOverview__total {
  display: inline-block;
  color: #37274F;
  text-align: right;
  font-size: 1.06em;
}
.StudentDetail .NuggetOverview__total:not(:last-of-type) {
  margin-right: 8px;
}
@media (max-width: 992px) {
  .StudentDetail .NuggetOverview__total {
    font-weight: 600;
  }
}
.StudentDetail .NuggetOverview__link {
  display: block;
  text-align: right;
  color: #37274F;
  font-weight: 600;
}
@media (max-width: 992px) {
  .StudentDetail .NuggetOverview__link {
    display: none;
  }
}
.StudentDetail .NuggetOverview__link i {
  margin-left: 7px;
}
.StudentDetail .NuggetOverview .ActivitySummary:hover p {
  text-decoration: none;
}
@media (max-width: 992px) {
  .StudentDetail .NuggetOverview .ActivitySummary {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 6px;
    min-height: unset;
    height: 5em;
  }
  .StudentDetail .NuggetOverview .ActivitySummary__info {
    padding-top: 1.15em;
  }
  .StudentDetail .NuggetOverview .ActivitySummary .QuestionProgressIndicator {
    bottom: 20px;
  }
}

.SortFilters {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  height: 61px;
  background: linear-gradient(180deg, #F8FAFE 0%, #FFFFFF 100%);
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 0 10px;
  margin-right: 10px;
}
@media (max-width: 1199px) {
  .SortFilters {
    justify-content: space-between;
  }
}
.SortFilters button {
  appearance: none;
  border: none;
  background-color: transparent;
  padding: 0 42px;
  color: #37274F;
  font-size: 1.06em;
  font-weight: 600;
  opacity: 0.5;
}
.SortFilters button.active {
  opacity: 1;
}
.SortFilters button:not(:last-of-type) {
  border-right: 1px solid #ECEFF7;
}
@media (max-width: 1199px) {
  .SortFilters button {
    padding: 0 13px;
  }
}
.SortFilters__search {
  position: relative;
}
.SortFilters__search input {
  position: relative;
  background-color: #f8fafe;
  border: 1px solid #E6EAF0;
  padding: 10px 40px 10px 12px;
  color: #37274F;
  font-size: 0.9em;
  border-radius: 6px;
}
.SortFilters__search input::placeholder {
  color: #9C96A7;
}
.SortFilters__search:after {
  content: "\f002";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  color: #9C96A7;
  right: 25px;
  top: 50%;
  transform: scaleX(-1) translateY(-50%);
  font-size: 1.2em;
}

.StudentDetail__edit {
  padding-top: 40px;
}
.StudentDetail__edit .modal-dialog {
  width: 600px !important;
  max-width: 95%;
}
.StudentDetail__edit .modal-dialog .modal-header {
  background-color: #f8fafe;
  color: #37274F;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  margin-bottom: 15px;
}
.StudentDetail__edit .modal-dialog .modal-header h4 {
  color: #37274F;
}
.StudentDetail__edit .modal-dialog .btn:first-of-type {
  background: none;
}
.StudentDetail__edit .modal-dialog .btn.btn-primary {
  background-color: #37274F;
  color: white !important;
  transition: 250ms;
  font-size: 1em;
  padding: 20px 60px;
  color: #37274F;
  font-weight: 600;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border: 0;
}
.StudentDetail__edit .TeacherForm__radio {
  margin-top: -20px;
  margin-bottom: 40px;
}

.StudentDetail__lock {
  color: #CC0000;
  font-size: 12px;
  border-bottom: 1px solid #EAECF0;
  font-weight: 400;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.StudentDetail__lock a {
  color: #CC0000;
  text-decoration: underline;
}
.StudentDetail__lock::before {
  content: "\f023";
  font-family: "Font Awesome 5 Pro";
  margin-right: 10px;
}
.StudentDetail__lock__link {
  text-decoration: underline;
  cursor: pointer;
}

.Assignments {
  min-height: calc(100vh - 100px);
}
.Assignments--basic__image {
  z-index: -1;
  width: 100%;
  height: auto;
  margin-top: -250px;
}
.Assignments__header {
  display: flex;
  margin: 0 -15px 60px -15px;
}
@media (max-width: 992px) {
  .Assignments__header {
    margin: 0;
    margin-bottom: 30px;
  }
}
.Assignments__filter {
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 1em 0;
  display: flex;
  align-content: center;
  width: 100%;
}
@media (max-width: 769px) {
  .Assignments__filter {
    justify-content: space-between;
    padding: 15px;
    height: 50px;
    background: linear-gradient(180deg, #F8FAFE 0%, #FFFFFF 100%);
  }
}
.Assignments__filter .SpanSelect__wrapper .dropdown-menu--teacher {
  top: 35px;
}
@media (max-width: 1350px) {
  .Assignments__filter .SpanSelect__wrapper .dropdown-menu--teacher {
    right: 0;
    left: auto;
  }
}
@media (max-width: 991px) {
  .Assignments__filter .SpanSelect__wrapper .dropdown-menu--teacher {
    left: auto !important;
    right: -95px;
  }
}
.Assignments__filter__assignment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #37274F;
  font-size: 1.2em;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 769px) {
  .Assignments__filter__assignment {
    font-size: 14px;
    font-weight: 400;
  }
}
.Assignments__filter__options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  cursor: pointer;
}
@media (max-width: 1280px) {
  .Assignments__filter__options {
    font-size: 0.82em;
    padding: 0 10px;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .Assignments__filter__options {
    padding: 0 15px;
  }
}
@media (max-width: 769px) {
  .Assignments__filter__options {
    font-size: 14px;
  }
}
.Assignments__filter__container {
  display: flex;
  align-items: center;
}
@media (min-width: 769px) and (max-width: 991px) {
  .Assignments__filter__container {
    padding: 0 5px;
  }
}
@media (max-width: 769px) {
  .Assignments__filter__container {
    padding: 0;
  }
}
.Assignments__filter__container--right {
  flex-direction: row-reverse;
}
.Assignments__filter span {
  margin-right: 15px;
  white-space: nowrap;
}
@media (max-width: 769px) {
  .Assignments__filter span {
    margin-right: 5px;
  }
}
.Assignments__new {
  margin-left: 10px;
  width: 20%;
  white-space: nowrap;
}
@media (max-width: 750px) {
  .Assignments__new {
    position: fixed;
    width: auto;
    bottom: 15px;
    right: 15px;
    z-index: 1;
  }
}
.Assignments__new button {
  width: 100%;
  height: 100%;
  border: none;
  color: #FD5B24;
  font-weight: 700;
}
@media (max-width: 750px) {
  .Assignments__new button {
    background-color: #FD5B24 !important;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
}
.Assignments__new button:focus {
  outline: none;
}
.Assignments__new button i {
  font-size: 18px;
}
@media (max-width: 750px) {
  .Assignments__new button i {
    margin-right: 5px;
    font-size: 12px;
    font-weight: 600;
  }
}
.Assignments .Cell__assignment {
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.Assignments .Cell__assignment .fa-circle {
  font-size: 0.6rem;
  color: white;
  padding: 6px 0;
}
@media (max-width: 769px) {
  .Assignments .Cell__assignment .fa-circle {
    font-size: 0.4rem;
  }
}
.Assignments .Cell__assignment .fa-circle.graded {
  color: #ff4141;
  vertical-align: middle;
}
.Assignments .Cell__assignment .fa-circle.ungraded {
  color: #609660;
  vertical-align: middle;
}
.Assignments .Cell__assignment span {
  padding-left: 20px;
}
@media (max-width: 769px) {
  .Assignments .Cell__assignment span {
    padding-left: 5px;
  }
}
.Assignments .Cell__title {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.Assignments .Block {
  border-radius: 6px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 10px 20px;
  background-color: white;
}
.Assignments .divider {
  border: 1px solid #ECEFF7;
  display: inline-block;
  height: 24px;
  margin: 0 15px;
}
@media (min-width: 769px) and (max-width: 991px) {
  .Assignments .divider {
    margin: 0;
    font-size: 0.7rem;
  }
}
@media (min-width: 992px) and (max-width: 1550px) {
  .Assignments .divider {
    font-size: 0.8rem;
    margin: 0;
  }
}
@media (max-width: 769px) {
  .Assignments .divider {
    margin: 0;
  }
}
.Assignments .dropdown-menu {
  margin-top: 15px;
}
@media (max-width: 769px) {
  .Assignments .ReactTable.Table {
    padding: 0 10px;
  }
  .Assignments .ReactTable.Table .rt-tr-group {
    padding: 11px 5px;
  }
  .Assignments .ReactTable.Table .rt-td {
    padding-right: 0;
  }
  .Assignments .ReactTable.Table .rt-thead.-header {
    padding: 0 5px;
  }
  .Assignments .ReactTable.Table .rt-thead.-header .rt-th:first-of-type {
    margin-right: 0;
  }
  .Assignments .ReactTable.Table .rt-tr .rt-td:first-of-type {
    margin-right: 0;
  }
  .Assignments .FilterStories .dropdown-menu {
    position: absolute;
    left: -30px;
  }
}

@media (min-width: 1520px) {
  .AssignmentDetail {
    padding: 0 60px 60px 60px;
  }
}
@media (min-width: 769px) {
  .AssignmentDetail {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
@media (min-width: 769px) and (min-width: 992px) {
  .AssignmentDetail__container {
    position: absolute;
    top: 60px;
    bottom: -10px;
    right: 0;
    width: inherit;
  }
}
@media (min-width: 992px) and (max-width: 1550px) {
  .AssignmentDetail .ReactTable .rt-tbody .rt-tr-group {
    font-size: 0.8rem;
  }
}
.AssignmentDetail__container--gray {
  background-color: #DFE7F8;
}
.AssignmentDetail__container--green {
  background-color: #609660;
}
.AssignmentDetail__container--orange {
  background-color: #FF7041;
}
.AssignmentDetail__container--red {
  background-color: #FF4141;
}
.AssignmentDetail .Header {
  padding-top: 50px;
  margin-bottom: 15px;
}
@media (max-width: 991px) {
  .AssignmentDetail .Header {
    margin-bottom: 0;
  }
}
.AssignmentDetail .Header .ClassTitle {
  margin-bottom: 18px;
}
@media (min-width: 769px) and (max-width: 1550px) {
  .AssignmentDetail .Header .ClassTitle {
    font-size: 1.8em;
  }
}
@media (max-width: 991px) {
  .AssignmentDetail .Header .ClassTitle {
    font-size: 1.1em;
  }
}
.AssignmentDetail .Header .ClassTitle--white {
  color: white;
}
.AssignmentDetail .Header .ClassTitle--purple {
  color: #37274F;
}
.AssignmentDetail .Status {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .AssignmentDetail .Status {
    width: 100vw;
  }
}
.AssignmentDetail .Status__created {
  font-size: 16px;
}
@media (max-width: 991px) {
  .AssignmentDetail .Status__created {
    font-size: 1rem;
  }
}
.AssignmentDetail .Status__created--gray {
  color: #f8fafe;
  opacity: 0.5;
}
.AssignmentDetail .Status__created--purple {
  color: #37274F;
  opacity: 0.5;
}
.AssignmentDetail .Status__graded, .AssignmentDetail .Status__ungraded {
  transition: 350ms;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 10px 20px;
  background-color: white;
}
.AssignmentDetail .Status__graded:focus, .AssignmentDetail .Status__ungraded:focus {
  outline: none;
}
@media (max-width: 991px) {
  .AssignmentDetail .Status__graded, .AssignmentDetail .Status__ungraded {
    display: none;
  }
}
.AssignmentDetail .Status__graded .fas, .AssignmentDetail .Status__ungraded .fas {
  margin-right: 10px;
  font-size: 10px;
}
@media (min-width: 992px) {
  .AssignmentDetail .Status__graded:hover, .AssignmentDetail .Status__ungraded:hover {
    background-color: #FD5B24 !important;
    color: white;
  }
  .AssignmentDetail .Status__graded:hover i, .AssignmentDetail .Status__ungraded:hover i {
    display: none;
  }
}
@media (min-width: 992px) {
  .AssignmentDetail .Status__graded:after {
    content: "Archived";
  }
  .AssignmentDetail .Status__graded:hover:after {
    content: "Unarchive";
  }
}
.AssignmentDetail .Status__graded .fas {
  color: #ff4141;
}
@media (min-width: 992px) {
  .AssignmentDetail .Status__ungraded:after {
    content: "Active";
  }
  .AssignmentDetail .Status__ungraded:hover:after {
    content: "Archive";
  }
}
.AssignmentDetail .Status__ungraded .fas {
  color: #609660;
}
.AssignmentDetail .Image {
  margin-bottom: 18px;
}
.AssignmentDetail .Filters {
  margin-bottom: 38px;
  display: flex;
  align-items: center;
}
.AssignmentDetail .Filters__options {
  display: flex;
  height: 40px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}
@media (min-width: 992px) {
  .AssignmentDetail .Filters__options {
    max-width: 310px;
  }
}
.AssignmentDetail .Filters__options > span {
  display: flex;
  align-items: center;
  background-color: #F0F0F0;
  height: 100%;
  font-size: 1rem;
  color: #37274F;
  font-weight: 600;
  padding: 0 18px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.AssignmentDetail .Filters__options .SelectOption {
  flex-grow: 1;
  height: 100%;
  border-top-right-radius: 8px;
  background-color: white;
  padding: 0 15px;
  border-bottom-right-radius: 8px;
  display: flex;
  justify-content: center;
}
.AssignmentDetail .Filters__options .SelectOption .Cell__filter {
  font-size: 1rem;
  color: #37274F;
}
.AssignmentDetail .Actions {
  display: flex;
  margin-bottom: 18px;
  color: #37274F;
}
.AssignmentDetail .Actions > div > div {
  height: 40px;
}
@media (max-width: 992px) {
  .AssignmentDetail .Actions--grade {
    padding-right: 0;
  }
}
.AssignmentDetail .Actions__class {
  flex-basis: 42%;
  margin-right: 10px;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  justify-content: center;
  width: 100%;
}
.AssignmentDetail .Actions__class span {
  font-weight: 700;
  margin: 0 10px 0 0;
  font-size: 16px;
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 100%;
}
@media (min-width: 769px) and (max-width: 991px) {
  .AssignmentDetail .Actions__class span {
    margin: 0 5px 0 0;
  }
}
@media (max-width: 991px) {
  .AssignmentDetail .Actions__class .fa-circle {
    margin: 0 5px 0 5px;
  }
}
.AssignmentDetail .Actions__class .fa-arrow-right {
  margin-left: 10px;
}
@media (min-width: 769px) and (max-width: 991px) {
  .AssignmentDetail .Actions__class .fa-arrow-right {
    margin-left: 5px;
  }
}
@media (max-width: 1200px) {
  .AssignmentDetail .Actions__class {
    padding: 10px 10px !important;
  }
  .AssignmentDetail .Actions__class span {
    margin-right: 0;
  }
  .AssignmentDetail .Actions__class__goto {
    display: none;
  }
}
.AssignmentDetail .Actions__action {
  flex: 1;
  align-items: center;
  justify-content: space-evenly;
  flex-basis: 16%;
  padding: 0 !important;
  min-width: 70px;
  height: 40px !important;
  margin-right: 5px;
}
@media (min-width: 1199px) {
  .AssignmentDetail .Actions__action {
    width: 109px;
    margin-right: 0;
  }
}
@supports (-ms-ime-align: auto) {
  .AssignmentDetail .Actions__action {
    justify-content: space-around;
  }
}
.AssignmentDetail .Actions__action i {
  cursor: pointer;
}
.AssignmentDetail .Actions__due {
  align-items: center;
  cursor: pointer;
}
.AssignmentDetail .Actions__due i {
  margin-left: 10px;
}
.AssignmentDetail .Actions__gotoClass {
  display: flex;
  justify-content: space-between !important;
  color: #37274F;
}
.AssignmentDetail .Actions__gotoClass:hover {
  text-decoration: none;
}
.AssignmentDetail .Actions a {
  color: #37274F;
  flex-basis: 42%;
}
.AssignmentDetail .Actions a:hover {
  text-decoration: none;
  color: #37274F;
}
.AssignmentDetail .Actions .react-datepicker-wrapper {
  flex-grow: 1;
  flex-basis: 42%;
  margin-left: 10px;
}
.AssignmentDetail .Actions .react-datepicker-wrapper .react-datepicker__input-container {
  width: 100%;
}
.AssignmentDetail .Actions .Status__ungraded {
  padding: 5px;
}
@media (min-width: 992px) {
  .AssignmentDetail .Actions .Status__ungraded .fas {
    margin: 0 5px 0 0;
  }
}
.AssignmentDetail .Actions .Status__graded {
  padding: 5px;
}
@media (min-width: 992px) {
  .AssignmentDetail .Actions .Status__graded .far {
    margin: 0 5px 0 0;
  }
}
.AssignmentDetail .Congra {
  display: flex;
  flex-direction: row-reverse;
  font-weight: 700;
  margin: 30px 0;
  cursor: pointer;
}
.AssignmentDetail__image {
  margin: auto;
  margin-bottom: 15px;
  width: 100%;
}
@media (max-width: 600px) {
  .AssignmentDetail__image {
    max-height: unset;
    width: 100%;
    height: auto;
  }
}
@media (min-width: 992px) {
  .AssignmentDetail__image {
    max-height: unset;
    width: 100%;
    height: auto;
  }
}
.AssignmentDetail__image__container {
  position: relative;
}
.AssignmentDetail__image__container > div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 15px;
  background-color: #37274F;
  color: white;
  font-weight: 600;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  height: 44px;
  text-align: center;
}
.AssignmentDetail__close {
  font-size: 24px;
}
@media (max-width: 991px) {
  .AssignmentDetail__close {
    display: none;
  }
}
.AssignmentDetail__close--white {
  color: white;
}
.AssignmentDetail__close--purple {
  color: #37274F;
}
.AssignmentDetail__close i {
  cursor: pointer;
}
.AssignmentDetail .Cell {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.AssignmentDetail .Cell__avatar {
  width: 150%;
  height: auto;
  object-fit: fill;
  object-position: -10px -5px;
}
.AssignmentDetail .Cell .avatar {
  height: 40px;
  width: 40px;
  min-width: 40px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 15px;
}
@media (max-width: 1200px) {
  .AssignmentDetail .Cell .avatar {
    width: 30px;
    min-width: 30px;
    height: 30px;
    object-position: -5px -5px;
    margin-right: 8px;
  }
}
.AssignmentDetail .Cell__filter {
  font-size: 18px;
  display: flex;
  align-items: center;
}
.AssignmentDetail .Cell__filter .fa-angle-down {
  margin-left: 10px;
}
@media (min-width: 769px) and (max-width: 1550px) {
  .AssignmentDetail .Cell__filter .fa-angle-down {
    margin-left: 5px;
  }
}
.AssignmentDetail .Cell__header--white {
  color: white;
}
.AssignmentDetail .Cell__header--purple {
  color: #37274F;
}
.AssignmentDetail .Cell__name {
  cursor: pointer;
  color: #37274F;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.AssignmentDetail .Cell__name:hover {
  color: #37274F;
}
.AssignmentDetail .ProgressModal__progressBar progress {
  margin-top: 0;
  border: none;
  height: 6px;
  position: absolute;
  top: 71px;
  margin-left: -20px;
  background-color: unset;
  box-shadow: none;
}
@media (max-width: 1199px) {
  .AssignmentDetail .ProgressModal__progressBar progress {
    top: 61px;
  }
}
.AssignmentDetail .NuggetProgress {
  padding: 0 22px 5px 22px;
  margin: 7px -15px -15px -15px;
  background-color: #f8fafe;
  border-top: 4px solid #C0C3C0;
  overflow: hidden;
  position: relative;
}
.AssignmentDetail .NuggetProgress--mark {
  padding-bottom: 41px;
}
.AssignmentDetail .NuggetProgress__mark {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 25px;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  color: #FD5B24;
  background-color: #E1E6EE;
}
.AssignmentDetail .NuggetProgress__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.AssignmentDetail .NuggetProgress__item:not(:last-of-type) {
  border-bottom: 1px solid #D3D4D8;
}
.AssignmentDetail .NuggetProgress__item__title {
  font-weight: 600;
}
.AssignmentDetail .NuggetProgress__item__bar {
  display: flex;
  align-items: center;
  width: 200px;
}
@media (max-width: 992px) {
  .AssignmentDetail .NuggetProgress__item__bar {
    width: 125px;
  }
}
.AssignmentDetail .NuggetProgress__item__bar progress {
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #C4C4C4;
  color: #FD5B24;
  border-radius: 3px;
  overflow: hidden;
}
.AssignmentDetail .NuggetProgress__item__bar progress::-ms-fill {
  border: none;
}
.AssignmentDetail .NuggetProgress__item__bar progress::-moz-progress-value {
  background-color: #FD5B24;
}
.AssignmentDetail .NuggetProgress__item__bar progress::-webkit-progress-value {
  background-color: #FD5B24;
}
.AssignmentDetail .NuggetProgress__item__bar progress::-webkit-progress-bar {
  background-color: #C4C4C4;
  border-radius: 3px;
  overflow: hidden;
}
.AssignmentDetail .NuggetProgress__item__bar progress::-moz-progress-bar {
  background-color: #FD5B24;
  border-radius: 3px;
  overflow: hidden;
}
.AssignmentDetail .NuggetProgress__item__bar progress.completed::-moz-progress-value {
  background-color: #71ae71;
}
.AssignmentDetail .NuggetProgress__item__bar progress.completed::-webkit-progress-value {
  background-color: #71ae71;
}
.AssignmentDetail .NuggetProgress__item__bar progress.completed::-webkit-progress-bar {
  background-color: #71ae71;
}
.AssignmentDetail .NuggetProgress__item__bar progress.completed::-moz-progress-bar {
  background-color: #71ae71;
}
.AssignmentDetail .NuggetProgress__item__bar span {
  margin-left: 10px;
  width: 40px;
  text-align: right;
}
.AssignmentDetail .Block {
  border-radius: 6px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 10px 20px;
  background-color: white;
  display: flex;
}
@media (max-width: 991px) {
  .AssignmentDetail .Block {
    padding: 5px 10px;
  }
}
.AssignmentDetail .divider {
  border: 1px solid #ECEFF7;
  display: inline-block;
  height: 24px;
}
@media (min-width: 769px) and (max-width: 991px) {
  .AssignmentDetail .divider {
    font-size: 0.7rem;
  }
}
@media (min-width: 992px) and (max-width: 1550px) {
  .AssignmentDetail .divider {
    font-size: 0.8rem;
  }
}
.AssignmentDetail .dropdown-menu {
  margin-top: 15px;
}
.AssignmentDetail .react-datepicker__input-container input {
  width: 100%;
  padding: 10px;
}
@media (max-width: 412px) {
  .AssignmentDetail .react-datepicker__input-container input {
    text-align: center;
  }
}
.AssignmentDetail .react-datepicker__input-container:after {
  right: 10px;
}
.AssignmentDetail .ReactTable.Table .rt-th:first-of-type {
  display: none;
}
.AssignmentDetail .ReactTable.Table .rt-tr-group {
  height: unset;
  padding: 5px 10px;
}
@media (max-width: 1200px) {
  .AssignmentDetail .ReactTable.Table .rt-tr-group {
    padding: 8px 10px;
  }
}
@media (max-width: 400px) {
  .AssignmentDetail .ReactTable.Table .rt-tr-group {
    padding: 11px 5px;
  }
}
.AssignmentDetail .ReactTable.Table .rt-tr-group .rt-expandable {
  display: none;
}
.AssignmentDetail .ReactTable.Table .rt-tr-group .rt-tr {
  cursor: pointer;
}
.AssignmentDetail .ReactTable.Table .rt-tr-group .rt-td {
  font-size: 14px;
}
@media (min-width: 1550px) {
  .AssignmentDetail .ReactTable.Table .rt-tr-group .rt-td {
    font-size: 15px;
  }
}

.ReactTable .rt-table {
  overflow: visible !important;
}
.ReactTable .rt-tbody .rt-tr-group {
  border: none;
  position: relative;
  overflow: visible;
}

.ReactTable.Table .rt-thead.-header .rt-th {
  overflow: visible;
}
@media (min-width: 992px) and (max-width: 1550px) {
  .ReactTable.Table .rt-thead.-header .rt-tr-group .rt-td.title {
    font-size: 1rem;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .ReactTable.Table .rt-thead.-header {
    padding: 0 5px;
  }
}

.DueDateCell {
  display: flex;
  position: relative;
}
.DueDateCell span {
  margin-left: 8px;
  width: 50px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FD5B24;
  border-radius: 7px;
  border: 1px solid #FD5B24;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.22);
  background-color: white;
  font-size: 12px;
}
@media (max-width: 1200px) {
  .DueDateCell span {
    font-size: 8px;
    width: 35px;
  }
}
.DueDateCell span:hover {
  width: 100%;
  position: absolute;
  left: 0;
  margin-left: 0;
  z-index: 1;
}
.DueDateCell span:active {
  background-color: #71ae71;
  color: white;
  border: 1px solid #71ae71;
}
.DueDateCell span .fa-check {
  margin-right: 5px;
}

.ProgressCell {
  justify-content: space-around;
}
.ProgressCell button {
  transition: 200ms;
  appearance: none;
  background-color: #F6F8FC;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.22);
  color: #37274F;
  width: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  padding: 5px 0;
  border-radius: 14px;
  border: 0;
}
.ProgressCell button:hover {
  background-color: #37274F;
  color: white;
}
.ProgressCell button i {
  margin-left: 3px;
}

.AssignmentsOverview .Assignments {
  padding: 50px 15px 0 20px;
}
@media (max-width: 769px) {
  .AssignmentsOverview .Assignments {
    padding: 30px 0 0 0;
  }
}
.AssignmentsOverview .Assignments__detail {
  position: unset;
}
@media (max-width: 991px) {
  .AssignmentsOverview .Assignments__detail {
    padding: 0;
    margin-top: -20px;
  }
}
.AssignmentsOverview .ToggleAction ul {
  display: inline-flex;
  padding: 0;
  margin: 0;
}
.AssignmentsOverview .ToggleAction li {
  padding: 0 15px 0 15px;
  border-bottom: none;
}
.AssignmentsOverview .ToggleAction a {
  color: #37274F;
  text-decoration: none;
  cursor: pointer;
}
.AssignmentsOverview .ResponsiveHeader__container {
  display: flex;
  align-items: center;
}

.AssignmentsOverviewMobile__assignmentTitle {
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
}
.AssignmentsOverviewMobile__newButton {
  border-radius: 6px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 15px;
  background-color: white;
  font-size: 12px;
  font-weight: 700;
  color: #FD5B24;
}
.AssignmentsOverviewMobile__newButton .fa-check {
  font-weight: 500;
}
@media (max-width: 769px) {
  .AssignmentsOverviewMobile__newButton {
    padding: 10px;
  }
}
.AssignmentsOverviewMobile__filterStudents {
  color: white;
  font-weight: 700;
  font-size: 1rem;
}
.AssignmentsOverviewMobile__filterStudents .fa-angle-down {
  font-weight: 500;
  padding-left: 10px;
}

.ResponsiveHeader__rightComponent {
  display: flex;
  justify-content: flex-end;
  padding-left: 0;
}
.ResponsiveHeader__rightComponent .dropdown-menu {
  position: absolute;
  left: -50px;
  margin-top: 15px;
}

.UnlockClassForm .TeacherForm__button {
  min-height: 60px;
}

.ResponsiveHeader {
  position: relative;
  height: 90px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-top: -5px;
}
.ResponsiveHeader__container {
  width: 100vw;
}
.ResponsiveHeader__banner {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  height: 115px;
}
.ResponsiveHeader__leftComponent {
  display: flex;
  align-items: center;
}
.ResponsiveHeader__back {
  color: white;
  padding-right: 10px;
}
.ResponsiveHeader__leftTitle {
  color: white;
  font-size: 20px;
  font-weight: 700;
}

.top-wrapper.top-wrapper__bg1 {
  background-size: 100%;
  background-position: 0 0 !important;
}

@media (min-width: 769px) and (max-width: 991px) {
  .ClassStudents .SelectTable {
    padding: 0 15px;
  }
}
@media (max-width: 769px) {
  .ClassStudents .SelectTable {
    padding: 0 15px;
  }
  .ClassStudents .SelectTable__menu {
    padding: 0 5px 10px 5px;
    margin-bottom: 5px;
    overflow-x: scroll;
    display: flex;
  }
  .ClassStudents .SelectTable__selectAll {
    margin-right: 5px;
    min-width: 23px;
  }
  .ClassStudents .ToggleAction ul {
    white-space: nowrap;
  }
  .ClassStudents .ToggleAction a {
    font-size: 14px;
  }
  .ClassStudents .ProfLevel {
    position: absolute;
    right: 15px;
  }
  .ClassStudents .ProfLevel__container {
    display: flex;
    align-items: center;
  }
  .ClassStudents .ProfLevel__title {
    font-size: 14px;
  }
  .ClassStudents .ProfLevel .fa-angle-down {
    color: #37274F;
    padding-left: 5px;
  }
  .ClassStudents .ProfLevel .dropdown-menu {
    position: absolute;
    left: -70px;
    margin-top: 15px;
  }
  .ClassStudents .Stats {
    padding-bottom: 15px;
  }
  .ClassStudents .Stats .ContentBlock {
    height: 100px;
    width: 400px;
  }
  .ClassStudents .ReactTable.Table .rt-thead.-header {
    padding-left: 0;
  }
  .ClassStudents .ReactTable.Table .rt-thead.-header .rt-th:first-of-type {
    margin-right: 5px;
  }
  .ClassStudents .ReactTable.Table .rt-tr-group {
    padding: 10px 5px;
  }
  .ClassStudents .ReactTable.Table .rt-tr .rt-td:first-of-type {
    margin-right: 0;
  }
  .ClassStudents .ReactTable.Table .rt-tr-group .rt-td {
    font-size: 14px;
  }
  .ClassStudents .ReactTable.Table .rt-thead.-header .rt-th {
    font-size: 14px;
  }
}
.ClassStudents__moveClass {
  cursor: pointer;
}
.ClassStudents .SelectTable .fa-angle-down {
  padding-left: 5px;
}
.ClassStudents .SelectTable .dropdown-menu {
  margin-top: 15px;
}
.ClassStudents .ReactTable .rt-tbody {
  max-height: 50vh;
}
.ClassStudents .ToggleAction .dropdown-menu ul {
  display: block;
  padding: 0 0 0 15px;
  margin: 0;
}
.ClassStudents .far {
  color: #D31C1C;
  cursor: pointer;
}

.ClassMore__title {
  color: #37274F;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 20px;
}
.ClassMore .Button {
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  font-weight: 700;
  background-color: white;
}
.ClassMore .right {
  display: flex;
  justify-content: flex-end;
}
.ClassMore .ChangeClassName {
  margin-bottom: 20px;
}
.ClassMore .ChangeClassName__save {
  background-color: #FD5B24;
  color: white;
  width: 150px;
}
.ClassMore .ChangeClassName__edit {
  flex-direction: column;
  height: 60px;
  align-items: start;
  padding: 0 10px;
  color: #37274F;
  margin-bottom: 20px;
  font-size: 1.2rem;
}
.ClassMore .ChangeClassName__placeholder {
  font-weight: 400;
  font-size: 0.8rem;
}
.ClassMore .PrivacySettings {
  margin-bottom: 40px;
}
.ClassMore .PrivacySettings__message {
  color: #37274F;
  margin-bottom: 20px;
}
.ClassMore .PrivacySettings__actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.ClassMore .PrivacySettings__button {
  color: #37274F;
}
.ClassMore .PrivacySettings__button.selected {
  background-color: #37274F;
  color: white;
}
.ClassMore .PrivacySettings .Coppa {
  margin-top: 40px;
}

.AssignmentDeleteModal__message {
  text-align: center;
}
.AssignmentDeleteModal .modal-backdrop {
  background-color: black;
  opacity: 80%;
}
.AssignmentDeleteModal .modal-backdrop.in {
  opacity: 0.8;
}
.AssignmentDeleteModal .modal-dialog {
  width: 600px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: auto;
}
@media (max-width: 769px) {
  .AssignmentDeleteModal .modal-dialog {
    width: 90vw !important;
    margin: 0;
  }
}
.AssignmentDeleteModal .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 769px) {
  .AssignmentDeleteModal .modal-header {
    height: 8vh;
    border-bottom: none;
  }
}
.AssignmentDeleteModal .modal-header h4 {
  color: #37274F;
}
@media (max-width: 769px) {
  .AssignmentDeleteModal .modal-header h4 {
    font-size: 1rem;
  }
}
.AssignmentDeleteModal .modal-body {
  display: flex;
  justify-content: space-evenly;
  margin: 30px 0;
}
@supports (-ms-ime-align: auto) {
  .AssignmentDeleteModal .modal-body {
    justify-content: space-around;
  }
}
@media (max-width: 769px) {
  .AssignmentDeleteModal .modal-body {
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    background-color: white;
  }
}
.AssignmentDeleteModal .modal-body .btn-delete {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1.3em;
  color: #37274F;
  border-radius: 6px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 10px 20px;
  width: 189px;
}
.AssignmentDeleteModal .modal-body .btn-delete:focus {
  outline: none;
}
@media (max-width: 769px) {
  .AssignmentDeleteModal .modal-body .btn-delete {
    font-size: 1rem;
    margin: 5px 0;
    width: 50vw;
    align-self: center;
  }
  .AssignmentDeleteModal .modal-body .btn-delete:hover {
    background-color: #37274F;
    color: white;
  }
}
.AssignmentDeleteModal__title {
  font-size: 22px;
}
.AssignmentDeleteModal__message {
  color: #37274F;
  font-size: 16px;
  text-align: center;
  width: 375px;
  max-width: 100%;
}

.StoriesOverview {
  position: relative;
  padding-top: 30px;
}
@media (max-width: 768px) {
  .StoriesOverview {
    padding-top: 0;
  }
}
.StoriesOverview::before {
  content: "";
  background-image: url("https://assets.senorwooly.com/static/images/story_banner_wave.svg");
  position: absolute;
  top: -3.6em;
  width: 100%;
  height: 3.734em;
  display: block;
}
.StoriesOverview__header {
  margin-bottom: 40px;
  flex-direction: row-reverse;
}
.StoriesOverview__title {
  color: #37274F;
  font-size: 40px;
  font-weight: 700;
}
.StoriesOverview__filterContainer {
  display: flex;
  align-items: center;
}
.StoriesOverview__filterContainer .dropdown-menu {
  position: absolute;
  right: 0px;
  left: unset;
  margin-top: 15px;
}
.StoriesOverview__filter {
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  padding: 12px 15px;
  background-color: white;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: #37274F;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
@media (max-width: 500px) {
  .StoriesOverview__filter {
    font-size: 10px;
    max-width: 115px;
  }
}
.StoriesOverview__filter .fal {
  font-size: 14px;
  padding-left: 10px;
  font-weight: 700;
}
.StoriesOverview__container {
  display: flex;
  flex-wrap: wrap;
}
.StoriesOverview__container:before {
  width: 0px;
}
@media (max-width: 991px) {
  .StoriesOverview__container:before {
    display: block;
    position: relative;
    top: -23px;
  }
}
.StoriesOverview__cardContainer {
  position: relative;
  width: 100%;
}
.StoriesOverview__cardImage {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.StoriesOverview__cardInfo {
  position: absolute;
  bottom: 0px;
  background: rgba(255, 255, 255, 0.7);
  border-top-right-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #37274F;
}

.StoriesOverview__header .TeacherForm__submit {
  height: 44px;
  min-height: 50px;
  padding: 0 25px;
}
.StoriesOverview__header--mobile {
  display: none;
}
@media (max-width: 768px) {
  .StoriesOverview__header--mobile {
    display: block;
  }
}
.StoriesOverview__header--mobile .ResponsiveHeader__banner {
  z-index: 1;
}
.StoriesOverview__header--mobile .ResponsiveHeader__container {
  display: flex;
  align-items: center;
  z-index: 2;
}
.StoriesOverview__header--mobile .ResponsiveHeader__rightComponent .dropdown-menu {
  right: 0px;
  left: unset;
}
.StoriesOverview__header--mobile .SortFilters__search {
  display: inline-block;
  margin-right: 15px;
}
@media (max-width: 360px) {
  .StoriesOverview__header--mobile .SortFilters__search {
    margin-right: 10px;
  }
}
@media (max-width: 350px) {
  .StoriesOverview__header--mobile .SortFilters__search {
    display: none;
  }
}
.StoriesOverview__header--mobile .SortFilters__search--mobile input {
  background: transparent;
  color: white;
  border: 0;
  border-bottom: 1px solid white;
  border-radius: 0;
  max-width: 155px;
  padding-left: 0;
  padding-bottom: 5px;
}
@media (max-width: 500px) {
  .StoriesOverview__header--mobile .SortFilters__search--mobile input {
    max-width: 115px;
    padding-right: 5px;
  }
}
.StoriesOverview__header--mobile .SortFilters__search--mobile:after {
  right: 0;
  color: white;
  font-size: 1em;
  bottom: -3px;
}
.StoriesOverview__header--classDetail {
  text-align: right;
}
@media (max-width: 992px) {
  .StoriesOverview__header--classDetail {
    padding: 0 15px;
  }
}
.StoriesOverview__header--classDetail .StoriesOverview__filter {
  margin-bottom: 30px;
  background: linear-gradient(180deg, #F8FAFE 0%, #FFFFFF 100%);
  box-shadow: 0px 1px 0px rgba(45, 45, 45, 0.15);
  color: #37274F;
  font-size: 14px;
  font-weight: 400;
}
@media (max-width: 500px) {
  .StoriesOverview__header--classDetail .StoriesOverview__filter {
    min-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.StoriesOverview__header--classDetail .StoriesOverview__filter .fal {
  font-weight: 400;
}
.StoriesOverview__header--classDetail .dropdown-menu {
  right: 0px;
  left: unset;
}
.StoriesOverview__header .SortFilters__search {
  margin-right: 15px;
  margin-top: 1px;
}
.StoriesOverview__header .SortFilters__search input {
  min-height: 51px;
  background-color: white;
  box-shadow: inset 0px 2px 2px rgba(45, 45, 45, 0.13);
}
.StoriesOverview__header .SortFilters__search:after {
  right: 15px;
}

.StoriesCard {
  position: relative;
  background-color: white;
  border-radius: 10px;
  overflow: visible;
  margin-bottom: 30px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  width: 100%;
  color: #37274F;
}
@media (max-width: 992px) {
  .StoriesCard {
    border-radius: 0;
  }
}
.StoriesCard__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
@media (max-width: 992px) {
  .StoriesCard__image {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
.StoriesCard__container {
  font-size: 0.93rem;
  padding: 30px;
}
@media (max-width: 991px) {
  .StoriesCard__container {
    padding: 15px 15px 90px 15px;
  }
}
.StoriesCard__button {
  transition: 200ms;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: #37274F;
  font-weight: 600;
  background-color: #f8fafe;
  padding: 20px 0;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  cursor: pointer;
}
.StoriesCard__button:hover {
  background-color: #37274F;
  color: white;
}
.StoriesCard__header {
  display: flex;
  justify-content: space-between;
}
.StoriesCard__header span {
  transition: 250ms;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 8px;
  min-width: 150px;
  height: 42px;
  padding: 12px;
  color: #37274F;
  font-weight: 600;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  font-size: 0.93em;
  margin-left: 15px;
}
.StoriesCard__header span:hover {
  background-color: #37274F;
  color: white !important;
}
.StoriesCard__header span:hover i {
  color: white !important;
}
.StoriesCard__header span i {
  margin-left: 13px;
  margin-top: 2px;
}
.StoriesCard__title {
  transition: 250ms;
  color: #37274F;
  font-size: 20px;
  font-weight: 700;
}
.StoriesCard__title:hover {
  color: #37274F;
}
.StoriesCard__infoContainer .dropdown {
  width: 100%;
}
.StoriesCard__infoContainer .dropdown .dropdown-menu__button {
  width: 100%;
}
.StoriesCard__infoContainer .dropdown .dropdown-menu {
  border: unset;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background: linear-gradient(0deg, #FFFFFF 0%, #F8FAFE 100%);
  box-shadow: none;
  padding: 12px 15px !important;
}
.StoriesCard__meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
}
@media (min-width: 993px) {
  .StoriesCard__meta {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}
@media (max-width: 992px) {
  .StoriesCard__meta > div {
    width: 50%;
    margin-bottom: 25px;
  }
}
@media (min-width: 1200px) and (max-width: 1415px) {
  .StoriesCard__meta > div {
    width: 50%;
    margin-bottom: 25px;
  }
}
.StoriesCard__meta .subTitle {
  margin-bottom: 5px;
}
.StoriesCard__meta .teacherPepper {
  width: 15px;
  height: auto;
  opacity: 0.25;
  margin-bottom: 5px;
  margin-right: 2px;
}
.StoriesCard__meta .teacherPepper.active {
  opacity: 1;
}
.StoriesCard__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
}
.StoriesCard__actions > a {
  position: relative;
  width: 50%;
  text-align: center;
  color: #37274F;
  font-weight: 600;
  background-color: #f8fafe;
  padding: 20px 0;
  cursor: pointer;
}
.StoriesCard__actions > a:first-of-type:after {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: block;
  background-color: #EAEBEF;
  width: 1px;
  height: 14px;
}
.StoriesCard__showInfo {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%);
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  color: #37274F;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
}
.StoriesCard__showInfo .far {
  font-size: 14px;
  padding-left: 10px;
  font-weight: 700;
}
.StoriesCard__showInfo__unlock {
  min-width: 321px;
  left: auto;
  right: 0;
  margin-top: 15px;
}
@media (max-width: 992px) {
  .StoriesCard__showInfo__unlock {
    min-width: 222px;
  }
}
.StoriesCard__showInfo__unlock i.fa-lock-alt {
  margin-right: 5px;
}
.StoriesCard__showInfo__unlock__classname {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.StoriesCard__moreInfo {
  padding: 12px 15px;
}
@media (max-width: 768px) {
  .StoriesCard__moreInfo {
    padding: 12px 0px;
  }
}
.StoriesCard__notes__title {
  font-weight: 600;
  color: #37274F;
}
.StoriesCard__notes--spoiler {
  padding: 15px;
  background-color: #F9FBFE;
  margin-top: -10px !important;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.StoriesCard .VerticalSpace {
  margin-top: 30px;
}
.StoriesCard .subTitle {
  color: #37274F;
  font-size: 14px;
  font-weight: 700;
}
.StoriesCard .message {
  color: #37274F;
  font-size: 14px;
}
.StoriesCard .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.StoriesCard__modal {
  display: flex;
  flex-direction: column;
  max-width: 477px;
  margin: 0 auto;
}
.StoriesCard__modal__body {
  position: relative;
}
.StoriesCard__modal .StudentActivityModal__back {
  align-self: flex-start;
  margin-bottom: 30px;
}
.StoriesCard__modal .StoriesCard__meta > div {
  width: 50%;
  margin-bottom: 25px;
}
.StoriesCard__modal .StoryCardFlyout__viewStory {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-bottom: 30px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.StoriesCard__modal .StoryCardFlyout__viewStory:hover {
  color: white;
}

.StoryCardFlyout {
  position: relative;
}
.StoryCardFlyout__close {
  position: absolute;
  right: 5%;
  top: 20px;
  color: #F1F2F4;
  font-size: 22px;
  z-index: 10;
}
.StoryCardFlyout__viewStory {
  height: 50px;
  font-size: 12px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #37274F;
  font-weight: 700;
  margin-bottom: 60px;
}
.StoryCardFlyout__viewStory .far {
  padding-left: 15px;
  font-weight: 700;
}
.StoryCardFlyout .Flyout {
  background-color: unset;
}
.StoryCardFlyout .Flyout__header {
  display: none;
}
.StoryCardFlyout .Flyout__body {
  padding: 0;
  position: relative;
}
.StoryCardFlyout .StoriesCard {
  margin-bottom: 0;
  border-radius: 0;
}
.StoryCardFlyout .StoriesCard__container {
  padding: 35px 15px;
}
.StoryCardFlyout .StoriesCard__image {
  border-radius: unset;
  height: 195px;
}
.StoryCardFlyout .StoriesCard__notes {
  padding: 12px 15px;
}
.StoryCardFlyout .StoriesCard .VerticalSpace {
  margin-right: 0;
  font-size: 14px;
}

@media (min-width: 992px) {
  .TeacherStoryDetail {
    padding-top: 70px !important;
  }
}
@media (min-width: 992px) {
  .TeacherStoryDetail__sidebar {
    margin-bottom: 50px;
  }
}
.TeacherStoryDetail__sidebar .StoryDetail__contentNavigation {
  padding: 0;
}
@media (max-width: 992px) {
  .TeacherStoryDetail__sidebar .StoryDetail__contentNavigation {
    margin-bottom: 30px;
  }
}
.TeacherStoryDetail__sidebar .StoryDetail__contentNavigation .ContentLink__btn {
  padding: 0.344em 0.66em;
}
.TeacherStoryDetail__sidebar__switch {
  transition: 250ms;
  display: inline-block;
  padding: 15px;
  min-width: 150px;
  background-color: white;
  color: #37274F;
  font-weight: 600;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  margin-bottom: 30px;
}
.TeacherStoryDetail__sidebar__switch:hover {
  color: white;
  background-color: #37274F;
  text-decoration: none;
}
@media (max-width: 769px) {
  .TeacherStoryDetail__sidebar__switch {
    display: none;
  }
}
.TeacherStoryDetail__sidebar__switch i {
  color: inherit;
  margin-right: 15px;
}
.TeacherStoryDetail__sidebar__title {
  color: #37274F;
  font-size: 2.1em;
  margin-bottom: 25px;
  font-weight: 600;
}
@media (max-width: 769px) {
  .TeacherStoryDetail__sidebar__title {
    display: block;
    position: absolute;
    top: 80px;
    color: white;
    font-size: 1.33em;
  }
  .TeacherStoryDetail__sidebar__title:before {
    content: "\f053";
    color: inherit;
    font-size: inherit;
    font-family: "Font Awesome 5 Pro";
    margin-right: 15px;
  }
}
.TeacherStoryDetail__sidebar__description {
  font-size: 0.93em;
  color: #37274F;
  line-height: 24px;
  margin-bottom: 30px;
}
@media (max-width: 769px) {
  .TeacherStoryDetail__sidebar__description {
    display: none;
  }
}
.TeacherStoryDetail__sidebar__playing {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
@media (max-width: 769px) {
  .TeacherStoryDetail__sidebar__playing {
    display: none;
  }
}
.TeacherStoryDetail__sidebar__playing span {
  color: #37274F;
  font-size: 0.8em;
  margin-bottom: 10px;
}
.TeacherStoryDetail__resource {
  display: flex;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  padding: 30px;
}
.TeacherStoryDetail__resource__actions {
  display: flex;
  flex-wrap: nowrap;
}
.TeacherStoryDetail__resource__actions a:last-of-type {
  margin-left: 15px;
}
.TeacherStoryDetail__resource p, .TeacherStoryDetail__resource a {
  color: #37274F;
}
.TeacherStoryDetail__resource i {
  color: #37274F;
  font-size: 1.8em;
  opacity: 0.8;
}
.TeacherStoryDetail__resource i:hover {
  opacity: 1;
}
.TeacherStoryDetail__resource__content {
  padding-right: 15px;
}
.TeacherStoryDetail__resource__content__description {
  font-size: 0.93em;
  color: #37274F;
  margin-bottom: 0;
  margin-bottom: 0;
}
.TeacherStoryDetail__resource__content__title {
  font-size: 1.33em;
  font-weight: 600;
  margin-bottom: 0;
  color: #37274F;
}
.TeacherStoryDetail__resource--locked {
  opacity: 0.5;
}
.TeacherStoryDetail__resource--locked .TeacherStoryDetail__resource__content__title:hover {
  text-decoration: none;
}
.TeacherStoryDetail__resource--locked .TeacherStoryDetail__resource__content__title:hover:after {
  content: "";
}
.TeacherStoryDetail__resource__pro {
  margin-top: 60px;
}
.TeacherStoryDetail__resource__pro__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (max-width: 992px) {
  .TeacherStoryDetail__resource__pro__header {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.TeacherStoryDetail__resource__pro__header h3 {
  color: #37274F;
  font-size: 1.875em;
  margin-bottom: 15px;
  line-height: 1.6;
}
.TeacherStoryDetail__resource__pro__header a {
  margin-top: 10px;
  transition: 250ms;
  align-self: flex-start;
  width: 225px;
  padding: 20px 35px;
  color: white;
  background-color: #37274F;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
}
.TeacherStoryDetail__resource__pro__header a:hover {
  text-decoration: none;
  filter: brightness(90%);
}
.TeacherStoryDetail .SortFilters {
  justify-content: unset;
  padding: 0 15px;
  margin-bottom: 30px;
}
@media (max-width: 992px) {
  .TeacherStoryDetail .SortFilters {
    margin: -30px -15px 30px -15px;
    border-radius: 0;
    justify-content: space-around;
  }
}
.TeacherStoryDetail .SortFilters > div {
  height: 100%;
}
@media (max-width: 992px) {
  .TeacherStoryDetail .SortFilters > div {
    width: 50%;
    display: flex;
    justify-content: center;
  }
  .TeacherStoryDetail .SortFilters > div:last-of-type {
    border-left: 1px solid #ccd0d5;
  }
}
.TeacherStoryDetail .SortFilters > div > .dropdown-menu__button {
  height: 100%;
  white-space: nowrap;
}
.TeacherStoryDetail .SortFilters__nuggetSelect, .TeacherStoryDetail .SortFilters__levelSelect {
  height: 100%;
  display: flex;
  align-items: center;
  color: #37274F;
  font-size: 1.33em;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 992px) {
  .TeacherStoryDetail .SortFilters__nuggetSelect, .TeacherStoryDetail .SortFilters__levelSelect {
    font-size: 1em;
    width: 50%;
  }
}
.TeacherStoryDetail .SortFilters__nuggetSelect i:last-of-type, .TeacherStoryDetail .SortFilters__levelSelect i:last-of-type {
  margin-left: 30px;
}
.TeacherStoryDetail .SortFilters__nuggetSelect i {
  margin-right: 15px;
}
@media (min-width: 992px) {
  .TeacherStoryDetail .SortFilters__nuggetSelect i {
    margin-right: 40px;
  }
}
.TeacherStoryDetail .SortFilters__levelSelect {
  color: #37274F;
  font-weight: 600;
  font-size: 1.33em;
  cursor: pointer;
}
@media (max-width: 992px) {
  .TeacherStoryDetail .SortFilters__levelSelect {
    font-size: 1em;
  }
}
.TeacherStoryDetail .SortFilters__levelSelect i {
  font-size: inherit;
  margin-left: 6px;
}
.TeacherStoryDetail .SortFilters__coins {
  height: 100%;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 992px) {
  .TeacherStoryDetail .SortFilters__coins {
    margin-right: 5px;
  }
}
@media (min-width: 992px) {
  .TeacherStoryDetail .SortFilters__coins {
    justify-content: flex-end;
    flex-grow: 1;
  }
}
.TeacherStoryDetail .SortFilters__coins img {
  height: 21px;
  width: auto;
  margin-right: 10px;
}
.TeacherStoryDetail .SortFilters__coins span {
  font-size: 1.33em;
  font-weight: 600;
  color: #37274F;
}
@media (max-width: 992px) {
  .TeacherStoryDetail .SortFilters__coins span {
    font-size: 1em;
  }
}
.TeacherStoryDetail .SortFilters__below {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
}
.TeacherStoryDetail .SortFilters__below p {
  margin-bottom: 0;
  color: #37274F;
  font-size: 0.93em;
  font-weight: 600;
}
@media (min-width: 992px) {
  .TeacherStoryDetail .SortFilters__below p {
    padding: 0 16px;
  }
}
@media (max-width: 992px) {
  .TeacherStoryDetail .SortFilters__below p {
    max-width: 50%;
  }
}
.TeacherStoryDetail .SortFilters__below .TeacherStoryDetail__sidebar__playing {
  display: flex;
}
.TeacherStoryDetail__activities {
  display: flex;
  flex-wrap: wrap;
}
.TeacherStoryDetail__activity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
  background-color: white;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  border-radius: 8px;
}
@media (max-width: 992px) {
  .TeacherStoryDetail__activity {
    flex-direction: column;
    align-items: flex-start;
    width: calc(50% - 8px);
  }
  .TeacherStoryDetail__activity:nth-child(odd) {
    margin-right: 15px;
  }
}
.TeacherStoryDetail__activity h3 {
  font-size: 1.33em;
  color: #37274F;
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .TeacherStoryDetail__activity h3 {
    margin-bottom: 25px;
  }
}
.TeacherStoryDetail__activity--reading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #37274F;
  height: 76px;
  margin-bottom: 2.25rem;
  margin-top: 3rem;
}
.TeacherStoryDetail__activity--reading:hover {
  text-decoration: none;
}
@media (max-width: 992px) {
  .TeacherStoryDetail__activity--reading {
    width: 100%;
    flex-direction: row;
  }
}
.TeacherStoryDetail__activity--reading div {
  display: flex;
  align-items: center;
}
.TeacherStoryDetail__activity--reading img {
  width: 88px;
  height: auto;
  margin-right: 1rem;
}
.TeacherStoryDetail__activity--reading h3, .TeacherStoryDetail__activity--reading i {
  color: white;
  margin-bottom: 0;
}
.TeacherStoryDetail__activity--reading i {
  margin-right: 5px;
  font-size: 1.2rem;
}
@media (max-width: 992px) {
  .TeacherStoryDetail__activity--reading i {
    font-size: 0.9rem;
  }
}
.TeacherStoryDetail__activity .AvatarList {
  margin-right: 15px;
}
.TeacherStoryDetail__assignments {
  margin-bottom: 2rem;
}
.TeacherStoryDetail__assignments h3 {
  color: #37274F;
  font-size: 1.33em;
  font-weight: 600;
  margin-top: 15px;
  margin-bottom: 30px;
}
.TeacherStoryDetail__assignments a {
  color: #37274F;
  font-size: 1.06em;
  font-weight: 600;
}
.TeacherStoryDetail__assignments a i {
  margin-left: 8px;
}

.MessagesOverview {
  margin-bottom: 30px;
}
@media (max-width: 769px) {
  .MessagesOverview {
    margin-bottom: 0px;
  }
}
.MessagesOverview__navBack {
  font-size: 17px;
  margin: 30px 0 50px 0;
}
.MessagesOverview__navBack a {
  color: #37274F;
}
.MessagesOverview__navBack a:hover {
  text-decoration: none;
}
.MessagesOverview__navBack .fal {
  padding-right: 10px;
}
.MessagesOverview .Block {
  background: #FFFFFF;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.MessagesHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #FBFCFD;
  position: relative;
}
.MessagesHeader:after {
  content: "";
  background: linear-gradient(180deg, #FBFCFD 0%, rgba(236, 236, 236, 0) 100%);
  height: 35px;
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: -35px;
}
.MessagesHeader__filter {
  color: #37274F;
  font-size: 20px;
  cursor: pointer;
}
.MessagesHeader__filter .fal {
  padding-left: 10px;
}
.MessagesHeader__new {
  padding: 15px 20px;
  font-size: 16px;
  cursor: pointer;
}

@media (max-width: 769px) {
  .Messages {
    margin-top: 30px;
  }
}
.Messages__container {
  overflow: hidden;
}
.Messages__list {
  height: 850px;
  overflow-y: auto;
}
.Messages__loadMore {
  display: flex;
  justify-content: center;
}
.Messages__loadMore .Block {
  padding: 12px 25px;
  color: #37274F;
}
.Messages__loading {
  color: #37274F;
}

.MessageCard {
  font-size: 14px;
  color: #37274F;
  padding: 30px 15px;
  border-bottom: 1px solid #E9EDF7;
}
.MessageCard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(68, 47, 84, 0.5);
  margin-bottom: 15px;
}
.MessageCard__date {
  font-size: 10px;
  margin-left: 10px;
}
.MessageCard__message {
  cursor: pointer;
}
.MessageCard__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.MessageCard__content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.MessageCard.selected {
  background-color: #F9FAFC;
}

.MessageDetail__navBack {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  margin: 10px 0;
}
.MessageDetail__container {
  padding: 50px;
  color: #37274F;
  font-size: 16px;
}
@media (max-width: 769px) {
  .MessageDetail__container {
    padding: 30px 15px;
  }
}
.MessageDetail__header {
  border-bottom: 1px solid #E9EDF7;
  margin-bottom: 50px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.MessageDetail__header:before {
  width: 0;
}
.MessageDetail__to {
  background: #E8EBF3;
  border-radius: 3px;
  color: #A8A2AC;
  font-size: 10px;
  width: 25px;
}
.MessageDetail__class {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}
.MessageDetail__date {
  font-size: 12px;
  color: rgba(68, 47, 84, 0.5);
}
.MessageDetail__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}
.MessageDetail__actions {
  background: #F9F9F9;
  border: 1px solid #E9EDF7;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 10px 20px;
  width: 80px;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.MessageDetail__actions .far {
  cursor: pointer;
}
.MessageDetail .AvatarList {
  margin: 15px 0;
}
@media (max-width: 769px) {
  .MessageDetail .AvatarList {
    margin: 15px;
  }
}
.MessageDetail .AvatarList .avatar {
  width: 40px;
  height: 40px;
  font-size: 12px;
}

.SubscriptionMessage {
  position: relative;
  background-color: #FD5B24;
  padding: 60px 0 10px 0;
  color: white;
  margin-bottom: 40px;
}
@media (max-width: 992px) {
  .SubscriptionMessage {
    padding: 60px 0 10px 0;
  }
}
.SubscriptionMessage:after {
  content: "";
  background-image: url(https://assets.senorwooly.com/static/images/orange-wave.svg);
  position: absolute;
  width: 100%;
  height: 3em;
  display: block;
  left: 0;
  background-size: 100% auto;
  background-position: left;
  background-repeat: no-repeat;
}
@media (max-width: 992px) {
  .SubscriptionMessage:after {
    bottom: -35px;
    background-size: 101% auto;
  }
}
.SubscriptionMessage__image--desktop {
  display: block;
}
@media (max-width: 992px) {
  .SubscriptionMessage__image--desktop {
    display: none;
  }
}
.SubscriptionMessage__image--mobile {
  display: none;
  width: 100%;
  margin-top: -250px;
  z-index: -1;
}
@media (max-width: 992px) {
  .SubscriptionMessage__image--mobile {
    display: block;
  }
}
.SubscriptionMessage .row {
  display: flex;
  flex-wrap: wrap;
}
.SubscriptionMessage img {
  width: 100%;
  height: auto;
}
@media (max-width: 992px) {
  .SubscriptionMessage img {
    display: none;
  }
}
@media (min-width: 992px) {
  .SubscriptionMessage__content {
    padding-left: 30px;
  }
}
.SubscriptionMessage__content h1 {
  color: white;
  margin-bottom: 10px;
}
.SubscriptionMessage__content p {
  margin-bottom: 35px;
}
.SubscriptionMessage__content ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.SubscriptionMessage__content ul li {
  width: 50%;
  font-weight: 600;
  margin-bottom: 10px;
}
.SubscriptionMessage__content ul li i {
  margin-right: 15px;
}
@media (max-width: 992px) {
  .SubscriptionMessage__content ul li {
    width: 100%;
  }
}
.SubscriptionMessage__action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (max-width: 992px) {
  .SubscriptionMessage__action {
    justify-content: flex-start;
    margin-top: 10px;
  }
}
.SubscriptionMessage__action a {
  transition: 250ms;
  width: 225px;
  padding: 20px 15px;
  color: white;
  background-color: #37274F;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
}
.SubscriptionMessage__action a:hover {
  text-decoration: none;
  filter: brightness(90%);
}
.SubscriptionMessage.expiring {
  padding: 30px 0;
}
@media (max-width: 992px) {
  .SubscriptionMessage.expiring {
    margin-bottom: 0;
  }
}
.SubscriptionMessage.expiring:after {
  display: none;
}
@media (min-width: 992px) {
  .SubscriptionMessage.expiring .SubscriptionMessage__content {
    padding-left: 15px;
  }
}
@media (max-width: 1199px) {
  .SubscriptionMessage.expiring .SubscriptionMessage__content h1 {
    font-size: 25px;
  }
}
.SubscriptionMessage.expiring .SubscriptionMessage__content p {
  margin-bottom: 0;
}

.AccountSettings {
  color: #37274F;
  font-size: 16px;
}
.AccountSettings__header {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 64px;
}
.AccountSettings .divider {
  border: 1px solid #D4DDEF;
  margin: 35px 0px;
}
.AccountSettings .TeacherForm__input {
  margin-bottom: 0;
}
.AccountSettings__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #37274F;
}
@media (min-width: 992px) {
  .AccountSettings__title {
    margin-bottom: 1.6rem;
  }
}
.AccountSettings__title--subTitle {
  font-size: 16px;
  margin-bottom: 14px;
}
.AccountSettings__desc {
  max-width: 550px;
  margin-bottom: 2rem;
  font-size: 1rem;
}
@media (min-width: 992px) {
  .AccountSettings__desc {
    font-size: 1.125rem;
  }
}

.Package {
  background: #FFFFFF;
  border: 1px solid #DBE0EA;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 20px;
  font-weight: 600;
  font-size: 14px;
}
.Package__number {
  font-size: 40px;
}

.Checkout {
  margin-bottom: 40px;
}
.Checkout__header {
  margin-bottom: 80px;
}
.Checkout__ask {
  font-size: 20px;
  font-weight: 600;
}
.Checkout__inUse {
  background: #FDFEFE;
  border: 1px solid #DBE0EA;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 12px;
  padding: 14px 16px;
}

.RedeemCode {
  background: #ECF1FA;
  border: 1px solid #D2D5DC;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 40px;
}
.RedeemCode__header {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
}
.RedeemCode__content {
  flex-wrap: wrap;
}
.RedeemCode .TeacherForm__input {
  margin: 20px 17px 20px 0px;
}
.RedeemCode .TeacherForm__submit {
  margin: 10px 0;
}

.CurrentSubscription {
  font-size: 16px;
  margin-bottom: 40px;
  position: relative;
}
.CurrentSubscription__header {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
}
.CurrentSubscription__alert {
  border-radius: 8px;
  color: white;
  padding: 17px 19px;
}
.CurrentSubscription__alert--long {
  background-color: #71ae71;
}
.CurrentSubscription__alert--medium {
  background-color: #FD5B24;
}
.CurrentSubscription__alert--short {
  background-color: #ff4141;
}
.CurrentSubscription__alert a {
  text-decoration: underline;
  color: white;
}
.CurrentSubscription__current {
  background: #FDFEFE;
  border: 1px solid #DBE0EA;
  box-sizing: border-box;
  border-radius: 8px;
  margin: 24px 0;
  padding: 30px 15px;
}
.CurrentSubscription__current img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}
@media (max-width: 992px) {
  .CurrentSubscription__current img {
    margin-bottom: 2rem;
  }
}
.CurrentSubscription__current .selected {
  font-weight: 600;
  margin-left: 1rem;
}
.CurrentSubscription__current--selected {
  border: 1px solid #442F54;
}
.CurrentSubscription__title, .CurrentSubscription__price {
  font-weight: 600;
  font-size: 20px;
}
.CurrentSubscription__pricing p {
  margin-bottom: 25px;
}
.CurrentSubscription__pricing p strong {
  display: block;
  margin-bottom: 5px;
}
.CurrentSubscription__pricing p span {
  font-size: 12px;
}
.CurrentSubscription__priceLabel {
  position: absolute;
  top: 1px;
  right: 1px;
  background-color: #FF7041;
  padding: 4px 12px;
  color: white;
  font-weight: 600;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
}
.CurrentSubscription__features {
  color: #609660;
  font-weight: 600;
  padding: 0;
}
.CurrentSubscription__features .far {
  margin-right: 10px;
}
.CurrentSubscription__features .crossout {
  text-decoration-line: line-through;
  color: rgba(68, 47, 84, 0.45);
}
.CurrentSubscription__features .crossout .fa {
  margin-right: 10px;
  width: 16px;
}
.CurrentSubscription__contact {
  background: #FDFEFE;
  border: 1px solid #DBE0EA;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 28px 23px;
  flex-wrap: wrap;
}

.ChangePersonalInfoForm {
  margin-bottom: 40px;
}
.ChangePersonalInfoForm__header {
  font-size: 20px;
  font-weight: 600;
}
.ChangePersonalInfoForm__school .fal {
  position: absolute;
  right: 30px;
  top: 50%;
  margin-top: -8px;
  cursor: pointer;
}
.ChangePersonalInfoForm__avatar__upload {
  white-space: nowrap;
  cursor: pointer;
}
.ChangePersonalInfoForm__avatar__upload:hover {
  text-decoration: underline;
}
.ChangePersonalInfoForm__avatar__image {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 70% !important;
}
.ChangePersonalInfoForm__avatar img {
  height: 38px;
  width: 38px;
}

.ChangePasswordForm {
  margin-bottom: 40px;
}
.ChangePasswordForm__header {
  font-size: 20px;
  font-weight: 600;
}

.EmailPreferences {
  margin-bottom: 40px;
}
.EmailPreferences__header {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
}

.EditingInput {
  background: #FFFFFF;
  border: 1px solid #DBE0EA;
  box-shadow: inset 0px 2px 2px rgba(45, 45, 45, 0.13);
  border-radius: 8px;
  font-size: 16px;
  padding: 12px 15px;
}
.EditingInput__placeholder {
  font-size: 12px;
  opacity: 0.7;
}
.EditingInput__input {
  font-weight: 600;
  border: none;
  width: 100%;
}
.EditingInput__input:focus {
  outline: none;
}
.EditingInput__input::placeholder {
  color: #37274F;
  font-size: 18px;
  font-weight: 400;
  opacity: 0.7;
}

.UploadAvatar__message {
  color: rgba(68, 47, 84, 0.5);
  font-size: 12px;
  padding: 10px 15px;
}

.QuestionsFlyer {
  background: #FFFFFF;
  border: 1px solid #D4DDEF;
  box-sizing: border-box;
  border-radius: 8px;
  color: #37274F;
  font-size: 15px;
  padding: 20px 30px;
  margin: 44px 0;
}
.QuestionsFlyer__header {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 30px;
}
.QuestionsFlyer__header img {
  height: 55px;
  margin-right: 20px;
}
.QuestionsFlyer__footer {
  font-size: 14px;
  text-decoration: underline;
  margin-top: 30px;
}
.QuestionsFlyer__footer a {
  margin-left: 15px;
  color: #37274F;
}

.Connections {
  margin-bottom: 20px;
}
.Connections__header {
  font-size: 20px;
  font-weight: 600;
}
.Connections__description {
  font-size: 1.125rem;
  max-width: 550px;
  margin-bottom: 2rem;
}

.ConnectionGroup {
  margin-bottom: 15px;
}
.ConnectionGroup__header {
  font-size: 16px;
  font-weight: 600;
}

.Connection {
  background: #FFFFFF;
  border: 1px solid #D4DDEF;
  box-sizing: border-box;
  border-radius: 8px;
  color: #37274F;
  font-size: 15px;
  padding: 10px 15px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
}
.Connection--inactive .Connection__provider {
  opacity: 0.5;
}
.Connection__provider {
  display: flex;
  align-items: center;
}
.Connection__icon {
  width: 40px;
  height: 40px;
  background-size: contain;
}
.Connection__name {
  margin-left: 10px;
  font-size: 1.15em;
  color: #37274F;
  font-weight: 700;
}
.Connection__details {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.Connection__button {
  transition: 250ms;
  font-size: 1em;
  padding: 5px 10px;
  background-color: #37274F;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  border: 0;
  float: right;
  min-width: 80px;
  min-height: 40px;
}
.Connection__button a {
  color: white;
}

.ConnectionProvider__google .Connection__icon {
  background-image: url("https://assets.senorwooly.com/static/images/brands/google.svg");
}
.ConnectionProvider__classlink .Connection__icon {
  background-image: url("https://assets.senorwooly.com/static/images/brands/classlink.svg");
}
.ConnectionProvider__google-classroom .Connection__icon {
  background-image: url("https://assets.senorwooly.com/static/images/brands/google-classroom.png");
}

.ChangeSchoolModal {
  font-size: 16px;
}
@media (max-width: 992px) {
  .ChangeSchoolModal .modal-title {
    font-size: 1.15rem !important;
  }
}
.ChangeSchoolModal__message {
  display: flex;
  flex-direction: column;
}
.ChangeSchoolModal__message p {
  margin-bottom: 0;
}
.ChangeSchoolModal__message.reverse {
  flex-direction: column-reverse;
}
.ChangeSchoolModal__message.reverse p {
  font-size: 12px;
  color: #B9B9B9;
}
.ChangeSchoolModal__adding {
  font-weight: 600;
  cursor: pointer;
  margin-top: 5px;
}
.ChangeSchoolModal__adding i {
  font-size: 16px;
  margin-left: 8px;
}
.ChangeSchoolModal a {
  color: #37274F;
  text-decoration: underline;
}
.ChangeSchoolModal .modal-dialog {
  max-width: 543px;
  overflow: visible;
}
.ChangeSchoolModal .modal-dialog .modal-header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.ChangeSchoolModal .modal-dialog .modal-body {
  padding-top: 50px;
  padding-bottom: 42px;
}
@media (max-width: 992px) {
  .ChangeSchoolModal .modal-dialog .modal-body {
    display: flex;
    align-items: center;
  }
}
.ChangeSchoolModal__noSchools {
  padding: 20px;
  border: 1px solid #FD5B24;
  background-color: rgba(255, 112, 65, 0.8);
  color: white;
  text-align: left;
  border-radius: 8px;
  margin-bottom: 28px;
  cursor: pointer;
}
.ChangeSchoolModal__noSchools p {
  margin-bottom: 0;
}
.ChangeSchoolModal .text-center {
  width: 85%;
}
@media (max-width: 992px) {
  .ChangeSchoolModal .text-center {
    width: 100%;
  }
}
.ChangeSchoolModal .text-left {
  text-align: left;
  line-height: 1.8;
}
.ChangeSchoolModal .TeacherForm__input {
  margin-bottom: 20px;
}
.ChangeSchoolModal .TeacherForm__submit {
  margin-top: 10px;
}
.ChangeSchoolModal .TeacherForm__cancel {
  margin-right: 20px;
  padding: 13px 15px;
  width: 175px;
}
.ChangeSchoolModal--right {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 26px;
  border-bottom: 1px solid #DBDFEA;
  margin-bottom: 26px;
}
.ChangeSchoolModal--center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ChangeSchoolModal--center span {
  color: #B9B9B9;
  font-size: 0.8rem;
  margin-top: 18px;
}
.ChangeSchoolModal__back {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 2px;
  color: #37274F;
}
@media (max-width: 430px) {
  .ChangeSchoolModal__back {
    left: 15px;
    margin-top: 0;
  }
}
.ChangeSchoolModal__back i {
  margin-right: 10px;
  font-size: 22px;
}

.connections {
  padding: 0;
  margin-bottom: 2rem;
}
.connections__item {
  display: grid;
  grid-template-columns: 60px 1fr 115px;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border: 1px solid #D2D5DC;
  border-radius: 8px;
  padding: 1rem 0.6rem 1rem 1rem;
  height: 75px;
}
.connections__item--inactive img, .connections__item--inactive h4, .connections__item--inactive p {
  opacity: 0.65;
}
@media (min-width: 550px) {
  .connections__item {
    grid-template-columns: 0.6fr 1fr 115px;
  }
}
@media (min-width: 992px) {
  .connections__item {
    grid-template-columns: 0.85fr 1fr 0.75fr;
    padding: 1rem 1.6rem;
  }
}
.connections__item:active, .connections__item:focus {
  border-bottom: 1px solid #D2D5DC;
}
.connections__item:not(:last-of-type) {
  margin-bottom: 1rem;
}
.connections__item__provider {
  display: flex;
  align-items: center;
}
.connections__item__provider img {
  height: auto;
  width: 35px;
  margin-right: 1rem;
}
@media (min-width: 992px) {
  .connections__item__provider img {
    height: 35px;
    width: auto;
  }
}
.connections__item__provider h4 {
  display: none;
  text-transform: capitalize;
  color: #37274F;
  margin-bottom: 0;
  font-size: 1rem;
}
@media (min-width: 550px) {
  .connections__item__provider h4 {
    display: block;
  }
}
@media (min-width: 992px) {
  .connections__item__provider h4 {
    font-size: 1.25rem;
  }
}
.connections__item p {
  margin-bottom: 0;
  font-size: 0.75rem;
}
.connections__item p span {
  display: block;
}
@media (min-width: 550px) {
  .connections__item p {
    font-size: 0.85rem;
  }
}
@media (min-width: 992px) {
  .connections__item p {
    font-size: 1rem;
  }
  .connections__item p span {
    display: inline-block;
  }
  .connections__item p span:not(:last-of-type):after {
    content: ",";
    margin-right: 2px;
  }
}
.connections__item button {
  justify-self: flex-end;
}
@media (max-width: 992px) {
  .connections__item button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 102px;
    height: 42px;
    padding: unset;
  }
}

.StudentActivityModal {
  font-size: 14px;
  color: #37274F;
}
.StudentActivityModal__back {
  font-weight: 600;
  font-size: 16px;
  background-color: white;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}
.StudentActivityModal__back .far {
  margin-right: 10px;
}
@media (max-width: 992px) {
  .StudentActivityModal__back {
    font-size: 0.8em;
  }
}
.StudentActivityModal__container {
  max-width: 900px;
  width: 94vw;
  background-color: white;
  border-radius: 8px;
  margin-top: 20px;
  padding: 20px 35px;
}
@media (max-width: 769px) {
  .StudentActivityModal__container {
    padding: 20px 10px;
  }
}
.StudentActivityModal__header {
  margin-bottom: 35px;
}
.StudentActivityModal__header .dropdown-menu__button {
  margin-right: 25px;
}
.StudentActivityModal__header .dropdown-menu__button .StudentActivityModal__filter {
  align-items: center;
  display: flex;
}
.StudentActivityModal__header .dropdown-menu__button .class {
  display: inline-block;
}
@media (max-width: 769px) {
  .StudentActivityModal__header .dropdown-menu__button {
    font-size: 13px;
  }
  .StudentActivityModal__header .dropdown-menu__button .class {
    max-width: 75px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (max-width: 769px) {
  .StudentActivityModal__header {
    flex-direction: column;
    align-items: flex-start !important;
  }
}
.StudentActivityModal__title {
  font-size: 32px;
  font-weight: 600;
}
@media (max-width: 992px) {
  .StudentActivityModal__title {
    font-size: 1.33em;
  }
}
.StudentActivityModal__story {
  font-size: 16px;
  font-weight: 600;
}
@media (max-width: 992px) {
  .StudentActivityModal__story {
    font-size: 1em;
    margin-bottom: 25px;
  }
}
.StudentActivityModal__filter {
  cursor: pointer;
}
.StudentActivityModal__filter .fal {
  margin-left: 10px;
}
.StudentActivityModal .modal-dialog {
  display: flex;
  justify-content: center;
  width: unset !important;
  margin-top: 75px;
}
.StudentActivityModal .modal-content {
  background-color: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
  border: none;
}
.StudentActivityModal .modal-backdrop.in {
  opacity: 0.6;
}
.StudentActivityModal .Cell {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.StudentActivityModal .Cell__avatar {
  width: 150%;
  height: auto;
  object-fit: fill;
  object-position: -10px -5px;
}
.StudentActivityModal .Cell .avatar {
  height: 36px;
  width: 36px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 20px;
  min-width: 36px;
}
@media (max-width: 769px) {
  .StudentActivityModal .Cell .avatar {
    margin-right: 10px;
  }
}
.StudentActivityModal .Cell__name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.StudentActivityModal .ReactTable.Table {
  margin-left: -35px;
  margin-right: -35px;
}
.StudentActivityModal .ReactTable.Table .rt-tr {
  padding: 0 35px;
}
@media (max-width: 769px) {
  .StudentActivityModal .ReactTable.Table .rt-tr {
    padding: 0 10px;
  }
}
.StudentActivityModal .ReactTable.Table .rt-thead {
  padding: 0;
}
.StudentActivityModal .ReactTable.Table .rt-th.title {
  font-size: 16px;
}
@media (max-width: 992px) {
  .StudentActivityModal .ReactTable.Table .rt-th.title {
    font-size: 0.8em;
  }
}
.StudentActivityModal .ReactTable.Table .rt-td:first-of-type {
  margin-right: 0;
}
.StudentActivityModal .ReactTable.Table .rt-td.title {
  font-size: 16px;
}
@media (max-width: 992px) {
  .StudentActivityModal .ReactTable.Table .rt-td.title {
    font-size: 0.8em;
  }
}
@media (max-width: 992px) {
  .StudentActivityModal .ReactTable.Table .rt-td {
    font-size: 0.8em;
  }
}
.StudentActivityModal .ReactTable.Table .rt-tr-group {
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
  border-radius: 0;
  height: unset;
}
.StudentActivityModal .ReactTable.Table .NoRecordIndicator {
  margin: 0 35px;
}
@media (max-width: 769px) {
  .StudentActivityModal .ReactTable.Table .NoRecordIndicator {
    margin: 0 10px;
  }
}
@media (max-width: 769px) {
  .StudentActivityModal .ReactTable.Table {
    margin: 0 -10px;
  }
  .StudentActivityModal .ReactTable.Table .rt-thead {
    padding: 0;
  }
  .StudentActivityModal .ReactTable.Table .rt-td:first-of-type {
    margin-right: 0;
  }
}
.StudentActivityModal .TablePagination {
  justify-content: center;
}
.StudentActivityModal .TablePagination .pagination {
  margin: 0;
}
.StudentActivityModal .SelectOption .dropdown-menu {
  position: absolute;
  right: 0px;
  left: auto;
}
@media (max-width: 769px) {
  .StudentActivityModal .modal {
    top: 50px;
  }
}

.Footer {
  font-size: 12px;
  color: #37274F;
  margin: 10px 0;
}
.Footer a {
  color: #37274F;
  text-decoration: none;
  margin-left: 40px;
  margin-bottom: 10px;
}
@media (max-width: 769px) {
  .Footer a {
    margin-left: 9px;
  }
}
.Footer__other {
  font-size: 14px;
}

.footerMarkt {
  padding: 3rem 0 3rem 0;
  background-color: #410064;
}
@media (min-width: 992px) {
  .footerMarkt {
    padding: 6rem 0 3rem 0;
  }
}
.footerMarkt ul {
  padding: 0;
  margin: 0;
}
.footerMarkt ul li {
  cursor: pointer;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}
.footerMarkt ul li:active, .footerMarkt ul li:focus, .footerMarkt ul li:hover {
  text-decoration: none;
  border-bottom: 0;
}
@media (min-width: 992px) {
  .footerMarkt ul li:not(:last-of-type) {
    margin-bottom: 1rem;
  }
}
.footerMarkt ul li a {
  font-size: 1rem;
  color: white;
  font-weight: 600;
}
@media (min-width: 992px) {
  .footerMarkt ul li a {
    font-size: 1.33rem;
  }
}
.footerMarkt__newsletter {
  margin-bottom: 4rem;
}
@media (max-width: 992px) {
  .footerMarkt__newsletter {
    margin-top: 4rem;
  }
}
.footerMarkt__newsletter h3 {
  font-size: 1.45rem;
  color: white;
  margin-bottom: 0.7rem;
}
@media (min-width: 992px) {
  .footerMarkt__newsletter h3 {
    font-size: 2rem;
  }
}
.footerMarkt__newsletter p {
  font-size: 1rem;
  color: white;
}
@media (min-width: 992px) {
  .footerMarkt__newsletter p {
    font-size: 1.33rem;
  }
}
.footerMarkt__newsletter p span {
  color: #FD5B24;
}
.footerMarkt__newsletter form {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .footerMarkt__newsletter form {
    flex-direction: row;
    max-height: 52px;
  }
}
.footerMarkt__newsletter form input {
  background-color: white;
  border: 1px solid #707070;
  border-radius: 26px;
  margin-right: 0.7rem;
  padding: 1rem;
  width: 100%;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .footerMarkt__newsletter form input {
    max-width: 367px;
    margin-bottom: 0;
  }
}
.footerMarkt__newsletter form input::placeholder {
  color: #c9c9c9;
}
.footerMarkt__newsletter form button {
  width: 100%;
}
@media (min-width: 992px) {
  .footerMarkt__newsletter form button {
    width: unset;
    min-width: 135px;
  }
}
.footerMarkt__social {
  display: flex;
  align-items: center;
}
@media (max-width: 992px) {
  .footerMarkt__social {
    justify-content: center;
  }
}
.footerMarkt__social a {
  position: relative;
}
.footerMarkt__social a:not(:last-of-type) {
  padding-right: 1.5rem;
  margin-right: 1.5rem;
}
.footerMarkt__social a:not(:last-of-type)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 50%;
  background-color: white;
  width: 2px;
}
.footerMarkt__social a img {
  max-width: 120px;
}
.footerMarkt__social a i {
  color: white;
  font-size: 2rem;
}
.footerMarkt__copyright {
  display: block;
  margin-top: 3rem;
  font-size: 1.33rem;
  color: white;
  font-weight: 400;
}
@media (max-width: 992px) {
  .footerMarkt__copyright {
    margin-top: 4rem;
    text-align: center;
    font-size: 0.9rem;
  }
}

.ConfirmationModal__message {
  text-align: center;
}
.ConfirmationModal .modal-backdrop {
  background-color: #37274F;
  opacity: 80%;
}
.ConfirmationModal .modal-backdrop.in {
  opacity: 0.8;
}
.ConfirmationModal .modal-dialog {
  max-width: 530px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: auto;
}
@media (max-width: 769px) {
  .ConfirmationModal .modal-dialog {
    width: 90vw !important;
    margin: 0;
    margin-top: 100px;
    left: 0;
    transform: translate(5%, -90%);
  }
}
.ConfirmationModal .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 769px) {
  .ConfirmationModal .modal-header {
    height: 8vh;
    border-bottom: none;
  }
}
.ConfirmationModal .modal-header h4 {
  color: #37274F;
}
@media (max-width: 769px) {
  .ConfirmationModal .modal-header h4 {
    font-size: 1rem;
  }
}
.ConfirmationModal .modal-body {
  display: flex;
  justify-content: space-evenly;
  margin: 15px 0;
  font-size: 1rem;
}
@supports (-ms-ime-align: auto) {
  .ConfirmationModal .modal-body {
    justify-content: space-around;
  }
}
@media (max-width: 769px) {
  .ConfirmationModal .modal-body {
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    background-color: #f8fafe;
  }
}
.ConfirmationModal .modal-body .btn-delete {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1rem;
  color: #37274F;
  border-radius: 6px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 10px 20px;
  width: 189px;
}
.ConfirmationModal .modal-body .btn-delete:focus {
  outline: none;
}
.ConfirmationModal .modal-body .btn-delete.right-option {
  background-color: #37274F;
  color: white;
}
@media (max-width: 769px) {
  .ConfirmationModal .modal-body .btn-delete {
    font-size: 1rem;
    margin: 5px 0;
    width: 50vw;
    align-self: center;
  }
  .ConfirmationModal .modal-body .btn-delete:hover {
    background-color: #37274F;
    color: white;
  }
}
.ConfirmationModal .modal-body .TeacherForm__radio {
  justify-content: center;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}
.ConfirmationModal__title {
  font-size: 22px;
}
.ConfirmationModal__message {
  color: #37274F;
  font-size: 16px !important;
  text-align: center;
  width: 375px;
}
@media (max-width: 769px) {
  .ConfirmationModal__message {
    font-size: 14px !important;
    width: 100%;
  }
}

.UnlinkConfirmationModal__message {
  text-align: center;
}
.UnlinkConfirmationModal .modal-backdrop {
  background-color: #37274F;
  opacity: 80%;
}
.UnlinkConfirmationModal .modal-backdrop.in {
  opacity: 0.8;
}
.UnlinkConfirmationModal .modal-dialog {
  max-width: 530px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: auto;
}
@media (max-width: 769px) {
  .UnlinkConfirmationModal .modal-dialog {
    width: 90vw !important;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .text {
    text-align: center;
    font-size: 15px !important;
    text-align: center;
    display: flex;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .text .caution-image {
    font-size: 15px !important;
  }
}
@media (max-width: 768px) {
  .text .shareableLink {
    font-size: 10px !important;
  }
}
@media (max-width: 768px) {
  .text .movieIcon {
    margin-right: -77px;
  }
}
.text .shareablelink-container {
  width: 90%;
}
.text .modal-header {
  height: 90px;
  background-color: #f8fafe;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 769px) {
  .text .modal-header {
    height: 8vh;
    border-bottom: none;
  }
}
.text .modal-header h4 {
  color: #37274F;
}
@media (max-width: 769px) {
  .text .modal-header h4 {
    font-size: 1rem;
  }
}
.text .modal-body {
  display: flex;
  justify-content: space-evenly;
  margin: 15px 0;
  font-size: 1rem;
}
@supports (-ms-ime-align: auto) {
  .text .modal-body {
    justify-content: space-around;
  }
}
@media (max-width: 769px) {
  .text .modal-body {
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
  }
}
.text .modal-body .btn-delete {
  text-transform: capitalize;
  border-radius: 8px;
  background-color: white;
  font-weight: 700;
  font-size: 1rem;
  color: #37274F;
  border-radius: 6px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  padding: 10px 20px;
  width: 189px;
}
.text .modal-body .btn-delete:focus {
  outline: none;
}
.text .modal-body .btn-delete.right-option {
  background-color: #37274F;
  color: white;
}
@media (max-width: 769px) {
  .text .modal-body .btn-delete {
    font-size: 1rem;
    margin: 5px 0;
    width: 50vw;
    align-self: center;
  }
  .text .modal-body .btn-delete:hover {
    background-color: #37274F;
    color: white;
  }
}
.text .modal-body .TeacherForm__radio {
  justify-content: center;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}
.text__title {
  font-size: 22px;
}
.text__message {
  color: #37274F;
  font-size: 16px !important;
  text-align: center;
  width: 375px;
}
@media (max-width: 769px) {
  .text__message {
    font-size: 14px !important;
    width: 100%;
  }
}

.p-v {
  padding-top: 12px;
  padding-bottom: 12px;
}

.m-v {
  margin-top: 12px;
  margin-bottom: 12px;
}

.no-floating {
  float: unset;
}

.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-v-center {
  align-items: center;
}
.flex-h-center {
  justify-content: center;
}
.flex-vh-center {
  align-items: center;
  justify-content: center;
}
.flex-right {
  justify-content: flex-end;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.no-p-l {
  padding-left: 0;
}

.no-p-r {
  padding-right: 0;
}

.no-p-h {
  padding-right: 0;
  padding-left: 0;
}

.flex-scroll-y {
  display: flex;
  overflow-y: scroll;
}

.position-relative {
  position: relative;
}

.wysiwyg h1, .wysiwyg h2, .wysiwyg p {
  color: #37274F;
}
.wysiwyg h1 {
  font-size: 3.33rem;
  margin-bottom: 30px;
}
@media (max-width: 992px) {
  .wysiwyg h1 {
    font-size: 1.75rem;
  }
}
.wysiwyg h2 {
  font-size: 3.33rem;
  margin-bottom: 30px;
}
@media (max-width: 992px) {
  .wysiwyg h2 {
    font-size: 1.35rem;
  }
}
.wysiwyg h3 {
  font-size: 1.6rem;
  color: #FD5B24;
  line-height: 35px;
}
@media (max-width: 992px) {
  .wysiwyg h3 {
    font-size: 1.25rem;
  }
}
.wysiwyg p {
  font-size: 1.2rem;
  line-height: 1.7;
}
@media (max-width: 992px) {
  .wysiwyg p {
    font-size: 0.9rem;
  }
}
.wysiwyg__img {
  max-width: 100%;
}
@media (max-width: 767px) {
  .wysiwyg__img--big {
    max-height: 300px;
    width: auto;
    margin-bottom: 60px;
  }
}
.wysiwyg__img--medium {
  height: 190px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
@media (max-width: 767px) {
  .wysiwyg__img--medium {
    margin-bottom: 20px;
  }
}
.wysiwyg__img--small {
  max-height: 130px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.wysiwyg__link--underline {
  transition: 200ms;
  color: #37274F;
  text-decoration: underline;
  font-weight: 600;
}
.wysiwyg__link--underline:hover, .wysiwyg__link--underline:focus, .wysiwyg__link--underline:active {
  color: #FD5B24;
  text-decoration: underline;
}
.wysiwyg__link--arrow {
  transition: 200ms;
  color: #37274F;
  text-decoration: underline;
  font-weight: 600;
  font-size: 1.2rem;
}
.wysiwyg__link--arrow:hover, .wysiwyg__link--arrow:focus, .wysiwyg__link--arrow:active {
  color: #37274F;
  text-decoration: underline;
}
.wysiwyg__link--arrow:after {
  display: inline-block;
  font-family: "Font Awesome 5 Pro";
  content: "\f061";
  color: #37274F;
  text-decoration: none;
  margin-left: 15px;
}
.wysiwyg__link--button {
  transition: 200ms;
  display: inline-block;
  min-width: 206px;
  padding: 1.15rem 4rem;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 3px;
  font-weight: bold;
}
@media (max-width: 992px) {
  .wysiwyg__link--button {
    min-width: unset;
    font-size: 1rem;
  }
}
@media (max-width: 500px) {
  .wysiwyg__link--button {
    min-width: 100%;
  }
}
.wysiwyg__link--button--small {
  min-width: 166px;
  padding: 1.15rem 2.6rem;
}
@media (max-width: 992px) {
  .wysiwyg__link--button--small {
    min-width: unset;
  }
}
@media (max-width: 500px) {
  .wysiwyg__link--button--small {
    min-width: 100%;
  }
}
.wysiwyg__link--button:hover, .wysiwyg__link--button:active, .wysiwyg__link--button:focus {
  filter: brightness(90%);
  text-decoration: none;
}
.wysiwyg__link--button.orange {
  background-color: #FD5B24;
  color: white;
  box-shadow: 0 2px 0 0 #c4532e;
}
.wysiwyg__link--button.purple {
  background-color: #37274F;
  color: white;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}
@media (max-width: 767px) {
  .wysiwyg__buttons a:first-of-type {
    margin-bottom: 20px;
  }
}
@media (min-width: 500px) {
  .wysiwyg__buttons a:first-of-type {
    margin-right: 20px;
  }
}
.wysiwyg__number {
  font-size: 2.6rem;
  font-weight: 400;
  color: #37274F;
  margin-right: 20px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .wysiwyg__number {
    font-size: 2rem;
  }
}
@media (min-width: 767px) {
  .wysiwyg--items-center {
    display: flex;
    align-items: center;
  }
}
.wysiwyg--items-center-always {
  display: flex;
  align-items: center;
}
@media (min-width: 767px) {
  .wysiwyg--justify-center {
    display: flex;
    justify-content: center;
  }
}
.wysiwyg--bg-green {
  background-color: #71ae71;
  padding: 50px 0;
}
.wysiwyg--text-lucky {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
}
@media (min-width: 767px) {
  .wysiwyg--text-center {
    text-align: center;
  }
}
.wysiwyg--text-green {
  color: #71ae71;
}
.wysiwyg--text-white {
  color: white !important;
}
.wysiwyg--text-purple {
  color: #37274F !important;
}
@media (max-width: 767px) {
  .wysiwyg--hidden-sm {
    display: none;
  }
}
.wysiwyg--bb-1 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.wysiwyg--m-100 {
  margin-bottom: 100px;
}
.wysiwyg--m-60 {
  margin-bottom: 60px;
}
.wysiwyg--m-40 {
  margin-bottom: 40px;
}
.wysiwyg--m-30 {
  margin-bottom: 30px;
}
.wysiwyg--m-20 {
  margin-bottom: 20px;
}
.wysiwyg--m-0 {
  margin-bottom: 0;
}
@media (min-width: 767px) {
  .wysiwyg--ml-30 {
    margin-left: 30px;
  }
}
.wysiwyg--mx-none {
  margin-left: unset;
  margin-right: unset;
}
@media (max-width: 767px) {
  .wysiwyg--pt-100 {
    margin-top: -50px;
  }
}
@media (min-width: 767px) {
  .wysiwyg--pt-100 {
    padding-top: 60px;
  }
}
.wysiwyg--pb-50 {
  padding-bottom: 50px;
}

.Glossary__toolbar {
  position: fixed;
  top: 60px;
  height: 46px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border-top: 1px solid #392B41;
  border-bottom: 1px solid #392B41;
  background-color: #130221;
}
.Glossary__toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 250ms;
  background-color: transparent;
  border: 0;
  border-right: 1px solid #392B41;
}
.Glossary__toolbar button:first-of-type {
  font-size: 16px;
}
.Glossary__toolbar button:first-of-type span {
  font-size: 23px;
  margin-left: 6px;
}
.Glossary__toolbar button:last-of-type {
  font-size: 23px;
}
.Glossary__toolbar button:last-of-type span {
  font-size: 16px;
  margin-left: 6px;
}
.Glossary__toolbar button:hover {
  background-color: #1F0F2C;
}
.Glossary__toolbar button:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.Glossary__toolbar button:focus, .Glossary__toolbar button:active {
  outline: none;
}
.Glossary__toolbar__search {
  position: relative;
  display: flex;
  align-items: center;
}
.Glossary__toolbar__search input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: white;
  border: 0;
  padding-left: 15px;
  padding-right: 50px;
}
@media (min-width: 992px) {
  .Glossary__toolbar__search input {
    padding-right: 62px;
  }
}
.Glossary__toolbar__search input:focus, .Glossary__toolbar__search input:active {
  outline: none;
}
.Glossary__toolbar__search input:focus + i {
  opacity: 1;
}
.Glossary__toolbar__search i {
  cursor: pointer;
  transition: 200ms;
  position: absolute;
  right: 29px;
  opacity: 0.65;
}
@media (min-width: 992px) {
  .Glossary__toolbar__search i {
    right: 35px;
  }
}
.Glossary__toolbar__search.active i {
  opacity: 1;
}

.Glossary__items {
  margin-top: 46px;
}

.Glossary__item {
  padding: 10px 32px;
  border-bottom: 1px solid #392B41;
}
@media (min-width: 992px) {
  .Glossary__item {
    padding: 15px 40px;
  }
}
.Glossary__item span {
  display: block;
}
.Glossary__item span:first-of-type {
  color: #FD5B24;
}

.GlossaryAdmin__toggle {
  position: absolute;
  right: 15px;
  top: 0;
  display: flex;
  align-items: center;
  padding: 17px 20px;
  appearance: none;
  background-color: white;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  color: #37274F;
  font-weight: 600;
  border-radius: 8px;
  border: 0;
}
@media (min-width: 992px) {
  .GlossaryAdmin__toggle {
    top: -70px;
  }
}
.GlossaryAdmin__toggle svg {
  width: 18px;
  height: auto;
  margin-right: 10px;
}
.GlossaryAdmin__toggle svg path {
  fill: #37274F;
}
.GlossaryAdmin__toggle:active, .GlossaryAdmin__toggle:focus {
  outline: 0;
}
.GlossaryAdmin__question {
  padding: 25px 40px 15px 40px;
}
.GlossaryAdmin h1 {
  font-size: 1rem;
  color: white;
}

.GlossaryAdmin__translation {
  padding: 1.75rem 0;
  border-top: 1px solid #392B41;
  animation: fadein 1s;
}
.GlossaryAdmin__translation:last-of-type {
  border-bottom: 1px solid #392B41;
}
.GlossaryAdmin__translation__warning {
  margin-top: 1rem;
  font-size: 12px;
  color: #ff4141;
}
.GlossaryAdmin__translation__warning i {
  margin-right: 5px;
}
.GlossaryAdmin__translation__field {
  padding: 0 2rem;
}
.GlossaryAdmin__translation__field:not(:last-of-type) {
  margin-bottom: 1.2rem;
}
.GlossaryAdmin__translation__field__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.53rem;
}
.GlossaryAdmin__translation__field__header label {
  font-size: 0.93rem;
  font-weight: 400;
  margin-bottom: 0;
}
.GlossaryAdmin__translation__field__header button {
  padding: 0;
  background-color: transparent;
  border: 0;
  color: #ff4141;
  font-size: 0.8rem;
}
.GlossaryAdmin__translation__field__header button:focus, .GlossaryAdmin__translation__field__header button:active {
  outline: 0;
}
.GlossaryAdmin__translation__field__header button i {
  margin-right: 7px;
}
.GlossaryAdmin__translation__field input {
  width: 100%;
  padding: 0.6rem 1rem;
  background-color: #2B1E33;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  font-size: 0.95rem;
}
.GlossaryAdmin__translation__field .react-autosuggest__container {
  position: relative;
}
.GlossaryAdmin__translation__field .react-autosuggest__suggestions-container--open {
  position: absolute;
  left: 0;
  right: 0;
  max-height: 400px;
  overflow-y: auto;
  z-index: 2;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  width: 100%;
  margin-top: 10px;
}
.GlossaryAdmin__translation__field .react-autosuggest__suggestions-list {
  padding: 20px 15px 5px 15px;
  margin: 0;
}
.GlossaryAdmin__translation__field .react-autosuggest__suggestions-list li {
  color: #37274F;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.GlossaryAdmin__translation__field .react-autosuggest__suggestions-list li:not(:last-of-type) {
  margin-bottom: 15px;
  border-bottom: 1px solid #DDE2ED;
  padding-bottom: 15px;
}
.GlossaryAdmin__translation__add {
  display: flex;
  justify-content: flex-end;
  padding: 2rem;
  padding-bottom: 140px;
}
.GlossaryAdmin__translation__add button i.fa-arrow-down {
  animation: MoveUpDown 1s linear infinite;
}
.GlossaryAdmin__translation__save {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.8rem 2rem;
  background-color: #2D2234;
}
.GlossaryAdmin__translation__save span {
  font-size: 0.8rem;
}
.GlossaryAdmin__translation__save button {
  padding: 8px 12px 9px 12px;
  min-width: 120px;
}

.GlossaryAdmin__modal {
  text-align: center;
}
.GlossaryAdmin__modal .modal-dialog {
  width: 575px !important;
}
.GlossaryAdmin__modal .modal-content {
  background-color: white;
}
.GlossaryAdmin__modal .modal-header {
  background-color: #F8FAFE;
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.GlossaryAdmin__modal .modal-header .modal-title {
  color: #37274F;
}
.GlossaryAdmin__modal .modal-body {
  padding: 30px 0 15px 0;
  color: #37274F;
}
.GlossaryAdmin__modal .modal-footer {
  border-top: 0;
  padding-bottom: 30px;
}
.GlossaryAdmin__modal .btnMarkt__group--horizontal {
  justify-content: center;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}
.modalwrapper--GlossaryAdmin__modal {
  position: fixed;
  z-index: 10003;
}
.modalwrapper--GlossaryAdmin__modal .modal-backdrop {
  background-color: #37274F;
  opacity: 0.85;
}

.DomainWhitelist__header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .DomainWhitelist__header {
    margin-bottom: 2rem;
  }
}
.DomainWhitelist__header h2 {
  font-size: 1.5rem;
  color: #37274F;
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .DomainWhitelist__header h2 {
    font-size: 2rem;
  }
}
.DomainWhitelist__header img {
  width: auto;
  height: 30px;
  margin-right: 0.75rem;
}
@media (min-width: 992px) {
  .DomainWhitelist__header img {
    height: 45px;
    margin-right: 1.25rem;
  }
}
.DomainWhitelist__header i {
  font-size: 40px;
  margin-right: 1.25rem;
  color: #37274F;
}
.DomainWhitelist__description {
  color: #37274F;
  font-size: 1rem;
  max-width: 769px;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .DomainWhitelist__description {
    margin-bottom: 4rem;
    font-size: 1.3rem;
  }
}
@media (min-width: 992px) {
  .DomainWhitelist__list__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2rem;
  }
}
.DomainWhitelist__list__guide h4 {
  color: #37274F;
  font-size: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .DomainWhitelist__list__guide h4 {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }
}
.DomainWhitelist__list__guide p {
  font-size: 0.9rem;
  color: #37274F;
}
@media (min-width: 992px) {
  .DomainWhitelist__list__guide p {
    font-size: 1.2rem;
  }
}
.DomainWhitelist__list__form {
  margin-top: 1.8rem;
}
.DomainWhitelist__list__form__input {
  position: relative;
}
.DomainWhitelist__list__form__input input {
  width: 100%;
  background-color: white;
  color: #37274F;
  border: 1px solid #DBE0EA;
  padding: 13px 15px;
  font-size: 0.9rem;
  border-radius: 8px;
}
@media (min-width: 992px) {
  .DomainWhitelist__list__form__input input {
    padding: 20px 17px;
    font-size: 1.2rem;
  }
}
.DomainWhitelist__list__form__input input::placeholder {
  opacity: 0.7;
}
.DomainWhitelist__list__form__input button {
  position: absolute;
  right: 5px;
  top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  height: calc(100% - 10px);
  width: 100px;
  max-width: 134px;
}
@media (min-width: 992px) {
  .DomainWhitelist__list__form__input button {
    right: 7px;
    top: 7px;
    height: calc(100% - 14px);
    width: 134px;
    font-size: 1rem;
  }
}
.DomainWhitelist__list__form__domains {
  padding: 2rem 0 0 0;
  margin-top: 1rem;
  border-top: 1px solid #D4DAE7;
}
.DomainWhitelist__list__form__domains li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 59px;
  padding: 13px 7px 13px 15px;
  background-color: white;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05), 0px 2px 0px rgba(45, 45, 45, 0.15);
  border-radius: 8px;
}
@media (min-width: 992px) {
  .DomainWhitelist__list__form__domains li {
    height: 73px;
    padding: 20px 7px 20px 24px;
  }
}
.DomainWhitelist__list__form__domains li:focus, .DomainWhitelist__list__form__domains li:active {
  border-bottom: 0;
}
.DomainWhitelist__list__form__domains li.none {
  background-color: #ECF1FA;
  border: 1px solid #D2D5DC;
  font-weight: 600;
  box-shadow: unset;
}
.DomainWhitelist__list__form__domains li.none span {
  color: #442F54 !important;
  opacity: 0.5;
}
.DomainWhitelist__list__form__domains li span {
  font-size: 1rem;
  font-weight: 600;
  color: #37274F;
}
@media (min-width: 992px) {
  .DomainWhitelist__list__form__domains li span {
    font-size: 1.3rem;
  }
}
.DomainWhitelist__list__form__domains li:not(:last-of-type) {
  margin-bottom: 1rem;
}
.DomainWhitelist__list__form__domains li button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  height: 39px;
  width: 100px;
}
@media (min-width: 992px) {
  .DomainWhitelist__list__form__domains li button {
    height: 52px;
    width: 132px;
    font-size: 1rem;
  }
}

.school-item a {
  color: #656269 !important;
}
.school-item:hover, .school-item:focus {
  color: #ff7149;
  background-color: #f9fafb;
  text-decoration: none !important;
  border-bottom: none;
}

.StoryDetail {
  min-height: 90vh;
  width: 100%;
}
.StoryDetail .container h4 {
  margin-top: 5em;
  text-align: center;
  font-size: 1.867em;
}
.StoryDetail__contentNavigation, .StoryDetail__banner {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.StoryDetail__contentNavigation {
  justify-content: space-around;
  background-color: #37274F;
  border-radius: 8px;
  box-shadow: 0 2px 0 0 #2a1f3b, 0 2px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 2.667em;
  padding: 0 25px;
}
@media (max-width: 768px) {
  .StoryDetail__contentNavigation {
    margin: -1.35em -15px 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.StoryDetail__contentNavigation .ContentLink__btn {
  background-color: transparent;
  box-shadow: none;
  border: none;
  padding: 0.344em 0;
  text-align: center;
  border-radius: 0;
  color: white;
  width: 33%;
  margin: 0;
  border-bottom: 7px solid transparent;
  border-top: 7px solid transparent;
  font-size: 1.067em;
  position: relative;
}
.StoryDetail__contentNavigation .ContentLink__btn:first-child:nth-last-child(5), .StoryDetail__contentNavigation .ContentLink__btn:first-child:nth-last-child(5) ~ a {
  font-size: 0.85rem;
  padding: 0.344em 0.25em;
}
.StoryDetail__contentNavigation .ContentLink__btn:hover, .StoryDetail__contentNavigation .ContentLink__btn:focus {
  text-decoration: none;
}
@media (max-width: 1550px) {
  .StoryDetail__contentNavigation .ContentLink__btn {
    font-size: 0.9em;
  }
}
.StoryDetail__contentNavigation .ContentLink__btn--disabled {
  color: rgba(255, 255, 255, 0.5);
}
.StoryDetail__contentNavigation .ContentLink__btn--pro:after {
  content: "Pro";
  position: absolute;
  top: -3px;
  background-color: #FF7041;
  font-weight: 600;
  padding: 1px 2px 1px 2px;
  border-radius: 3px;
  font-size: 0.5em;
  color: white;
}
.StoryDetail__contentNavigation .ContentLink__btn.activeLink {
  font-weight: bold;
  border-bottom: 7px solid #FD5B24;
}
@media (max-width: 768px) {
  .StoryDetail__banner {
    position: relative;
  }
  .StoryDetail__banner::before {
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.39) 0%, rgba(23, 23, 23, 0.31) 8%, rgba(38, 38, 38, 0.23) 17%, rgba(54, 54, 54, 0.16) 25%, rgba(71, 71, 71, 0.08) 33%, rgba(89, 89, 89, 0) 41%, rgba(89, 89, 89, 0) 41%, rgba(89, 89, 89, 0) 47%, rgba(89, 89, 89, 0) 53%, rgba(89, 89, 89, 0) 59%, rgba(89, 89, 89, 0) 64%, rgba(89, 89, 89, 0) 70%, rgba(89, 89, 89, 0) 70%, rgba(81, 81, 81, 0.12) 74%, rgba(73, 73, 73, 0.24) 77%, rgba(65, 65, 65, 0.35) 81%, rgba(57, 57, 57, 0.47) 84%, rgba(50, 50, 50, 0.59) 88%, rgba(50, 50, 50, 0.59) 88%, rgba(47, 47, 47, 0.63) 90%, rgba(43, 43, 43, 0.67) 93%, rgba(40, 40, 40, 0.72) 95%, rgba(36, 36, 36, 0.76) 97%, rgba(33, 33, 33, 0.8) 100%);
  }
}
.StoryDetail__bannerImage--mobile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 769px) {
  .StoryDetail__bannerImage--mobile {
    display: none;
  }
}
.StoryDetail__bannerImage--desktop {
  display: none;
}
@media (min-width: 769px) {
  .StoryDetail__bannerImage--desktop {
    display: block;
  }
}
.StoryDetail__banner img {
  width: 100%;
}
.StoryDetail__content {
  background-color: #f8fafe;
  position: relative;
  padding-top: 1.333em;
  min-height: 58vh;
  padding-bottom: 10.667em;
}
@media (max-width: 768px) {
  .StoryDetail__content {
    padding-bottom: 2em;
    position: unset;
  }
  .StoryDetail__content .col-xs-12 {
    position: unset;
  }
}
.StoryDetail__content::before {
  content: "";
  background-image: url("https://assets.senorwooly.com/static/images/story_banner_wave.svg");
  position: absolute;
  top: -3.6em;
  width: 100%;
  height: 3.734em;
  display: none;
}
@media (min-width: 769px) {
  .StoryDetail__content::before {
    display: block;
  }
}
.StoryDetail__content h1 {
  font-size: 1.33em;
  color: #37274F;
  margin-bottom: 0.6em;
}
@media (max-width: 1550px) {
  .StoryDetail__content h1 {
    font-size: 1.5em;
  }
}
@media (max-width: 768px) {
  .StoryDetail__content h1 {
    font-size: 1.25em;
    position: absolute;
    top: 85px;
    max-width: 58%;
    color: white;
    display: flex;
    flex-direction: column;
  }
}
.StoryDetail__content h1 img {
  width: 0.65em;
  margin-left: 0.25em;
}
.StoryDetail__content .Dashboard__buttons {
  display: flex;
  justify-content: space-between;
  margin: 0 -1em 2.667em;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .StoryDetail__content .Dashboard__buttons {
    position: absolute;
    top: 71px;
    right: 1.5em;
  }
  .StoryDetail__content .Dashboard__buttons .Dashboard__btn:hover {
    background-color: transparent;
  }
  .StoryDetail__content .Dashboard__buttons .Dashboard__btn img {
    margin: 0;
  }
  .StoryDetail__content .Dashboard__buttons .Dashboard__btn span {
    display: none;
  }
}
@media (max-width: 991px) {
  .StoryDetail__content .Dashboard__buttons .Dashboard__btn {
    font-size: 1em;
  }
}
.StoryDetail__content .Dashboard__buttons .Dashboard__btn .Btn__icon--mobile {
  display: inline-block;
}
@media (min-width: 769px) {
  .StoryDetail__content .Dashboard__buttons .Dashboard__btn .Btn__icon--mobile {
    display: none;
  }
}
.StoryDetail__content .Dashboard__buttons .Dashboard__btn .Btn__icon--desktop {
  display: none;
}
@media (min-width: 769px) {
  .StoryDetail__content .Dashboard__buttons .Dashboard__btn .Btn__icon--desktop {
    display: inline-block;
  }
}
.StoryDetail__content .Dashboard__buttons .Dashboard__btn .fa {
  font-size: 1.2em;
  margin-right: 0.5em;
  margin-top: 5px;
}
@media (max-width: 768px) {
  .StoryDetail__content .Dashboard__buttons .Dashboard__btn .fa {
    color: white;
    margin-right: 0;
  }
}

.CurrentNugget:hover {
  cursor: pointer;
}
.CurrentNugget__coins {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.CurrentNugget__coins p {
  margin-bottom: 0;
  font-weight: bold;
  color: #2d2d2d;
}
.CurrentNugget__coins img {
  width: 15px;
  height: auto;
  margin-right: 15px;
}

.NuggetSelect {
  display: inline-block;
  position: relative;
  padding-left: 2.25em;
}
.NuggetSelect:hover {
  cursor: pointer;
}
.NuggetSelect ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  padding: 0;
  margin: 0;
  z-index: 3;
}
.NuggetSelect li {
  display: none;
  padding: 0;
  color: rgba(45, 45, 45, 0.4);
  font-size: 1.2em;
  padding: 0.5em 1.1em;
  line-height: 1;
  width: 100%;
  text-align: center;
}
.NuggetSelect li:hover {
  border: none;
}
.NuggetSelect li.isCompleted {
  font-weight: bold;
  color: #2d2d2d;
}
.NuggetSelect li.isVisible {
  display: inline-block;
}
.NuggetSelect .ContentBlock__dropdownIcon {
  margin-left: 1.7em;
}
.NuggetSelect--active ul {
  height: 365px;
  overflow-y: auto;
  top: -170px;
  justify-content: unset;
}
.NuggetSelect--active li {
  display: inline-block;
  background-color: white;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
}
.NuggetSelect--active li:first-of-type {
  border-radius: 8px 8px 0 0;
}
.NuggetSelect--active li:last-of-type {
  border-radius: 0 0 8px 8px;
}
.NuggetSelect--active li.isVisible {
  color: #FD5B24;
}
.NuggetSelect--active .ContentBlock__dropdownIcon {
  visibility: hidden;
}

.NuggetOverview {
  padding-top: 1em;
}
@media (max-width: 768px) {
  .NuggetOverview {
    padding-top: 2em;
  }
}

@media (max-width: 768px) {
  .NuggetSelect__block {
    margin-left: -1em;
    margin-right: -1em;
  }
}
@media (max-width: 768px) {
  .NuggetSelect__block .NuggetSelect__title {
    display: none;
  }
}

.StudentDashboard {
  min-height: 100vh;
}
@media (min-width: 992px) {
  .StudentDashboard__content {
    padding-top: 3.333em;
  }
}

.StudentProfile {
  padding-bottom: 10.667em;
}
@media (max-width: 768px) {
  .StudentProfile {
    padding-top: 0;
    padding-bottom: 3.333em;
  }
}
.StudentProfile h3 {
  position: relative;
}
.StudentProfile h3 span,
.StudentProfile h3 .MobilePageLink,
.StudentProfile h3 .TabletPageLink {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 0.8em;
  font-weight: normal;
}
.StudentProfile h3 span:hover,
.StudentProfile h3 .MobilePageLink:hover,
.StudentProfile h3 .TabletPageLink:hover {
  cursor: pointer;
}
.StudentProfile h3 span {
  display: none;
}
@media (min-width: 769px) {
  .StudentProfile h3 span {
    display: inline-block;
  }
}
.StudentProfile h3 span.SortSettingsDropDown {
  display: flex;
}
@media (max-width: 400px) {
  .StudentProfile h3 span.SortSettingsDropDown {
    position: relative;
    min-width: 100%;
    font-size: 0.65em;
  }
  .StudentProfile h3 span.SortSettingsDropDown > div {
    flex-direction: row-reverse;
    margin-bottom: 1em;
    padding-left: 0;
  }
  .StudentProfile h3 span.SortSettingsDropDown .fa {
    margin: 0 0.5em 0 0;
  }
}
.StudentProfile h3 span.SortSettingsDropDown span {
  display: inline-block;
}
@media (max-width: 400px) {
  .StudentProfile h3 span.SortSettingsDropDown--visible {
    position: absolute;
  }
  .StudentProfile h3 span.SortSettingsDropDown--visible .fa {
    position: unset;
    margin: 0;
  }
}

.StudentInfo {
  display: flex;
  align-items: center;
  margin-bottom: 2.667em;
}
@media (max-width: 992px) {
  .StudentInfo {
    position: relative;
    padding: 2em 1em 12em;
    margin: 0 -1em;
  }
  .StudentInfo::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("https://assets.senorwooly.com/static/images/mobile_dashboard_bg.svg");
    z-index: -1;
  }
}
.StudentInfo img, .StudentInfo .StudentInfo__block {
  position: relative;
  display: inline-block;
  z-index: 2;
}
.StudentInfo img {
  max-width: 10.667em;
  margin-right: 1em;
  border-radius: 8px;
}
@media (max-width: 1560px) {
  .StudentInfo img {
    max-width: 8em;
  }
}
@media (max-width: 992px) {
  .StudentInfo img {
    max-width: 9em;
  }
}
.StudentInfo__avatar {
  position: relative;
}
.StudentInfo__lock {
  border-radius: 5px;
  background-color: #CC0000;
  padding: 8px;
  color: white;
  position: absolute;
  bottom: 0;
  z-index: 3;
  font-size: 14px;
  white-space: nowrap;
}
.StudentInfo__lock .far {
  margin-right: 5px;
}
.StudentInfo .StudentInfo__block h2, .StudentInfo .StudentInfo__block p, .StudentInfo .StudentInfo__block .StudentInfo__subTitle {
  color: #2d2d2d;
}
@media (max-width: 992px) {
  .StudentInfo .StudentInfo__block h2, .StudentInfo .StudentInfo__block p, .StudentInfo .StudentInfo__block .StudentInfo__subTitle {
    color: white;
  }
}
.StudentInfo .StudentInfo__block h2 {
  font-size: 1.6em;
}
@media (max-width: 1550px) {
  .StudentInfo .StudentInfo__block h2 {
    font-size: 1.2em;
  }
}
.StudentInfo .StudentInfo__block .StudentInfo__subTitle {
  font-size: 0.933em;
  font-weight: bold;
  margin: 0;
}
.StudentInfo .StudentInfo__block p {
  font-size: 0.8em;
  margin-bottom: 0;
}
.StudentInfo .StudentInfo__block p i {
  font-size: 110%;
  margin-left: 5px;
  margin-top: 2px;
}
.StudentInfo .StudentInfo__block p:first-of-type {
  margin-bottom: 1em;
}
.StudentInfo .StudentInfo__block p:not(:last-of-type) {
  margin-bottom: 0.8em;
}
.StudentInfo .StudentInfo__block p.isLink {
  cursor: pointer;
}

.StudentAchievements {
  margin-bottom: 2.133em;
}
@media (max-width: 992px) {
  .StudentAchievements {
    margin-top: -10em;
    position: relative;
  }
}
.StudentAchievements__scoreRow {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.StudentAchievements__scoreRow .ContentBlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 1em;
  margin-bottom: 1.4em;
  width: auto;
}
.StudentAchievements__scoreRow .ContentBlock:not(:last-of-type) {
  margin-right: 1em;
}
.StudentAchievements__scoreRow .ContentBlock img {
  width: auto;
  margin-right: 0.5em;
  position: absolute;
}
.StudentAchievements__scoreRow .ContentBlock p {
  margin: 0;
  font-size: 0.8em;
  display: inline-block;
  line-height: 1;
  padding-left: 17px;
}
.StudentAchievements__scoreRow .ContentBlock .fa {
  color: white;
  font-size: 0.8em;
  margin-right: 0.5em;
}
.StudentAchievements .StudentAchievements__piglet {
  margin-left: 5px;
}
.StudentAchievements .StudentAchievements__piglet img {
  height: 42px;
  left: -15px;
  top: -7px;
}
.StudentAchievements .StudentAchievements__piglet p {
  padding-left: 25px;
}
.StudentAchievements .StudentAchievements__totalCoins img {
  height: 37px;
  left: -7px;
}
.StudentAchievements .StudentAchievements__totalCoins p {
  padding-left: 25px;
}
.StudentAchievements .StudentAchievements__nuggets {
  margin-left: 5px;
}
.StudentAchievements .StudentAchievements__nuggets img {
  height: 27px;
  top: -1px;
  left: -13px;
}
.StudentAchievements .StudentAchievements__badges img {
  left: -11px;
  height: 44px;
}
.StudentAchievements__badge {
  display: flex;
  align-items: center;
  position: relative;
  color: white;
}
.StudentAchievements__badge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  filter: blur(23.7px);
  background-color: rgba(181, 255, 0, 0.1);
  z-index: 1;
}
.StudentAchievements__badge .BadgeInfo,
.StudentAchievements__badge img {
  position: relative;
}
.StudentAchievements__badge .BadgeInfo p {
  margin: 0;
}
.StudentAchievements__badge .BadgeInfo p:not(:last-of-type) {
  font-weight: bold;
  margin-bottom: 0.25em;
}
@media (max-width: 1550px) {
  .StudentAchievements__badge .BadgeInfo p {
    font-size: 0.8em;
  }
}
.StudentAchievements__badge img {
  border-radius: 50%;
  width: 4.5em;
  max-width: 100%;
  box-shadow: 0 2px 4px 0 rgba(45, 45, 45, 0.2);
  margin-right: 1.2em;
}
.StudentAchievements a:hover, .StudentAchievements a:focus {
  outline: none;
  text-decoration: none;
}

.UserSettings:hover {
  cursor: pointer;
}
@media (max-width: 991px) {
  .UserSettings {
    margin-bottom: 2em;
  }
}
.UserSettings h4 {
  font-size: 0.933em;
  line-height: 1.43;
  color: #2d2d2d;
  font-weight: lighter;
  margin-bottom: 1em;
}
.UserSettings .ContentBlock__title {
  position: relative;
  font-size: 1.067em;
  padding: 0 0.938em;
  margin: 0 -0.938em;
}
.UserSettings .ContentBlock__title::after {
  content: "";
  right: 0.938em;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0px;
  height: 0px;
  display: inline-block;
  position: absolute;
  border: 5px solid transparent;
  border-top: 5px solid #2f2f2f;
  border-bottom: none;
}
.UserSettings__password {
  font-size: 1em;
}
@media (max-width: 1550px) {
  .UserSettings__password {
    font-size: 0.8em;
  }
}
.UserSettings--open {
  padding-bottom: 0;
}
.UserSettings--open .ContentBlock__title {
  padding-bottom: 0.938em;
  border-bottom: solid 2px rgba(65, 43, 84, 0.2);
}
.UserSettings--open .ContentBlock__title::after {
  bottom: 0.938em;
  border: 5px solid transparent;
  border-top: none;
  border-bottom: 5px solid #2f2f2f;
}
.UserSettings .ContentBlock__input {
  position: relative;
}
.UserSettings .ContentBlock__input .fa {
  height: 1em;
  position: absolute;
  right: 1em;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #2d2d2d;
}
.UserSettings .ContentBlock__input input {
  width: 100%;
  padding-right: 1.25em;
}
.UserSettings .UserSettingsDropDown {
  margin: 0 -0.938em;
  padding: 2.667em 0.938em 0.938em;
}
.UserSettings .UserSettingsDropDown p {
  margin-bottom: 0.5em;
}
.UserSettings .UserSettingsDropDown .ContentBlock p {
  margin-bottom: 0;
  text-align: center;
}
.UserSettings .UserSettingsDropDown .ContentBlock--purple {
  margin-bottom: 2.667em;
}
.UserSettings .UserSettingsDropDown .ContentBlock__title {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0.5em;
}
.UserSettings .UserSettingsDropDown .ContentBlock__title::after {
  content: none;
}

.Game__featured {
  margin-top: 2.5em;
  width: 100%;
}
.Game__featured .GameDisplay {
  width: 100%;
  height: 10em;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border-radius: 8px;
}
.Game__featured .GameDisplay img {
  z-index: 1;
  position: relative;
  width: 100%;
}
.Game__featured .GameDisplay p {
  z-index: 2;
  position: absolute;
  bottom: 0.75em;
  left: 1.5em;
  margin-bottom: 0;
  font-size: 1.333em;
  font-weight: bold;
  line-height: 1;
  color: white;
}
.Game__featured .GameDisplay .ContentBlock {
  z-index: 2;
  right: 2em;
  bottom: 1em;
  position: absolute;
  width: auto;
  padding: 0.25em 1.5em;
  color: #71ae71;
}

.UserSettingsPage {
  padding-top: 3.333em;
}
.UserSettingsPage__userInfo .StudentInfo {
  padding-bottom: 0;
}
.UserSettingsPage__userInfo .StudentInfo .StudentInfo__block h2, .UserSettingsPage__userInfo .StudentInfo .StudentInfo__block p, .UserSettingsPage__userInfo .StudentInfo .StudentInfo__block .StudentInfo__subTitle {
  color: #2d2d2d;
}
.UserSettingsPage__userInfo .StudentInfo::after {
  display: none;
}
.UserSettingsPage .UserSettings {
  display: block;
}
.UserSettingsPage .UserSettings p {
  margin-bottom: 0.5em;
}
.UserSettingsPage .UserSettings .ContentBlock {
  margin-bottom: 2em;
}
.UserSettingsPage .UserSettings .ContentBlock p {
  margin: 0;
  text-align: center;
}
@media (max-width: 768px) {
  .UserSettingsPage .StudentInfo {
    padding-bottom: 0;
  }
}
.UserSettingsPage .StudentInfo::after {
  content: none;
}
.UserSettingsPage .StudentInfo h2, .UserSettingsPage .StudentInfo p, .UserSettingsPage .StudentInfo .StudentInfo__subTitle {
  color: #2d2d2d;
}
.UserSettingsPage .ContentBlock__title {
  margin-bottom: 0.5em;
}
.UserSettingsPage .ContentBlock__title::after {
  content: none;
}

.AvatarOverview .Dashboard__btn {
  display: inline-block;
  padding: 0.75em 1em 1em;
}
.AvatarOverview .Dashboard__btn .fa {
  margin-right: 0.5em;
}
@media (max-width: 991px) {
  .AvatarOverview .ContentBlock {
    display: none;
  }
}

.AvatarOverview__intro {
  padding: 2em 0;
  color: #2d2d2d;
  font-size: 1.067em;
}

.AvatarOverview__group {
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
}
.AvatarOverview__group h3 {
  font-size: 1em;
  margin-bottom: 10px;
  font-weight: 400;
  color: #37274F;
  text-transform: capitalize;
}

.AvatarOverview__groupAvatars {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 25px;
}

.AvatarOverview__avatar {
  width: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.AvatarOverview__avatar img {
  width: inherit;
  height: auto;
}

.AvatarModal {
  width: 500px;
  height: auto;
  top: auto;
  bottom: calc(50% - 25vh);
}
@media (max-width: 991px) {
  .AvatarModal {
    height: 100%;
    bottom: 0;
    top: 0;
    width: 100%;
  }
}
.AvatarModal .Modal__body {
  padding-bottom: 40px;
}
.AvatarModal .Modal__body img {
  height: 300px;
}
.AvatarModal .Modal__button img {
  width: 15px;
  height: 15px;
  margin-bottom: 3px;
}
.AvatarModal .Modal__button--disabled {
  opacity: 0.45;
}
.AvatarModal .Modal__button--disabled:hover {
  background-color: #ffffff;
  color: #37274F;
  cursor: not-allowed;
}
.AvatarModal .Modal__button:first-of-type:last-of-type {
  width: 100%;
}
.AvatarModal .Modal__button:last-of-type {
  transition: 200ms;
  background-color: #37274F;
  color: white;
}
.AvatarModal .Modal__button:last-of-type:hover {
  background-color: #FD5B24;
  color: white;
}
.AvatarModal__hint {
  margin-top: 20px;
  margin-bottom: 0;
  color: #37274F;
  font-size: 16px;
}
@media (max-width: 991px) {
  .AvatarModal__hint {
    color: #ffffff;
    opacity: 0.85;
  }
}
.AvatarModal__hint--inactive {
  text-decoration: underline;
}

.AvatarTooltip .rc-tooltip-arrow {
  border-bottom-color: white;
}
.AvatarTooltip__hint {
  text-align: center;
  margin-bottom: 5px;
}
.AvatarTooltip__price {
  display: flex;
  justify-content: center;
  align-items: center;
}
.AvatarTooltip__price img {
  width: 20px;
  height: auto;
  margin-right: 5px;
}
.AvatarTooltip__price p {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 0;
}

.AssignmentsPage {
  padding-top: 3.333em;
}
@media (max-width: 768px) {
  .AssignmentsPage {
    padding-top: 2em;
  }
}
.AssignmentsPage .Dashboard__btn {
  display: inline-block;
  padding: 0.75em 1em 1em;
  margin-bottom: 1em;
}
.AssignmentsPage .Dashboard__btn .fa {
  margin-right: 0.5em;
}

.Game {
  padding-bottom: 5.667em;
}
.Game .Dashboard__btn {
  margin-bottom: 1em;
}
.Game .GameDetail__banner {
  height: 20em;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
@media (min-width: 992px) {
  .Game .GameDetail__banner {
    height: 23em;
  }
}
@media (max-width: 768px) {
  .Game .GameDetail__banner {
    position: relative;
    justify-content: center;
  }
}
.Game .GameDetail__banner img {
  width: 100%;
}
@media (max-width: 768px) {
  .Game .GameDetail__banner img {
    height: 100%;
    width: auto;
  }
}
.Game__content {
  background-color: #f8fafe;
  position: relative;
  padding-top: 1.333em;
  min-height: 58vh;
}
.Game__content::before {
  content: "";
  background-image: url("https://assets.senorwooly.com/static/images/story_banner_wave.svg");
  position: absolute;
  top: -3.69em;
  width: 100%;
  height: 3.734em;
  display: none;
}
@media (min-width: 769px) {
  .Game__content::before {
    display: block;
  }
}
.Game__content .Game__featuredImage {
  max-width: 100%;
  margin-top: 1em;
}
.Game iframe {
  visibility: visible;
  width: 100%;
  height: 780px;
}

.container--game {
  position: relative;
}
.container--game:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.24%;
}
.container--game iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

.BadgeOverview .Dashboard__btn {
  display: inline-block;
  padding: 0.75em 1em 1em;
  margin-bottom: 30px;
}
.BadgeOverview .Dashboard__btn .fa {
  margin-right: 0.5em;
}
.BadgeOverview .BadgeImage {
  position: relative;
}
.BadgeOverview .ActiveBadgeIcon {
  width: 1em;
  height: 1em;
  background-color: #71ae71;
  background-image: url("https://assets.senorwooly.com/static/images/check.svg");
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 11px;
  background-position: center;
  position: absolute;
  bottom: 2px;
  right: 0;
}
.BadgeOverview__intro {
  color: #2d2d2d;
  font-size: 1.067em;
  margin-bottom: 35px;
}
.BadgeOverview__group {
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
}
.BadgeOverview__group h3 {
  font-size: 1.067em;
  margin-bottom: 20px;
  font-weight: 600;
  color: #2d2d2d;
  text-transform: capitalize;
}
.BadgeOverview__groupBadges {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.BadgeOverview__badge {
  width: 80px;
  margin: 0 0 0.9em 0;
  position: relative;
  padding-bottom: 1.5em;
}
.BadgeOverview__badge:hover {
  cursor: pointer;
}
.BadgeOverview__badge:not(:last-of-type) {
  margin: 0 0.9em 0.9em 0;
}
.BadgeOverview__badge img {
  width: inherit;
  height: auto;
  max-width: 100%;
}
.BadgeOverview .ProgressBar__indicator {
  color: #37274F;
  border-radius: 0 0 8px 8px;
}
.BadgeOverview .ProgressBar__indicator::-moz-progress-value {
  background-color: #37274F;
}
.BadgeOverview .ProgressBar__indicator::-webkit-progress-value {
  background-color: #37274F;
}
.BadgeOverview .ProgressBar__indicator--completed {
  color: #71ae71;
}
.BadgeOverview .ProgressBar__indicator--completed::-moz-progress-value {
  background-color: #71ae71;
}
.BadgeOverview .ProgressBar__indicator--completed::-webkit-progress-value {
  background-color: #71ae71;
}

.BadgePreviewBlock {
  text-align: center;
  padding-bottom: 0;
}
@media (max-width: 1199px) {
  .BadgePreviewBlock {
    display: none;
  }
}
.BadgePreviewBlock.ContentBlock--locked {
  padding-bottom: 3em;
}
.BadgePreviewBlock.ContentBlock--locked .ContentBlock__link {
  display: none;
}
.BadgePreviewBlock.ContentBlock--active .ContentBlock__link {
  box-shadow: 0 2px 0 0 #bf2d2d;
}
.BadgePreviewBlock.ContentBlock--active .ContentBlock__link button {
  background-color: #ff4141;
}
.BadgePreviewBlock.ContentBlock--active .ActiveBadgeIcon {
  background-size: 14px;
  width: 1.5em;
  height: 1.5em;
  bottom: 0.8em;
  right: 0.8em;
}
.BadgePreviewBlock .ContentBlock__link {
  padding: 0;
  box-shadow: 0 2px 0 0 #609660;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.BadgePreviewBlock .ContentBlock__link button {
  color: white;
  background-color: #71ae71;
}
.BadgePreviewBlock .BadgePreview {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4.333em;
  padding-bottom: 1em;
}
.BadgePreviewBlock .ProgressBar__indicator--completed {
  display: none;
}
.BadgePreviewBlock .BadgeName {
  font-size: 1.333em;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.BadgePreviewBlock .BadgeTaskList {
  width: 100%;
  padding: 0 1.333em;
  margin: 0;
}
.BadgePreviewBlock .BadgeTaskList .BadgeTaskItem:hover, .BadgePreviewBlock .BadgeTaskList .BadgeTaskItem:focus {
  text-decoration: none;
  border: none;
}
.BadgePreviewBlock .BadgeTaskList .BadgeTaskItem p {
  text-align: left;
  position: relative;
  padding-left: 1.25em;
}
.BadgePreviewBlock .BadgeTaskList .BadgeTaskItem p::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #2d2d2d;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 8px;
}
.BadgePreviewBlock .BadgeTaskList .BadgeTaskItem--completed {
  list-style-type: none;
}
.BadgePreviewBlock .BadgeTaskList .BadgeTaskItem--completed p {
  text-decoration: line-through;
}
.BadgePreviewBlock .BadgeTaskList .BadgeTaskItem--completed p::before {
  top: 6px;
  width: 11px;
  height: 11px;
  background-color: transparent;
  background-image: url("https://assets.senorwooly.com/static/images/check_green.svg");
  background-repeat: no-repeat;
  background-size: 11px;
  background-position: center;
}
.BadgePreviewBlock p {
  display: inline-block;
  margin-bottom: 0;
  font-size: 1.067em;
  width: 100%;
}
.BadgePreviewBlock img {
  width: 8.8em;
  height: 8.8em;
}
.BadgePreviewBlock .ContentBlock__body {
  height: auto;
  flex-wrap: wrap;
  align-items: flex-end;
  position: relative;
}

.NotFound {
  padding-top: 125px;
  min-height: 100vh;
}
.NotFound .page-wrapper {
  overflow: unset;
}
.NotFound .NotFound__jim {
  margin-left: 25px;
  width: 320px;
}
@media (max-width: 991px) {
  .NotFound .NotFound__jim {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
.NotFound .NotFound__logo {
  width: 150px;
}
.NotFound .page-404-header {
  padding-left: unset;
  text-align: center;
}
@media (max-width: 991px) {
  .NotFound .page-404-header {
    padding-top: 0;
  }
}
.NotFound .page-404-desc {
  padding-left: unset;
  text-align: center;
}

.ClassActivation header {
  width: 100%;
  min-height: 377px;
  text-align: center;
  margin-bottom: 70px;
}
@media (max-width: 992px) {
  .ClassActivation header {
    height: 235px;
  }
}
@media (max-width: 500px) {
  .ClassActivation header {
    height: 260px;
  }
}
.ClassActivation header i {
  color: white;
  font-size: 20px;
  cursor: pointer;
}
@media (max-width: 992px) {
  .ClassActivation header {
    margin-bottom: 30px;
  }
}
.ClassActivation__wave {
  z-index: -1;
  position: absolute;
  top: 60px;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: inherit;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 1200px) {
  .ClassActivation__wave {
    top: 40px;
    object-position: 7%;
  }
}
.ClassActivation__className {
  margin-top: 100px;
  color: white;
  font-size: 40px;
}
@media (max-width: 1270px) {
  .ClassActivation__className {
    margin-top: 30px;
    font-size: 25px;
  }
}
@media (min-width: 1270px) and (max-width: 1600px) {
  .ClassActivation__className {
    margin-top: 40px;
  }
}
.ClassActivation__code {
  transition: 350ms;
  color: white;
  margin-bottom: 0;
}
.ClassActivation__code__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ClassActivation__code__wrapper .fal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 20px;
  background-color: white;
  color: #37274F;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  margin-left: 15px;
  margin-bottom: 5px;
}
.ClassActivation__code--zoomIn {
  font-size: 200px;
}
@media (max-width: 992px) {
  .ClassActivation__code--zoomIn {
    margin-top: 60px;
    font-size: 60px;
  }
}
.ClassActivation__code--zoomOut {
  font-size: 60px;
  margin-bottom: 10px;
}
@media (max-width: 992px) {
  .ClassActivation__code--zoomOut {
    font-size: 40px;
  }
}
.ClassActivation__download {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
}
.ClassActivation__button {
  display: inline-block;
  transition: 250ms;
  appearance: none;
  padding: 20px 80px;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  font-size: 1.06em;
  text-decoration: none;
}
.ClassActivation__button:hover {
  text-decoration: none;
}
.ClassActivation__button--dark {
  background-color: #37274F;
  color: white;
}
.ClassActivation__button--dark:hover {
  color: #37274F;
  background-color: white;
}
.ClassActivation__button--light {
  background-color: white;
  color: #37274F;
}
.ClassActivation__button--light:hover {
  background-color: #37274F;
  color: white;
}
.ClassActivation__button--inactive {
  background-color: #F8FAFE;
  color: #D8CEDF;
  cursor: default;
  pointer-events: none;
}
.ClassActivation__button--inactive:hover {
  background-color: #F8FAFE;
  color: #D8CEDF;
}
@media (max-width: 992px) {
  .ClassActivation__button {
    padding: 15px;
    font-size: 11px;
  }
}
.ClassActivation__instructions h2 {
  font-size: 2.6em;
  text-align: center;
  color: #37274F;
}
@media (max-width: 992px) {
  .ClassActivation__instructions h2 {
    font-size: 2em;
  }
}
.ClassActivation__instructions span {
  display: block;
  text-align: center;
  color: #37274F;
  font-size: 1.33em;
  margin-bottom: 90px;
}
@media (max-width: 992px) {
  .ClassActivation__instructions span {
    margin-bottom: 30px;
    font-size: 1em;
  }
}
.ClassActivation__card {
  background: white;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 25px 30px;
  margin-bottom: 50px;
  min-height: 360px;
}
@media (max-width: 992px) {
  .ClassActivation__card {
    margin-bottom: 30px;
    min-height: unset;
  }
}
.ClassActivation__card__step {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 64px;
  border-radius: 50%;
  background-color: #f8fafe;
  margin-bottom: 30px;
  color: #37274F;
  font-size: 30px;
  font-weight: 600;
  box-shadow: 0px 2px 0px rgba(45, 45, 45, 0.15), 0px 2px 10px rgba(0, 0, 0, 0.05);
}
@media (max-width: 992px) {
  .ClassActivation__card__step {
    height: 45px;
    width: 45px;
    font-size: 20px;
  }
}
.ClassActivation__card h3 {
  font-size: 26px;
  color: #37274F;
}
@media (max-width: 992px) {
  .ClassActivation__card h3 {
    font-size: 18px;
  }
}
.ClassActivation__card p {
  font-size: 24px;
  color: #37274F;
}
@media (max-width: 992px) {
  .ClassActivation__card p {
    font-size: 15px;
  }
}
.ClassActivation__buttonGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.ClassActivation__buttonGroup a {
  padding: 20px 90px;
  margin-bottom: 25px;
}
.ClassActivation__addClass {
  color: #37274F;
  margin-bottom: 25px;
  font-weight: 600;
  cursor: pointer;
}
.ClassActivation__addClass i {
  margin-left: 10px;
}

.ClassCodeModal p {
  margin-bottom: 0;
  color: #37274F;
  padding: 15px;
  text-align: left;
}

.hero {
  position: relative;
  display: flex;
  justify-content: center;
  height: 100px;
  width: 100vw;
  margin-top: 68px;
  background-color: #37274F;
}
@media (min-width: 992px) {
  .hero {
    height: 170px;
  }
}
.hero h1 {
  color: white;
  margin-top: 40px;
  z-index: 1;
}
@media (min-width: 992px) {
  .hero h1 {
    margin-top: 90px;
  }
}
.hero svg {
  width: 100%;
  height: auto;
  object-fit: cover;
  fill: #37274F;
  position: absolute;
  left: 0;
  bottom: -50px;
  right: 0;
}
@media (min-width: 992px) {
  .hero svg {
    bottom: -100px;
  }
}

.team {
  padding-top: 100px;
  width: 100%;
  margin: 0 auto;
  background-color: #302746;
  overflow: hidden;
}
@media (min-width: 992px) {
  .team {
    padding-top: 200px;
  }
}
.team__background {
  background-color: #302746;
}
.team .container {
  max-width: 890px;
}
.team__members {
  display: flex;
  flex-wrap: wrap;
}
.team__member {
  width: 100%;
  margin-bottom: 30px;
}
@media (min-width: 690px) {
  .team__member {
    width: 50%;
    padding: 0 24px;
    margin-bottom: 60px;
  }
}
.team__member__image {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 35px;
  z-index: 1;
}
@media (min-width: 690px) {
  .team__member__image {
    margin-bottom: 50px;
  }
}
.team__member__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.team__member h4 {
  color: #FD5B24;
  font-size: 1.33rem;
  margin-bottom: 15px;
}
@media (min-width: 690px) {
  .team__member h4 {
    margin-bottom: 25px;
  }
}
.team__member p {
  font-size: 1.06rem;
  line-height: 1.85;
  color: white;
  white-space: pre-line;
}

.team__members .team__member .team__member__image:before,
.team__members .team__member .team__member__image:after {
  content: "";
  position: absolute;
  display: block;
  z-index: -1;
}
.team__members .team__member:nth-of-type(even) {
  padding-top: 60px;
}
@media (max-width: 559px) {
  .team__members .team__member:nth-of-type(odd) {
    padding-top: 60px;
  }
}
.team__members .team__member:nth-of-type(6n+1) .team__member__image:before {
  background-image: url("https://assets.senorwooly.com/static/images/teamshapes/circle.svg");
  width: 72px;
  height: 71px;
  top: -25px;
  left: -25px;
}
.team__members .team__member:nth-of-type(6n+2) .team__member__image:before {
  background-image: url("https://assets.senorwooly.com/static/images/teamshapes/ripple.svg");
  width: 126px;
  height: 21px;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
}
.team__members .team__member:nth-of-type(6n+2) .team__member__image:after {
  background-image: url("https://assets.senorwooly.com/static/images/teamshapes/rectangle.svg");
  width: 56px;
  height: 56px;
  right: -10px;
  bottom: -10px;
}
.team__members .team__member:nth-of-type(6n+3) .team__member__image:before {
  background-image: url("https://assets.senorwooly.com/static/images/teamshapes/triangle.svg");
  width: 80px;
  height: 77px;
  top: -45px;
  left: 30px;
}
.team__members .team__member:nth-of-type(6n+3) .team__member__image:after {
  background-image: url("https://assets.senorwooly.com/static/images/teamshapes/ripple.svg");
  width: 126px;
  height: 21px;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
}
.team__members .team__member:nth-of-type(6n+4) .team__member__image:after {
  background-image: url("https://assets.senorwooly.com/static/images/teamshapes/circle.svg");
  width: 72px;
  height: 71px;
  bottom: -25px;
  right: 80px;
  transform: scale(0.9);
}
.team__members .team__member:nth-of-type(6n+5) .team__member__image:before {
  background-image: url("https://assets.senorwooly.com/static/images/teamshapes/rectangle.svg");
  width: 56px;
  height: 56px;
  top: 60px;
  left: -25px;
  transform: rotate(20deg);
}
.team__members .team__member:nth-of-type(6n+6) .team__member__image:before {
  background-image: url("https://assets.senorwooly.com/static/images/teamshapes/ripple.svg");
  width: 126px;
  height: 21px;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
}
.team__members .team__member:nth-of-type(6n+6) .team__member__image:after {
  background-image: url("https://assets.senorwooly.com/static/images/teamshapes/circle.svg");
  width: 72px;
  height: 71px;
  bottom: 35px;
  right: -30px;
  transform: scale(0.9);
}

.signup__button {
  transition: 150ms;
  border: 1px solid #37274F;
  border-radius: 3px;
  color: #37274F;
  font-size: 18px;
  font-weight: 600;
  text-transform: unset;
  margin-bottom: 8px;
}
.signup__button:hover, .signup__button:focus, .signup__button:active, .signup__button.focus, .signup__button.active, .signup__button.active:hover {
  background-color: #37274F !important;
  color: white !important;
  border-color: #37274F !important;
}
.signup__disclaimer {
  display: none;
  text-align: center;
  padding: 2rem 0 1rem 0;
  margin-bottom: 0;
  font-size: 1rem;
  color: #6b6b6b;
}

.adminNovel__header {
  position: relative;
  margin-bottom: 80px;
}
@media (min-width: 769px) {
  .adminNovel__header {
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 769px) {
  .adminNovel__header h1, .adminNovel__header h3 {
    text-align: center;
  }
}
.adminNovel__header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  max-width: 500px;
}
@media (max-width: 1199px) {
  .adminNovel__header h1 {
    max-width: 300px;
  }
}
.adminNovel__header h3, .adminNovel__header a {
  font-size: 1.2rem;
}
.adminNovel__header a {
  display: block;
  transform: translateY(-50%);
  color: #746A80;
  font-weight: 600;
  margin-bottom: 15px;
}
@media (min-width: 769px) {
  .adminNovel__header a {
    position: absolute;
    left: 0;
    top: 50%;
  }
}
.adminNovel__header a:hover {
  text-decoration: none;
  color: #FD5B24;
}
.adminNovel__header a i {
  margin-right: 12px;
}
.adminNovel__level {
  margin-bottom: 60px;
}
.adminNovel__level h2 {
  margin-bottom: 30px;
}
.adminNovel__panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F9FAFC;
  border: 1px solid #D7D7DF;
  padding: 40px 20px;
  color: #37274F;
}
.adminNovel__panel:not(:last-of-type) {
  margin-bottom: 35px;
}
.adminNovel__panel div {
  display: flex;
  align-items: center;
}
.adminNovel__panel i {
  margin-right: 15px;
  font-size: 2rem;
  font-weight: 400;
}
.adminNovel__panel label {
  font-weight: 400;
  margin-bottom: 0;
  color: #FD5B24;
  text-decoration: underline;
}
.adminNovel__panel input[type=button] {
  background-color: #e6e8ec;
  border: 1px solid #CCCCCC;
  min-width: 211px;
  min-height: 40px;
  font-size: 1rem;
}
.adminNovel__panel--empty label {
  color: #37274F;
  text-decoration: none;
}
.adminNovel__panel--empty i {
  opacity: 0.5;
}
.adminNovel__status {
  display: flex;
  font-size: 12px;
  color: #37274F;
}
.adminNovel__status::after {
  content: "";
  display: block;
  margin: 0 12px 0 11px;
  background-color: #D7D7DF;
  width: 1px;
  height: 20px;
}
.adminNovel__deleteFile, .adminNovel__uploadFile {
  width: 40px;
  height: 40px;
  border: 0;
  margin-left: 10px;
}
.adminNovel__deleteFile i, .adminNovel__uploadFile i {
  color: white;
  opacity: 1;
  font-size: 16px;
  margin-right: 0;
  margin-top: 4px;
}
.adminNovel__deleteFile {
  background-color: #ff4141;
}
.adminNovel__uploadFile {
  background-color: #71ae71;
}

.reader-page-html {
  background-color: #1C002D;
}

.reader-page-body {
  overflow-x: hidden;
  background-color: #1C002D !important;
}

.reader-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ReaderPage {
  width: 100vw;
  height: 100%;
  background-color: #1C002D;
  position: relative;
}
.ReaderPage .GoBackButton {
  position: absolute;
  top: 0;
  left: 16px;
  border-radius: 6px;
  padding: 10px 20px;
  border-width: 0;
  background: #523d6f;
  box-shadow: 0px 2px 0px #241835;
}
.ReaderPage .GoBackButton i {
  margin-right: 10px;
}

.Topbar {
  position: absolute;
  width: 100%;
  z-index: 1;
  background-color: rgba(48, 32, 61, 0.9);
  height: 60px;
  top: 0;
  z-index: 1;
  display: none;
}
.Topbar h1 {
  margin: 0;
}

.Toolbar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
  margin: 10px auto;
  padding: 0 10px 12px 10px;
  background: #442F54;
  color: white;
  border-radius: 6px;
  width: 100%;
  max-width: 540px;
  z-index: 1;
}
@media (max-height: 500px) {
  .Toolbar {
    top: 0;
    left: 0;
    right: 0;
    max-width: unset;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
    transform: unset;
  }
}
@media (max-width: 500px) {
  .Toolbar {
    top: 0;
    left: 0;
    right: 0;
    max-width: unset;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
    transform: unset;
  }
}
.Toolbar__start, .Toolbar__end {
  display: flex;
}
.Toolbar__title {
  font-size: 1.05rem;
  color: white;
  margin-bottom: 0;
  margin-top: 6px;
  padding-left: 10px;
}
.Toolbar__zoom-icon {
  transform: matrix(-1, 0, 0, 1, 0, 0);
}
.Toolbar button {
  cursor: pointer;
  color: white;
  border: 0;
  font-size: 1.06rem;
  background: #442F54;
  border-radius: 6px;
}
.Toolbar .dropdown-menu__button.active i {
  transform: rotateX(180deg);
}
.Toolbar__shadow-button {
  box-shadow: 0px 2px 0px #241835;
  margin: 0 5px;
  width: 42px;
  height: 42px;
}
.Toolbar__shadow-button:focus, .Toolbar__shadow-button:active {
  outline: 0;
}
.Toolbar__shadow-button img {
  height: 17px;
  width: auto;
}
.Toolbar__shadow-button--wide {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 86px;
  padding: 0 11px;
}
.Toolbar__shadow-button--wide img {
  height: 22px;
  width: 22px;
}
.Toolbar__shadow-button--dropdown {
  width: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.Toolbar__shadow-button--dropdown i {
  transition: 150ms;
  font-size: 10px;
  margin-left: 7px;
  margin-top: 4px;
}
.Toolbar__shadow-button__tooltip {
  background-color: transparent;
  padding: 0;
  box-shadow: none;
  top: 66px !important;
}
.Toolbar__shadow-button__tooltip .rc-tooltip-arrow {
  border-bottom-color: #523d6f;
  border-width: 0 10px 10px;
  margin-left: unset !important;
  transform: translateX(-50%);
}
.Toolbar__shadow-button__tooltip .rc-tooltip-inner {
  padding: 5px 20px;
  display: flex;
  align-items: center;
  background-color: #523d6f;
  color: white;
}
.Toolbar__level {
  background-color: #442F54 !important;
  width: 175px;
  margin-top: 25px;
  margin-left: -25px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border: 0;
}
@media (min-width: 992px) {
  .Toolbar__level {
    width: 216px;
    margin-left: unset;
  }
}
.Toolbar__level ul li {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
}
.Toolbar__level ul li:not(:last-of-type) {
  border-bottom: 1px solid #382746 !important;
}
.Toolbar__level ul li:hover a, .Toolbar__level ul li.active a {
  color: #FD5B24 !important;
  text-decoration: none;
}
.Toolbar__level ul li a {
  display: flex;
  align-items: center;
  color: white !important;
  font-size: 1rem;
  width: 100%;
  height: 45px;
}
.Toolbar__back-button {
  color: white;
  display: flex;
  align-items: center;
  font-weight: 400;
  margin-top: 6px;
  text-decoration: none;
}
.Toolbar__back-button:hover, .Toolbar__back-button:active {
  text-decoration: none;
  color: white;
}
.Toolbar__back-button span {
  margin-left: 10px;
}
.Toolbar--indexes .ProgressPages {
  opacity: 0.3;
}

.Reader {
  flex: 1 1 auto;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}
@media (max-width: 500px) {
  @supports (-webkit-touch-callout: none) {
    .Reader {
      height: -webkit-fit-content;
    }
  }
}
.Reader img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.Reader__page {
  transition: 250ms;
  display: flex;
  align-items: center;
}
.Reader__image {
  transition: opacity 0.5s ease;
  opacity: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  display: none;
  user-select: none;
}
.Reader__image--show {
  transition: opacity 1s ease-out;
  opacity: 1;
  z-index: 0;
  display: grid;
}
@media (max-width: 500px) {
  .Reader__image--panel {
    align-items: center;
  }
}
.Reader__image picture {
  display: block;
  display: inline;
  max-height: 100vh;
}
.Reader__image img, .Reader__image source, .Reader__image picture {
  height: 100%;
  width: 100%;
  object-fit: contain;
  grid-row: 1;
  grid-column: 1;
}
@media (max-height: 500px) {
  .Reader__image img, .Reader__image source, .Reader__image picture {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .Reader__image img, .Reader__image source, .Reader__image picture {
    pointer-events: none;
  }
}

.Gorro {
  position: absolute;
  padding-left: 10px;
}
.Gorro__icon {
  cursor: pointer;
  border-width: 2px;
  border-style: solid;
  border-radius: 30px;
  border-color: transparent;
  transition: 0.5s;
}
.Gorro__icon--selected {
  border-color: red;
}

.ProgressPages {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
  background-color: #360D55;
  overflow: hidden;
  height: 8px;
  width: 100%;
}
.ProgressPages .ProgressBar {
  height: 100%;
  background-color: #FC5F2D;
  transition: 1s ease;
}

.PageNav {
  position: absolute;
  bottom: 15px;
  display: flex;
  justify-content: center;
  z-index: 1;
  height: 50px;
  width: 100%;
}
@media (max-width: 500px) {
  .PageNav--end {
    justify-content: flex-end;
  }
}
@media (max-height: 500px) {
  .PageNav {
    position: absolute;
    bottom: 0;
  }
}
.PageNav__button {
  background-color: #FD5B24;
  box-shadow: 0px 2px 0px #411B0E;
  border-radius: 6px;
  border-width: 0;
  color: white;
  cursor: pointer;
  padding: 10px 31px;
  margin: 0 10px;
}
@media (max-width: 500px) {
  .PageNav__button {
    padding: 10px 20px;
  }
}
.PageNav__button.disabled {
  visibility: hidden;
  pointer-events: none;
}
.PageNav__button--complete {
  font-weight: 600;
}
@media (max-width: 500px) {
  .PageNav__button--complete {
    padding: 10px 12px;
    font-size: 10px;
  }
}
.PageNav__button--complete i {
  margin-left: 10px;
}
.PageNav__play {
  background: #523d6f;
  box-shadow: 0px 2px 0px #241835;
  border-radius: 6px;
  border-width: 0;
  color: white;
  width: 48px;
}
.PageNav__play.disabled {
  visibility: hidden;
  pointer-events: none;
}
.PageNav .AudioPlayer {
  background-color: #523d6f;
  box-shadow: 0px 2px 0px #241835;
  border-radius: 6px;
  border-width: 0;
  color: white;
  height: 100%;
  transition: all 0.3s;
  width: 300px;
  padding: 0 25px;
}
@media (max-width: 500px) {
  .PageNav .AudioPlayer {
    position: relative;
    padding: 0 15px;
    max-width: 200px;
  }
}
.PageNav .AudioPlayer--hide {
  visibility: hidden;
  pointer-events: none;
  width: 50px;
  height: 50px;
}
.PageNav .AudioPlayer__play {
  background-color: transparent;
  width: unset;
  font-size: 28px;
}
.PageNav .AudioPlayer__play .far {
  font-size: inherit;
}
.PageNav .AudioPlayer__time {
  font-size: 10px;
  min-width: unset;
}
@media (max-width: 500px) {
  .PageNav .AudioPlayer__time {
    position: absolute;
    bottom: 9px;
    right: 15px;
    width: 131px;
    display: flex;
    justify-content: space-between;
    padding: 0px 2px;
    font-size: 8px;
  }
  .PageNav .AudioPlayer__time span:nth-of-type(2) {
    opacity: 0;
  }
}
@media (max-width: 500px) {
  .PageNav .AudioPlayer__range {
    margin: 0;
    width: unset !important;
    margin-top: -10px;
  }
}
.PageNav .AudioPlayer.stopped {
  width: 50px;
  padding: 0;
  display: flex;
  justify-content: center;
}
.PageNav .AudioPlayer.stopped .AudioPlayer__range,
.PageNav .AudioPlayer.stopped .AudioPlayer__time {
  display: none;
}
@media (max-width: 500px) {
  .PageNav .AudioPlayer.playing, .PageNav .AudioPlayer.paused {
    justify-content: unset;
  }
  .PageNav .AudioPlayer.playing .AudioPlayer__play, .PageNav .AudioPlayer.paused .AudioPlayer__play {
    margin-right: 12px;
    padding: 0;
  }
}

.TransitionView {
  transition: 0.2s ease-out;
}
.TransitionView--hide {
  opacity: 0;
  transition: 0.25s ease-in;
  pointer-events: none;
}

.viewmode__switch {
  position: relative;
  display: inline-block;
  width: 27px;
  height: 10px;
  background-color: #7D5A98;
  border-radius: 20px;
  margin-bottom: 0;
}
.viewmode__switch:after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #A384BB;
  top: -2px;
  left: -4px;
  transition: all 0.3s;
  box-shadow: 0px 1.5px 0px #392649;
}
.viewmode__switch--active {
  background-color: #7B2BBD;
}
.viewmode__switch--active:after {
  left: 14px;
  background-color: #C64EFF;
}

.Flyout--reader-glossary {
  width: 300px;
}
@media (min-width: 992px) {
  .Flyout--reader-glossary {
    width: 380px;
  }
}
.Flyout--reader-glossary .Flyout__header,
.Flyout--reader-glossary .Flyout__body {
  background-color: #160023;
  color: white;
}
.Flyout--reader-glossary .Flyout__header {
  border-bottom: 0;
  padding: 30px 32px 15px 32px;
}
@media (min-width: 992px) {
  .Flyout--reader-glossary .Flyout__header {
    padding: 25px 40px 15px 40px;
  }
}
.Flyout--reader-glossary .Flyout__header__title {
  color: white;
  font-size: 1.05rem;
}
.Flyout--reader-glossary .Flyout__header__close {
  color: white;
  font-size: 1.05rem;
}
.Flyout--reader-glossary .Flyout__body {
  padding: 0;
}

.Indexes {
  max-width: 500px;
  margin: 0 auto 20px auto;
  background: #1C002D;
  padding-top: 90px;
  padding-bottom: 20px;
}
@media only screen and (max-device-height: 812px) and (orientation: landscape) {
  .Indexes {
    margin-top: 84px;
  }
  .Indexes__item:nth-of-type(odd) {
    margin-right: 10px;
  }
}
.Indexes__items {
  display: flex;
  flex-wrap: wrap;
}
.Indexes__item {
  width: calc(24% - 5px);
  height: 170px;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
}
.Indexes__item.active {
  border: 5px solid #FD5B24;
  border-radius: 3px;
}
.Indexes__item.active span {
  background-color: #FD5B24;
}
@media (max-width: 500px) {
  .Indexes__item {
    width: calc(50% - 5px);
    height: 365px;
    margin-bottom: 10px;
  }
}
@media (max-width: 500px) {
  .Indexes__item:nth-of-type(odd) {
    margin-right: 10px;
  }
}
@media (min-width: 992px) {
  .Indexes__item:not(:nth-of-type(4n+0)) {
    margin-right: 12px;
  }
}
.Indexes__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Indexes__item span {
  position: absolute;
  background-color: #160023;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 4px 14px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 6px;
  white-space: nowrap;
}
@media (max-width: 500px) {
  .Indexes__item span {
    font-size: 1.35rem;
    padding: 2px 12px;
  }
}
.Indexes button {
  display: block;
  background-color: #FD5B24;
  box-shadow: 0px 2px 0px #411B0E;
  border-radius: 6px;
  border-width: 0;
  color: white;
  cursor: pointer;
  padding: 10px 31px;
  margin: 20px auto 0 auto;
  font-size: 1rem;
  font-weight: 600;
}

.panelDesc {
  max-width: 265px;
  background-color: #160023;
  border: 1px solid #7B2BBD;
  border-radius: 5px;
  padding: 0;
  box-shadow: none;
  top: 90px !important;
}
.panelDesc .rc-tooltip-arrow {
  border-bottom-color: #7B2BBD;
  top: -10px;
  border-width: 0 10px 10px;
}
.panelDesc .rc-tooltip-inner {
  background-color: #160023;
  color: white;
  padding: 0;
}
.panelDesc__header {
  display: flex;
  background-color: #7B2BBD;
  padding: 5px 10px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.panelDesc__header img {
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
.panelDesc__header span {
  font-weight: 600;
  font-size: 0.86rem;
}
.panelDesc__body {
  padding: 15px 10px;
}
.panelDesc__body p {
  font-size: 0.85rem;
}
.panelDesc__body button {
  width: 100%;
  background-color: #442F54;
  color: white;
  padding: 11px 0;
  border: 0;
  box-shadow: 0px 2px 0px #241835;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.86rem;
}

.viewLabelContainer {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 75px;
  transform: translateX(-50%);
}
.viewLabelContainer .viewLabel {
  background-color: #37274F;
  border-radius: 3px;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  padding: 5px 15px;
  text-align: center;
}
.viewLabelContainer .viewLabel:not(:last-of-type) {
  margin-bottom: 15px;
}

.Shortcuts__button {
  z-index: 1;
  position: absolute;
  bottom: 14px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-size: 16px;
  background-color: #523d6f;
  color: white;
  border: 0;
  border-radius: 8px;
}
.Shortcuts__tooltip {
  background-color: transparent;
  padding: 0;
  box-shadow: none;
}
.Shortcuts__tooltip .rc-tooltip-arrow {
  display: none;
}
.Shortcuts__tooltip .rc-tooltip-inner {
  display: flex;
  flex-direction: column;
  padding: 14px;
  min-width: 266px;
  background-color: #523d6f;
  color: #DECAFB;
  border-radius: 8px;
}
.Shortcuts__tooltip .rc-tooltip-inner h4 {
  font-size: 14px;
  margin-bottom: 18px;
  color: inherit;
}
.Shortcuts__tooltip .rc-tooltip-inner ul {
  padding: 0;
  margin: 0;
}
.Shortcuts__tooltip .rc-tooltip-inner ul li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.Shortcuts__tooltip .rc-tooltip-inner ul li:not(:last-of-type) {
  border-bottom: 1px solid #6A528B;
  margin-bottom: 12px;
  padding-bottom: 10px;
}
.Shortcuts__tooltip .rc-tooltip-inner ul li i, .Shortcuts__tooltip .rc-tooltip-inner ul li img {
  margin-right: 12px;
  width: 16px;
}
.Shortcuts__tooltip .rc-tooltip-inner ul li img {
  height: 16px;
  object-fit: cover;
}
.Shortcuts__tooltip .rc-tooltip-inner ul li span:last-of-type {
  color: white;
}

@media (max-width: 768px) {
  .StoryNovels {
    display: flex;
    flex-direction: column-reverse;
  }
}
.StoryNovels__link {
  position: relative;
  display: block;
}
.StoryNovels__overlay {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #FD5B24;
  padding: 8px 12px;
  border-bottom-left-radius: 6px;
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 0 0 #c4532e;
}
.StoryNovels__variants {
  margin-bottom: 2rem;
}
.StoryNovels__variants h2 {
  font-size: 1.33em;
  color: #37274F;
  margin-bottom: 0.65rem;
}
.StoryNovels__variants p {
  font-size: 0.9rem;
}
.StoryNovels__variants__list {
  padding: 0;
  margin: 0;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.StoryNovels__variants__list p {
  padding: 1rem;
  color: #37274F;
  margin-bottom: 0;
  white-space: pre-wrap;
}
.StoryNovels__variants__list li {
  position: relative;
  cursor: pointer;
  color: #37274F;
  font-weight: 600;
  padding: 1rem 1.6rem 0.85rem 1.6rem;
}
.StoryNovels__variants__list li:hover, .StoryNovels__variants__list li.active {
  color: #FD5B24;
}
.StoryNovels__variants__list li:hover:before, .StoryNovels__variants__list li.active:before {
  content: "";
  width: 7px;
  height: 100%;
  background-color: #FD5B24;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.StoryNovels__variants__list li:hover, .StoryNovels__variants__list li:active, .StoryNovels__variants__list li:focus {
  text-decoration: none;
  border-bottom: 0;
}
.StoryNovels__variants__list li:last-of-type {
  padding-bottom: 1rem;
}
.StoryNovels__variants__list li:not(:last-of-type):after {
  content: "";
  width: 87%;
  height: 1px;
  background-color: #d9d9d9;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.NovelModal {
  background-color: #1C002D;
  z-index: 999999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.NovelModal__toggle {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 10px;
  margin-top: 25px;
  font-size: 1.75rem;
  background-color: transparent;
  border: 0;
  outline: 0;
}
@media (max-width: 768px) {
  .NovelModal__toggle {
    font-size: 1rem;
  }
}
.NovelModal__toggle__tooltip {
  max-width: 275px;
  background-color: #FD5B24;
}
.NovelModal__toggle__tooltip .rc-tooltip-content,
.NovelModal__toggle__tooltip .rc-tooltip-inner {
  background-color: #FD5B24;
  color: white;
  border-radius: 6px;
}
.NovelModal__toggle__tooltip .rc-tooltip-arrow {
  border-left-color: #FD5B24;
}
.NovelModal__toggle__tooltip span {
  font-weight: 600;
  color: white;
  text-align: center;
  display: block;
  padding: 4px 0;
}

.NovelStoreBlock h3 {
  margin-bottom: 0.5rem;
}
.NovelStoreBlock span {
  display: block;
  color: #37274F;
  font-size: 14px;
  margin-bottom: 0.25rem;
}
.NovelStoreBlock a img {
  width: 100%;
  display: block;
  margin: 0 auto 0 auto;
}
.NovelStoreBlock p {
  cursor: pointer;
  color: #FD5B24;
  text-decoration: underline;
  font-weight: 600;
  max-width: 150px;
  text-align: center;
  margin: 0 auto;
}
.NovelStoreBlock__modal {
  padding-top: 250px;
  overflow: scroll;
}
@media (max-width: 992px) {
  .NovelStoreBlock__modal {
    background-color: #37274F;
  }
}
@media (max-width: 992px) {
  .NovelStoreBlock__modal .modal-dialog {
    margin: 0;
  }
}
.NovelStoreBlock__modal .modal-content {
  background-color: transparent;
}
.NovelStoreBlock__modal .modal-content i {
  cursor: pointer;
  position: absolute;
  font-size: 1.5rem;
  color: white;
  right: 1.25rem;
  top: 1.25rem;
  z-index: 99;
}
@media (min-width: 992px) {
  .NovelStoreBlock__modal .modal-content {
    background-color: #37274F;
  }
}
@media (max-width: 992px) {
  .NovelStoreBlock__modal .modal-content {
    border-radius: 0;
    box-shadow: none;
    border: 0;
  }
  .NovelStoreBlock__modal .modal-content i {
    top: -175px;
    right: 20px;
  }
}
.NovelStoreBlock__modal .modal-body {
  background-color: #37274F;
}
.NovelStoreBlock__modal .modal-body img {
  display: block;
  margin: -200px auto 1.5rem auto;
}
.NovelStoreBlock__modal .modal-body h2 {
  font-size: 2rem;
  color: white;
  text-align: center;
}
.NovelStoreBlock__modal .modal-body h2 span {
  color: #FD5B24;
}
.NovelStoreBlock__modal .modal-body p {
  color: white;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 2rem;
}
.NovelStoreBlock__modal .modal-body p span {
  color: #FD5B24;
}
.NovelStoreBlock__modal .modal-body ol {
  color: white;
  max-width: 620px;
  margin: 0 auto;
  list-style: none;
  counter-reset: list-counter;
  padding: 0;
}
.NovelStoreBlock__modal .modal-body ol li {
  counter-increment: list-counter;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  font-size: 1.15rem;
  margin-bottom: 2rem;
  padding-bottom: 0;
}
.NovelStoreBlock__modal .modal-body ol li:before {
  content: counter(list-counter);
  background-color: #FD5B24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: white;
  margin-right: 1rem;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
}
.NovelStoreBlock__modal .modal-footer {
  padding: 0;
  background-color: white;
}
.NovelStoreBlock__modal .modal-footer a {
  display: block;
  padding: 1.15rem 0;
  width: 100%;
  text-align: center;
  font-size: 1.15rem;
  color: #37274F;
  font-weight: 600;
}

.marktBody {
  background-color: white;
}

.headingMarkt {
  color: #410064;
  text-align: center;
  padding: 4rem 0;
}
@media (min-width: 992px) {
  .headingMarkt {
    padding: 6rem 0;
  }
}
.headingMarkt span {
  color: #FD5B24;
}
.headingMarkt h2 {
  font-size: 2rem;
  color: inherit;
  margin-bottom: 2.5rem;
}
@media (min-width: 992px) {
  .headingMarkt h2 {
    font-size: 3.33rem;
  }
}
.headingMarkt p {
  font-size: 1.4rem;
  color: #410064;
  margin-bottom: 0;
}
.headingMarkt p:first-child {
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .headingMarkt p {
    font-size: 2.33rem;
  }
}

.twoSides {
  position: relative;
  overflow: hidden;
}
.twoSides .container-xl {
  padding: 0 15px;
}
.twoSides__arrow {
  position: absolute;
  left: 50%;
  top: 6rem;
  transform: translateX(-50%);
  z-index: 1;
  padding: 1.5rem 2.5rem;
  background-color: #410064;
}
@media (max-width: 992px) {
  .twoSides__arrow {
    display: none;
  }
}
.twoSides__arrow h4 {
  font-size: 2em;
  color: white;
  max-width: 235px;
  text-align: center;
}
.twoSides__arrow h4 span {
  color: #FD5B24;
}
.twoSides__arrow:before {
  content: "";
  position: absolute;
  left: -65px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 85px solid transparent;
  border-bottom: 85px solid transparent;
  border-right: 85px solid #410064;
}
.twoSides__arrow:after {
  content: "";
  position: absolute;
  right: -65px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 85px solid transparent;
  border-bottom: 85px solid transparent;
  border-left: 85px solid #410064;
}
.twoSides h2 {
  color: #410064;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  order: 1;
}
@media (min-width: 992px) {
  .twoSides h2 {
    text-align: left;
    font-size: 3.3rem;
  }
}
.twoSides h2 span {
  display: block;
}
.twoSides a {
  margin: 0 auto;
  margin-bottom: 1.5rem;
  order: 3;
}
@media (min-width: 992px) {
  .twoSides a {
    order: 2;
    margin-bottom: 3rem;
  }
}
.twoSides img {
  display: block;
  width: 100%;
  height: auto;
  order: 2;
  max-width: 400px;
  margin: auto auto 2rem auto;
}
@media (min-width: 992px) {
  .twoSides img {
    order: 3;
    margin-bottom: 2rem;
  }
}
@media (min-width: 1200px) {
  .twoSides img {
    max-width: 550px;
  }
}
.twoSides__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.twoSides__left {
  padding: 4.5rem 0 2rem 0;
}
@media (min-width: 992px) {
  .twoSides__left {
    padding: 17rem 0 0 0;
  }
}
@media (min-width: 1200px) {
  .twoSides__left {
    padding: 14rem 0 0 0;
  }
  .twoSides__left .twoSides__content {
    align-items: flex-start;
  }
  .twoSides__left .twoSides__content h2, .twoSides__left .twoSides__content a {
    margin-left: 150px;
  }
}
@media (min-width: 1200px) {
  .twoSides__left {
    padding: 12rem 0 0 0;
  }
}
.twoSides__left h2 span {
  color: #FD5B24;
}
.twoSides__right {
  padding: 4.5rem 0 2rem 0;
  background-color: #FD5B24;
}
@media (min-width: 992px) {
  .twoSides__right {
    padding: 17rem 0 0 0;
  }
}
@media (min-width: 1200px) {
  .twoSides__right {
    padding: 14rem 0 0 0;
  }
  .twoSides__right:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100vw;
    top: 0;
    left: 0;
    background-color: #FD5B24;
    z-index: -1;
  }
  .twoSides__right .twoSides__content {
    align-items: flex-end;
    height: 100%;
  }
  .twoSides__right .twoSides__content h2, .twoSides__right .twoSides__content a {
    margin-right: 150px;
    text-align: right;
  }
}
@media (min-width: 1200px) {
  .twoSides__right {
    padding: 12rem 0 0 0;
  }
}
.twoSides__right h2 span {
  color: white;
}
.twoSides--white .twoSides__right {
  background-color: white;
}
.twoSides--white .twoSides__right h2 span {
  color: #FD5B24;
}
@media (min-width: 992px) {
  .twoSides--white .twoSides__right:before {
    background-color: white;
  }
}

.sectionMarkt {
  background-color: #410064;
  padding: 4rem 0;
}
.sectionMarkt .equal {
  align-items: center;
}
.sectionMarkt img {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .sectionMarkt img {
    margin-bottom: 0;
  }
}
.sectionMarkt__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 992px) {
  .sectionMarkt__content {
    display: block;
  }
}
.sectionMarkt__content h2 {
  color: white;
  font-size: 2rem;
  max-width: 470px;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .sectionMarkt__content h2 {
    font-size: 3rem;
  }
}
.sectionMarkt__content h2 span {
  color: #FD5B24;
}
.sectionMarkt__content p {
  max-width: 470px;
  font-size: 1.4rem;
  color: white;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .sectionMarkt__content p {
    font-size: 1.8rem;
  }
}
@media (max-width: 992px) {
  .sectionMarkt__content a span {
    display: none;
    align-self: center;
  }
}

.uspMarkt {
  padding: 4rem 0;
}
@media (min-width: 992px) {
  .uspMarkt {
    padding: 8rem 0;
  }
}
.uspMarkt__usp {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}
.uspMarkt__usp img {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin-bottom: 1.5rem;
}
.uspMarkt__usp span {
  display: block;
  color: #410064;
  text-align: center;
}
.uspMarkt__usp span:first-of-type, .uspMarkt__usp span:last-of-type {
  font-size: 1.2rem;
}
.uspMarkt__usp span:nth-of-type(2) {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.3;
}

.readyMarkt {
  padding: 0 0 4rem 0;
}
@media (min-width: 992px) {
  .readyMarkt {
    padding: 0 0 8rem 0;
  }
}
.readyMarkt .equal {
  align-items: center;
}
.readyMarkt img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 303px;
  margin: 0 auto;
  margin-bottom: 2.5rem;
}
@media (min-width: 992px) {
  .readyMarkt img {
    max-width: 450px;
    margin-bottom: 0;
  }
}
.readyMarkt__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 992px) {
  .readyMarkt__content {
    display: block;
  }
  .readyMarkt__content .btnMarkt__group {
    max-width: 324px;
  }
}
.readyMarkt__content h2 {
  font-size: 2rem;
  color: #410064;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .readyMarkt__content h2 {
    font-size: 4rem;
    margin-bottom: 3.5rem;
  }
}

.introMarkt {
  padding: 4rem 0;
  text-align: center;
}
@media (min-width: 992px) {
  .introMarkt {
    padding: 6rem 0;
  }
}
.introMarkt h2 {
  color: #410064;
  font-size: 2rem;
}
.introMarkt h2:first-child {
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .introMarkt h2 {
    font-size: 4rem;
  }
}
.introMarkt h2 span {
  color: #FD5B24;
}
.introMarkt p {
  font-size: 1.4rem;
  color: #410064;
  margin-bottom: 0;
}
.introMarkt p:first-child {
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .introMarkt p {
    font-size: 2.33rem;
  }
}

.videoMarkt {
  padding: 4rem 0;
  background-color: #410064;
}
@media (min-width: 992px) {
  .videoMarkt {
    padding: 8rem 0;
  }
}
.videoMarkt--pbSmall {
  padding-bottom: 4rem;
}
.videoMarkt h3 {
  color: white;
  font-size: 2rem;
}
@media (min-width: 992px) {
  .videoMarkt h3 {
    font-size: 3rem;
  }
}
.videoMarkt h3 div {
  color: #FD5B24;
  display: inline-block;
}
.videoMarkt h3 div.inline {
  display: inline-block;
}
.videoMarkt h3 span {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  color: #FD5B24;
  margin-bottom: 0.5rem;
}
@media (min-width: 992px) {
  .videoMarkt h3 span {
    font-size: 1.85rem;
  }
}
.videoMarkt p {
  font-size: 1.45rem;
  color: white;
  margin-bottom: 4rem;
}
@media (min-width: 992px) {
  .videoMarkt p {
    font-size: 1.5rem;
  }
}
.videoMarkt--music {
  z-index: 0;
  width: 100%;
  height: 200px;
  border-radius: 15px;
  margin-bottom: 1rem;
  overflow: hidden;
}
@media (min-width: 769px) {
  .videoMarkt--music {
    height: 325px;
  }
}
@media (min-width: 1200px) {
  .videoMarkt--music {
    height: 475px;
  }
}
.videoMarkt video {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 1rem;
  object-fit: cover;
}
.videoMarkt__image {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 4rem;
}
.videoMarkt__image img {
  width: 100%;
}
.videoMarkt__video {
  position: relative;
  margin-bottom: 4rem;
}
.videoMarkt__video button {
  display: block;
  margin: 0 auto;
}
.videoMarkt__video figure {
  position: relative;
}
.videoMarkt__video figure i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  color: white;
  z-index: 10;
}
@media (min-width: 992px) {
  .videoMarkt__video figure i {
    font-size: 12rem;
  }
}
@media (min-width: 768px) {
  .videoMarkt__video__button {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 768px) {
  .videoMarkt__video__button--novel {
    bottom: -20px;
  }
}
.videoMarkt__message {
  display: none;
  padding: 2rem 1.5rem;
  border-radius: 15px;
  background-image: url(https://assets.senorwooly.com/static/images/marketing/messageArrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  max-width: max-content;
}
@media (min-width: 1350px) {
  .videoMarkt__message {
    display: block;
    padding: 1rem 4.5rem 1rem 1.5rem;
    margin-top: -12rem;
    margin-left: 2rem;
  }
}
.videoMarkt__message h4 {
  color: white;
  font-size: 1.4rem;
  z-index: 1;
}
.videoMarkt__message p {
  color: #410064;
  margin-bottom: 0;
  font-size: 1.2rem;
  font-weight: 600;
  z-index: 1;
  max-width: 330px;
}
@media (max-width: 992px) {
  .videoMarkt.videoMarkt--cur .videoMarkt__video {
    margin-bottom: 2rem;
  }
  .videoMarkt.videoMarkt--cur button {
    display: block;
    margin: 0 auto;
  }
}

.aniMarkt {
  padding-bottom: 4rem;
}
.aniMarkt--top {
  padding-top: 4rem;
}
@media (max-width: 992px) {
  .aniMarkt--reverse .row {
    flex-direction: column-reverse;
  }
}
.aniMarkt .row.equal {
  align-items: center;
}
.aniMarkt video, .aniMarkt img {
  width: 100%;
}
.aniMarkt img {
  display: block;
  max-height: 575px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .aniMarkt img {
    margin-top: 2rem;
  }
}
.aniMarkt__label {
  display: block;
  color: #FD5B24;
  font-size: 1.33rem;
}
@media (min-width: 992px) {
  .aniMarkt__label {
    font-size: 1.8rem;
  }
}
.aniMarkt h3 {
  color: #410064;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}
@media (min-width: 992px) {
  .aniMarkt h3 {
    font-size: 3.33rem;
  }
}
.aniMarkt h3 span {
  color: #FD5B24;
}
.aniMarkt p {
  color: #410064;
  font-size: 1.2rem;
  margin-bottom: 0;
}
.aniMarkt p:nth-of-type(2) {
  margin-top: 1.5rem;
}
@media (min-width: 992px) {
  .aniMarkt p {
    font-size: 1.6rem;
  }
}

.curMarkt {
  padding: 4rem 0 4rem 0;
  background-color: #410064;
}
@media (min-width: 992px) {
  .curMarkt {
    padding: 6rem 0 0 0;
  }
}
@media (min-width: 1200px) {
  .curMarkt {
    padding: 10rem 0 6rem 0;
  }
}
.curMarkt img {
  width: 100%;
  margin-bottom: -150px;
}
@media (min-width: 992px) {
  .curMarkt img {
    position: absolute;
    margin-bottom: 0;
    bottom: -50px;
  }
}
@media (min-width: 1200px) {
  .curMarkt img {
    bottom: -180px;
  }
}
.curMarkt .curMarkt__usp {
  color: #FD5B24;
  font-size: 1.4rem;
  font-weight: 400;
}
@media (min-width: 1200px) {
  .curMarkt .curMarkt__usp {
    font-size: 2rem;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
  }
}
.curMarkt h2 {
  color: white;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .curMarkt h2 {
    font-size: 2.5rem;
  }
}
@media (min-width: 1200px) {
  .curMarkt h2 {
    margin-top: 2.5rem;
    font-size: 3.33rem;
  }
}
.curMarkt h2 span {
  color: #FD5B24;
}
.curMarkt p {
  color: white;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.curMarkt p:nth-of-type(2) {
  margin-top: 1.5rem;
}
@media (min-width: 1200px) {
  .curMarkt p {
    font-size: 1.8rem;
  }
}
.curMarkt a {
  width: 100%;
  margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
  .curMarkt a {
    width: unset;
  }
}
.curMarkt--white {
  background-color: white;
}
.curMarkt--white h2, .curMarkt--white p {
  color: #410064;
}

.ctaMarkt {
  padding: 8rem 0 4rem 0;
  background-color: #FD5B24;
  text-align: center;
}
@media (min-width: 992px) {
  .ctaMarkt {
    padding: 4rem 0;
  }
}
@media (min-width: 1200px) {
  .ctaMarkt {
    padding: 8rem 0;
  }
}
.ctaMarkt h2 {
  color: white;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .ctaMarkt h2 {
    margin-top: 2.75rem;
    font-size: 2.5rem;
  }
}
@media (min-width: 1200px) {
  .ctaMarkt h2 {
    font-size: 3.33rem;
  }
}
.ctaMarkt h2 span {
  color: #410064;
}
@media (max-width: 992px) {
  .ctaMarkt h2 span {
    display: block;
  }
}
.ctaMarkt p {
  color: white;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.ctaMarkt p:nth-of-type(2) {
  margin-top: 1.5rem;
}
@media (min-width: 992px) {
  .ctaMarkt p {
    font-size: 1.8rem;
  }
}
.ctaMarkt .btnMarkt__group--horizontal {
  justify-content: center;
}

.learnWithMarkt {
  padding: 4rem 0;
}
@media (min-width: 992px) {
  .learnWithMarkt {
    padding: 6rem 0;
  }
}
.learnWithMarkt .row.equal {
  align-items: center;
}
.learnWithMarkt img {
  margin: 0 auto;
  width: auto;
  max-height: 400px;
  max-width: 100%;
}
@media (max-width: 992px) {
  .learnWithMarkt img {
    margin-bottom: 2rem;
    max-height: 300px;
  }
}
.learnWithMarkt__label {
  font-size: 1.6rem;
  font-weight: 400;
  color: #410064;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .learnWithMarkt__label {
    font-size: 1.85rem;
  }
}
@media (min-width: 1200px) {
  .learnWithMarkt__label {
    font-size: 2.33rem;
  }
}
.learnWithMarkt__label span {
  color: #FD5B24;
}
.learnWithMarkt h2 {
  color: #410064;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .learnWithMarkt h2 {
    margin-top: 1.5rem;
    font-size: 2.75rem;
  }
}
@media (min-width: 1200px) {
  .learnWithMarkt h2 {
    margin-top: 2.5rem;
    font-size: 4rem;
  }
}
.learnWithMarkt h2 span {
  color: #FD5B24;
  display: block;
}
@media (max-width: 992px) {
  .learnWithMarkt a {
    width: 100%;
  }
}

.callMarkt {
  background-color: #410064;
  overflow: hidden;
  padding-bottom: 4rem;
}
@media (min-width: 992px) {
  .callMarkt {
    padding-bottom: 0;
  }
}
.callMarkt .row.equal {
  align-items: center;
  text-align: center;
}
.callMarkt img {
  margin-bottom: 1.5rem;
}
.callMarkt__cutImage {
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .callMarkt__cutImage {
    margin-bottom: -6rem !important;
  }
}
.callMarkt img {
  width: 100%;
  height: auto;
}
.callMarkt h2 {
  color: white;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .callMarkt h2 {
    font-size: 2.33rem;
  }
}

.flyoutMarkt {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: white;
  width: 100vw;
}
@media (min-width: 992px) {
  .flyoutMarkt {
    width: 787px;
  }
}
.flyoutMarkt__container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 11000;
}
.flyoutMarkt__overlay {
  background-color: rgba(22, 0, 34, 0.85);
  width: 100vw;
  height: 100vh;
  cursor: pointer;
}
.flyoutMarkt__header {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-top: 30px;
  padding-right: 30px;
}
.flyoutMarkt__header i {
  font-size: 2rem;
  color: #410064;
  cursor: pointer;
}
.flyoutMarkt__readmore {
  display: block;
  text-align: center;
  text-decoration: underline;
  margin-top: 1.25rem;
}
.flyoutMarkt__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  overflow: scroll;
  z-index: 1;
  padding: 30px 0;
}
@media (max-width: 992px) {
  .flyoutMarkt__body {
    padding-bottom: 80px;
  }
}
@media (min-width: 992px) {
  .flyoutMarkt__body {
    align-items: flex-end;
  }
}
.flyoutMarkt__body img {
  width: 100%;
  max-width: 210px;
  height: auto;
  margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .flyoutMarkt__body img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -165px;
    max-width: 350px;
    margin-bottom: 0;
  }
}
.flyoutMarkt__body__content {
  margin: 0 auto;
  padding: 0 15px;
}
@media (min-width: 992px) {
  .flyoutMarkt__body__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 45px auto 0;
    max-width: 530px;
    padding: 0;
  }
}
.flyoutMarkt__body__content h1 {
  color: #410064;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .flyoutMarkt__body__content h1 {
    font-size: 3.33rem;
    margin-bottom: 3rem;
  }
}
.flyoutMarkt__body__content h1 span {
  color: #FD5B24;
}
.flyoutMarkt__body__content .btnMarkt__group {
  width: 100%;
}
.flyoutMarkt__body__content .btnMarkt__group .btnMarkt {
  display: block;
}
@media (min-width: 992px) {
  .flyoutMarkt__body__content .btnMarkt__group {
    width: 385px;
  }
}
.flyoutMarkt__body__content--hasIntro {
  align-items: flex-start;
}
.flyoutMarkt__body__content--hasIntro h1 {
  margin-bottom: 2rem;
}
.flyoutMarkt__body__content--hasIntro p {
  color: #410064;
  font-size: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .flyoutMarkt__body__content--hasIntro p {
    font-size: 1.33rem;
  }
}

.imgMarkt {
  margin-bottom: 5rem;
}
@media (min-width: 992px) {
  .imgMarkt:nth-of-type(even) .row.equal {
    flex-direction: row-reverse;
  }
  .imgMarkt:nth-of-type(even) img {
    margin-right: auto;
    margin-left: unset;
  }
}
.imgMarkt .row.equal {
  align-items: center;
  justify-content: center;
}
@media (max-width: 992px) {
  .imgMarkt .row.equal {
    flex-direction: column-reverse;
  }
}
.imgMarkt img {
  display: block;
  width: 100%;
}
@media (min-width: 992px) {
  .imgMarkt img {
    max-width: 500px;
    margin-left: auto;
  }
}
@media (max-width: 992px) {
  .imgMarkt img {
    margin-bottom: 3rem;
  }
}
.imgMarkt h3 {
  color: #410064;
  margin-bottom: 0.75rem;
  font-size: 2rem;
}
@media (min-width: 992px) {
  .imgMarkt h3 {
    font-size: 3rem;
  }
}
.imgMarkt p {
  white-space: pre-line;
  margin-bottom: 0;
  color: #410064;
  font-size: 1.33rem;
}
@media (min-width: 992px) {
  .imgMarkt p {
    font-size: 1.6rem;
  }
}

.purchaseMarkt {
  padding: 4rem 0;
}
.purchaseMarkt .row.equal {
  align-items: center;
}
@media (max-width: 992px) {
  .purchaseMarkt .row.equal {
    flex-direction: column-reverse;
  }
}
.purchaseMarkt h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #410064;
}
.purchaseMarkt h2 span {
  color: #FD5B24;
}
@media (min-width: 992px) {
  .purchaseMarkt h2 {
    font-size: 3rem;
  }
}
.purchaseMarkt__content {
  max-width: 625px;
}
.purchaseMarkt p {
  margin-bottom: 2rem;
  color: #410064;
  font-size: 1.4rem;
}
@media (min-width: 992px) {
  .purchaseMarkt p {
    font-size: 1.85rem;
  }
}
.purchaseMarkt ol, .purchaseMarkt ul {
  padding: 0;
  margin: 0;
  color: #410064;
}
.purchaseMarkt ol {
  padding-left: 1.85rem;
  margin-bottom: 4rem;
  font-size: 1.85rem;
  font-size: 1.4rem;
}
@media (min-width: 992px) {
  .purchaseMarkt ol {
    font-size: 1.85rem;
  }
}
.purchaseMarkt ul {
  margin-bottom: 4rem;
  font-size: 1.4rem;
}
@media (min-width: 992px) {
  .purchaseMarkt ul {
    font-size: 1.5rem;
  }
}
.purchaseMarkt ul li span {
  color: #FD5B24;
  font-weight: 600;
}
.purchaseMarkt img {
  width: 100%;
  height: auto;
}
@media (max-width: 992px) {
  .purchaseMarkt img {
    margin-bottom: 2.75rem;
  }
}
.purchaseMarkt .btnMarkt__group {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .purchaseMarkt .btnMarkt__group {
    flex-direction: row;
  }
}
.purchaseMarkt .btnMarkt__group .btnMarkt:not(:last-child) {
  margin-bottom: 1.2rem;
}
@media (min-width: 992px) {
  .purchaseMarkt .btnMarkt__group .btnMarkt:not(:last-child) {
    margin-right: 1rem;
    margin-bottom: 0;
  }
}

.pointMarkt {
  padding: 0 0 4rem 0;
}
@media (min-width: 992px) {
  .pointMarkt {
    padding: 6rem 0;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .pointMarkt .row {
    display: flex;
    flex-wrap: wrap;
  }
}
.pointMarkt__point {
  text-align: center;
}
@media (max-width: 992px) {
  .pointMarkt__point {
    margin-bottom: 4rem;
  }
}
.pointMarkt img {
  height: 170px;
  width: auto;
  margin-bottom: 2rem;
}
.pointMarkt p {
  color: #410064;
  font-size: 1.2rem;
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .pointMarkt p {
    font-size: 1.6rem;
  }
}
.pointMarkt .btnMarkt__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}
@media (min-width: 992px) {
  .pointMarkt .btnMarkt__group {
    flex-direction: row;
    justify-content: center;
    align-items: unset;
  }
}
@media (max-width: 992px) {
  .pointMarkt .btnMarkt__group .btnMarkt {
    max-width: 245px;
  }
}
.pointMarkt .btnMarkt__group .btnMarkt:not(:last-child) {
  margin-bottom: 1.2rem;
  margin-right: 0;
}
@media (min-width: 992px) {
  .pointMarkt .btnMarkt__group .btnMarkt:not(:last-child) {
    margin-right: 1rem;
    margin-bottom: 0;
  }
}

.defaultMarkt {
  padding: 4rem 0;
  text-align: center;
}
@media (min-width: 992px) {
  .defaultMarkt {
    padding: 6rem 0;
  }
}
.defaultMarkt h2 {
  color: #410064;
  margin-bottom: 1rem;
  font-size: 2rem;
  margin-bottom: 2rem;
}
.defaultMarkt h2 span {
  color: #FD5B24;
}
@media (min-width: 992px) {
  .defaultMarkt h2 {
    font-size: 3.33rem;
  }
}
.defaultMarkt p {
  white-space: pre-line;
  margin-bottom: 0;
  color: #410064;
  font-size: 1.5rem;
}
@media (min-width: 992px) {
  .defaultMarkt p {
    font-size: 1.85rem;
  }
}
.defaultMarkt p a {
  text-decoration: underline;
  cursor: pointer;
}

.faqMarkt {
  padding: 0 0 4rem 0;
  color: #37274F;
  margin-top: -75px;
}
@media (min-width: 992px) {
  .faqMarkt {
    padding: 6rem 0;
    margin-top: 0;
  }
}
.faqMarkt__item {
  border-bottom: 1px solid #410064;
}
.faqMarkt__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  cursor: pointer;
}
@media (min-width: 992px) {
  .faqMarkt__item__header {
    padding: 2.5rem 0;
  }
}
.faqMarkt__item__header h3 {
  color: #37274F;
  margin-bottom: 0;
  font-weight: 600;
  padding-right: 1.5rem;
  font-size: 1.2rem;
}
@media (min-width: 992px) {
  .faqMarkt__item__header h3 {
    font-size: 1.8rem;
  }
}
.faqMarkt__item__header i {
  transition: 250ms;
}
.faqMarkt__item__header.js-faq-visible h3 {
  color: #FD5B24;
}
.faqMarkt__item__header.js-faq-visible i {
  transform: rotate(180deg);
  transform-origin: center;
  color: #FD5B24;
}
.faqMarkt__item__body {
  display: none;
}
.faqMarkt__item__body p {
  color: #37274F;
  font-size: 1.2rem;
}
@media (min-width: 992px) {
  .faqMarkt__item__body p {
    font-size: 1.6rem;
  }
}

.wysiwygMarkt {
  color: #37274F;
}
.wysiwygMarkt h1, .wysiwygMarkt h2, .wysiwygMarkt h3, .wysiwygMarkt h4, .wysiwygMarkt h5, .wysiwygMarkt h6 {
  color: #6A10A3;
  font-size: 1.5rem;
  margin-top: 3.75rem;
  margin-bottom: 1.75rem;
}
@media (min-width: 992px) {
  .wysiwygMarkt h1, .wysiwygMarkt h2, .wysiwygMarkt h3, .wysiwygMarkt h4, .wysiwygMarkt h5, .wysiwygMarkt h6 {
    font-size: 1.75rem;
  }
}
.wysiwygMarkt ul, .wysiwygMarkt ol {
  color: #37274F;
  font-size: 1.2rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 2rem;
  margin-bottom: 1.25rem;
  line-height: 2.2rem;
}
@media (min-width: 992px) {
  .wysiwygMarkt ul, .wysiwygMarkt ol {
    font-size: 1.6rem;
  }
}
.wysiwygMarkt ul li::marker, .wysiwygMarkt ol li::marker {
  color: #6A10A3;
}
.wysiwygMarkt ul li:not(:last-of-type), .wysiwygMarkt ol li:not(:last-of-type) {
  margin-bottom: 1.125rem;
}
.wysiwygMarkt ul li > strong, .wysiwygMarkt ol li > strong {
  display: block;
  color: #6A10A3;
  margin-bottom: 1.125rem;
}
.wysiwygMarkt ul > li {
  list-style: disc;
}
.wysiwygMarkt ol > li:first-of-type {
  padding-top: 1.25rem;
}
.wysiwygMarkt p {
  color: #37274F;
  font-size: 1.2rem;
  margin-bottom: 1.25rem;
  line-height: 2.2rem;
}
@media (min-width: 992px) {
  .wysiwygMarkt p {
    font-size: 1.6rem;
  }
}
.wysiwygMarkt a {
  color: #6A10A3;
  text-decoration: underline;
  box-sizing: border-box;
  border-radius: 0.125rem;
  outline-offset: 3px;
  word-break: break-all;
}
.wysiwygMarkt a:hover, .wysiwygMarkt a:focus, .wysiwygMarkt a:active {
  color: #6A10A3;
}
.wysiwygMarkt a:focus-visible {
  outline-style: solid;
  outline-color: #3b82f6;
  outline-width: 2px;
}

.priceMarkt {
  padding: 10rem 0 4rem 0;
}
@media (min-width: 992px) {
  .priceMarkt {
    padding: 10rem 0;
  }
}
.priceMarkt__section__container {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}
.priceMarkt__section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: white;
  padding: 1.75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
}
.priceMarkt__section:not(:last-of-type) {
  margin-bottom: 1.5rem;
}
.priceMarkt__section h2 {
  text-align: center;
  color: #410064;
  font-size: 1.75rem;
  line-height: 1.35;
  margin-bottom: 1.5rem;
}
.priceMarkt__section h2 span {
  color: #FD5B24;
}
.priceMarkt__section a {
  align-self: center;
}
.priceMarkt__product {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #410064;
  border-radius: 22px;
  padding: 0 3rem 4rem 3rem;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
  min-height: 100%;
}
.priceMarkt__product img {
  margin-top: -140px;
  margin-bottom: 1rem;
}
@media (max-width: 992px) {
  .priceMarkt__product img {
    max-width: 220px;
  }
}
@media (min-width: 992px) {
  .priceMarkt__product img {
    width: 50%;
  }
}
.priceMarkt__product__price {
  display: none;
  align-items: center;
  color: white;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.priceMarkt__product__price.js-plan-active {
  display: flex;
}
.priceMarkt__product__price span {
  color: #FD5B24;
  font-size: 2.5rem;
  margin-right: 1rem;
}
@media (min-width: 992px) {
  .priceMarkt__product__price span {
    font-size: 3.25rem;
  }
}
.priceMarkt__product .btnMarkt__group {
  justify-content: center;
  margin-bottom: 2rem;
}
.priceMarkt__product .btnMarkt__group .btnMarkt {
  width: 150px;
}
@media (min-width: 992px) {
  .priceMarkt__product .btnMarkt__group .btnMarkt {
    width: 250px;
  }
}
@media (min-width: 992px) {
  .priceMarkt__product .btnMarkt__group .btnMarkt:first-of-type {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .priceMarkt__product .btnMarkt__group .btnMarkt:last-of-type {
    display: none;
  }
}
.priceMarkt__product ul {
  color: white;
  padding: 0;
}
.priceMarkt__product ul li {
  list-style: disc;
  font-size: 1rem;
  font-weight: 600;
}
@media (min-width: 992px) {
  .priceMarkt__product ul li {
    font-size: 1.125rem;
  }
}
.priceMarkt__product ul li span {
  color: #FD5B24;
}
.priceMarkt__product__more {
  cursor: pointer;
  display: none;
  align-self: flex-start;
  font-weight: 600;
  text-decoration: underline;
  font-size: 1.125rem;
  margin-left: 1.125rem;
  color: #FD5B24;
}
@media (min-width: 992px) {
  .priceMarkt__product__more {
    display: block;
  }
}
.priceMarkt__buttons {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -65px;
  z-index: 1;
}
.priceMarkt__buttons--block {
  position: relative;
  width: 100%;
  justify-content: center;
  display: flex;
  margin-top: -120px;
  margin-bottom: 125px;
}
@media (min-width: 992px) {
  .priceMarkt__buttons--block {
    margin-top: -150px;
    margin-bottom: 200px;
  }
}
.priceMarkt__buttons .btnMarkt {
  position: relative;
  min-width: 160px;
}
@media (min-width: 992px) {
  .priceMarkt__buttons .btnMarkt {
    min-width: 300px;
    max-height: 70px;
    font-size: 1.8rem;
  }
}

.discountMarkt {
  font-family: "Luckiest Guy", cursive;
  position: absolute;
  right: -1rem;
  top: -2rem;
  background-color: #FD5B24;
  transform: rotate(15deg);
  box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.16);
  color: #410064;
  padding: 0.5rem 1.2rem;
  border-radius: 50%;
  font-size: 11px;
}
@media (min-width: 992px) {
  .discountMarkt {
    font-size: 23px;
    right: -3rem;
    top: -3rem;
    padding: 0.5rem 2rem;
  }
}
.discountMarkt span {
  display: block;
  color: white;
  margin-top: -10px;
  margin-bottom: -10px;
  font-size: 20px;
}
@media (min-width: 992px) {
  .discountMarkt span {
    font-size: 35px;
  }
}
.discountMarkt--small {
  font-size: 14px;
  padding: 0.5rem 1.5rem;
}
@media (min-width: 992px) {
  .discountMarkt--small {
    top: -2.5rem;
    right: -2.5rem;
  }
}
.discountMarkt--small span {
  font-size: 2rem;
}

.twoCtaMarkt {
  position: relative;
  overflow: hidden;
}
.twoCtaMarkt__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0 260px 0;
}
@media (min-width: 992px) {
  .twoCtaMarkt__content {
    display: block;
    align-items: unset;
    padding: 9rem 0 15rem 0;
  }
}
.twoCtaMarkt h2 {
  color: #410064;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 400px;
}
@media (min-width: 992px) {
  .twoCtaMarkt h2 {
    text-align: left;
    font-size: 2.33rem;
  }
}
.twoCtaMarkt h2 span {
  display: block;
}
.twoCtaMarkt img {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  width: 100%;
  height: 230px;
  width: auto;
}
@media (min-width: 992px) {
  .twoCtaMarkt img {
    right: 0;
    transform: unset;
    max-width: 330px;
    max-height: unset;
    width: 100%;
    height: auto;
  }
}
@media (min-width: 1200px) {
  .twoCtaMarkt img {
    max-width: 370px;
  }
}
.twoCtaMarkt__left {
  background-color: #FD5B24;
}
.twoCtaMarkt__left:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  right: 0;
  background-color: #FD5B24;
  z-index: -1;
}
.twoCtaMarkt__left .twoCtaMarkt__content h2 {
  color: white;
}
.twoCtaMarkt__left .twoCtaMarkt__content h2 span {
  color: #FD5B24;
}
.twoCtaMarkt__right .twoCtaMarkt__content h2 span {
  color: white;
}

.humane {
  background-color: #FFF;
  color: #410064;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 0.5rem;
  margin-top: 2rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
}

.contactMarkt,
.addSchoolMarkt {
  width: 100%;
}
.contactMarkt .TeacherForm__input,
.contactMarkt .TeacherForm__select,
.addSchoolMarkt .TeacherForm__input,
.addSchoolMarkt .TeacherForm__select {
  margin-bottom: 1rem;
}
.contactMarkt .btnMarkt,
.addSchoolMarkt .btnMarkt {
  display: inherit;
  margin-left: auto;
  margin-bottom: 1.5rem;
}

.audioMarkt audio {
  display: block;
  width: 100%;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 992px) {
  .audioMarkt audio {
    max-width: 350px;
    margin-bottom: 0;
  }
}

.js-tooltip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  font-size: 1rem;
  opacity: 0.75;
  cursor: pointer;
  color: #410064;
}

.tooltipMarkt {
  display: none;
  color: white;
  background-color: #37274F;
  box-shadow: 0 2px 0 0 rgba(45, 45, 45, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(45, 45, 45, 0.05);
  border-radius: 8px;
  width: 300px;
  position: absolute;
  top: -50px;
  right: 0;
  text-align: center;
  padding: 0.5rem 1rem;
}
@media (min-width: 992px) {
  .tooltipMarkt {
    right: -122px;
  }
}

.js-novel-page,
.js-view {
  display: none !important;
}
.js-novel-page--show,
.js-view--show {
  display: block !important;
}

@media (min-width: 992px) {
  figure.js-view {
    min-height: 600px;
  }
  figure.js-view video {
    margin-top: 100px;
  }
}

.shippingNotice {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #410064;
  text-align: center;
  padding: 1.4rem;
  margin-top: -2px;
}
.shippingNotice h2, .shippingNotice i {
  font-size: 1rem;
  color: white;
  font-weight: 600;
  margin-bottom: 0;
}
@media (min-width: 769px) {
  .shippingNotice h2, .shippingNotice i {
    font-size: 1.45rem;
  }
}
.shippingNotice i {
  font-weight: 400;
  margin-right: 15px;
}

.messageMarkt {
  background-color: #3B005A;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 2rem;
  max-width: 495px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #570384;
  box-shadow: 0px 2px 0px #2C0043;
}
@media (max-width: 500px) {
  .messageMarkt {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 991px) {
  .messageMarkt {
    max-width: unset;
    width: 100%;
  }
  .messageMarkt a {
    margin-top: 1.5rem;
  }
}
.messageMarkt h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.messageMarkt p {
  font-size: 0.9rem;
  margin-bottom: 0;
  color: #d8d8d8;
  font-weight: bold;
}

.featured-label, .discount-label, .subscription-label {
  position: absolute;
  top: -2px;
  z-index: 2;
  background-size: cover;
}

.subscription-label {
  background-image: url("https://assets.senorwooly.com/static/images/scarf-without-lines.svg");
  right: 0.5em;
  width: 2.5em;
  height: 3.3em;
}

.featured-label {
  background-image: url("https://assets.senorwooly.com/static/images/scarf-star.svg");
  left: 2em;
  width: 2.5em;
  height: 3.3em;
}

.discount-label {
  background-image: url("https://assets.senorwooly.com/static/images/scarf.svg");
  right: 2em;
  width: 4em;
  height: 4em;
}

.discount-label-exclusive {
  right: 3em;
}

.discount-label-content {
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  line-height: 20px;
  font-size: 14px;
}

.heading-divider {
  display: flex;
  justify-content: center;
}
.heading-divider .divider-bullet {
  margin-right: 5px;
  width: 5px;
  height: 5px;
  background: #FD5B24;
  border-radius: 50%;
}

.form-control {
  height: 50px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 300;
  font-family: "azo-sans-web", sans-serif;
  line-height: 1.6;
  color: #37274F;
  background-color: transparent;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.form-control:focus {
  border-color: #d9d9d9;
  -webkit-box-shadow: inset 0 0 0 3px #d9d9d9;
  box-shadow: inset 0 0 0 3px #d9d9d9;
}
.form-control::-moz-placeholder {
  color: #979797;
  opacity: 1;
}
.form-control:-ms-input-placeholder, .form-control::-webkit-input-placeholder {
  color: #979797;
}
.form-control::-moz-placeholder, .form-control:-ms-input-placeholder, .form-control::-webkit-input-placeholder {
  text-transform: lowercase;
}
.form-control[disabled], .form-control[readonly] {
  cursor: not-allowed;
  background-color: #d9d9d9;
}

fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #d9d9d9;
}

.submit-code {
  height: 45px;
}
.submit-code .input-group {
  color: #979797;
}
.submit-code .form-control {
  font-size: 0.8em;
  background: white;
  height: inherit;
  border: 1px solid white;
}
.submit-code .btn-code-submit {
  height: inherit;
  color: white;
  background: #FD5B24;
  border: none;
}

@media (min-width: 425px) and (max-width: 990px) {
  .submit-code-input-container {
    padding: 0 0.8em;
  }
}
.section-video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("https://assets.senorwooly.com/static/images/video-bg.svg") no-repeat;
  width: 380px;
  height: 225px;
}
.section-video img {
  width: 22em;
  height: auto;
  border-radius: 3px;
}

@media (max-width: 980px) {
  .section-video {
    margin: 0 auto;
    background: transparent;
    width: auto;
    height: auto;
  }
  .section-video img {
    width: 90%;
    height: auto;
  }
}
.btn-with-price {
  display: block;
  padding: 11px 70px 11px 25px;
  margin-bottom: 15px;
  max-width: 320px;
  text-align: left;
}
.btn-with-price span:nth-of-type(2) {
  background: white;
  color: #FD5B24;
  padding: 0.73em;
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 1px solid white;
  min-width: 60px;
  text-align: center;
}

.btn-with-price:nth-of-type(1) {
  background: white;
  color: #FD5B24;
  border: 2px solid #FD5B24;
}
.btn-with-price:nth-of-type(1) span:nth-of-type(2) {
  border-left: 2px solid #FD5B24;
}

@media (max-width: 480px) {
  .btn-with-price {
    width: 100%;
    margin-bottom: 2em;
  }
}
.dropdown-filter {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  border: solid 1px #d9d9d9;
  border-radius: 0;
  font-size: 14px;
  height: 40px;
  padding-left: 15px;
  color: #36264d;
  background: url("https://assets.senorwooly.com/static/images/down-arrow.svg") 96%/6% no-repeat white;
}

.stories-link,
.tour-link {
  padding-top: 0 !important;
}
@media (max-width: 991px) {
  .stories-link,
  .tour-link {
    padding: 1em !important;
  }
}

.stories-anchor,
.tour-anchor {
  color: white !important;
  background-color: #FD5B24 !important;
  padding: 10px 20px 10px 20px !important;
}
.stories-anchor .fa,
.tour-anchor .fa {
  color: white !important;
}
.stories-anchor:hover,
.tour-anchor:hover {
  background-color: white !important;
  color: #FD5B24 !important;
  opacity: 1 !important;
}
.stories-anchor:hover .fa,
.tour-anchor:hover .fa {
  color: #FD5B24 !important;
}

.stories-link button {
  height: 46px;
  border-left: 2px solid white;
}

.stories-link.popover-content {
  min-width: 250px;
  max-height: 400px;
  overflow-y: auto;
}

.stories-link-search {
  background-color: #FD5B24;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  font-size: 1.2em;
}
.stories-link-search:hover {
  background-color: white;
  color: #FD5B24;
}

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

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

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

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

.section-white {
  background: white;
}

.section-gray {
  background: #F1F2F4;
}

.section-padding-top {
  padding-top: 4em;
}

.navigation-overflow-fix {
  margin-top: -1em;
}

.uppercase-bold {
  font-weight: bold;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .section-align-center {
    justify-content: center;
    flex-direction: column;
    -ms-flex-direction: column;
  }
}
.slick-list, .slick-slider, .slick-track {
  position: relative;
  display: block;
}

.slick-loading .slick-slide, .slick-loading .slick-track {
  visibility: hidden;
}

.slick-slider {
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: 0;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-list, .slick-slider .slick-track {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  top: 0;
  left: 0;
}
.slick-track:after, .slick-track:before {
  display: table;
  content: "";
}
.slick-track:after {
  clear: both;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.vjs-texttrack-settings {
  display: none;
}

.video-js .vjs-control-bar {
  z-index: 2;
  display: flex;
  background-color: #37274f !important;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.vjs-texttrack-settings {
  display: none;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  width: max-content !important;
  padding: 0 5px !important;
}

.vjs-text-track-cue {
  bottom: 0 !important;
  z-index: 3;
  height: 42px !important;
  font-size: 32px !important;
  font-family: azo-sans-web, sans-serif;
  inset: auto auto 0 auto !important;
}

.vjs-text-track-cue > div {
  display: inline-block !important;
  padding: 5px 10px 10px;
  font-size: 30px;
  background-color: rgba(0, 0, 0, 0.7) !important;
  border-radius: 10px;
  transform: translateY(calc(-100% + 42px));
}

.vjs-text-track-cue > div > span:last-of-type.yellow {
  display: block;
  padding-top: 8px;
}

.vjs-fullscreen .vjs-text-track-cue {
  display: inline-block !important;
  padding: 7px 20px 12px;
  font-size: 80px !important;
  background: none;
  border-radius: 16px;
}
.vjs-fullscreen .vjs-text-track-cue div {
  top: 0;
  transform: translateY(-100%);
}

@media screen and (max-width: 480px) {
  .vjs-text-track-cue > div {
    padding: 5px 0;
    font-size: 18px !important;
    background: none;
    border-radius: 4px;
  }
}
video::cue {
  padding: 7px 20px 12px;
  background-color: rgba(0, 0, 0, 0.7) !important;
  border-radius: 10px;
}

.slick-dots, .slick-next, .slick-prev {
  position: absolute;
  display: block;
  padding: 0;
}

.slick-dots li button:before, .slick-next:before, .slick-prev:before {
  font-family: slick;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-loading .slick-list {
  background: url("https://assets.senorwooly.com/static/fonts/slick/ajax-loader.gif") center center no-repeat #fff;
}

@font-face {
  font-family: slick;
  font-weight: 400;
  font-style: normal;
  src: url("https://assets.senorwooly.com/static/fonts/slick/slick.eot");
  src: url("https://assets.senorwooly.com/static/fonts/slick/slick.eot?#iefix") format("embedded-opentype"), url("/static/fonts/slick/slick.woff") format("woff"), url("/static/fonts/slick/slick.ttf") format("truetype"), url("/static/fonts/slick/slick.svg#slick") format("svg");
}
.slick-next, .slick-prev {
  font-size: 0;
  line-height: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: 0;
  background: 0 0;
}

.slick-next:focus, .slick-next:hover {
  color: transparent;
  outline: 0;
  background: 0 0;
}

.slick-prev:focus, .slick-prev:hover {
  color: transparent;
  outline: 0;
  background: 0 0;
}

.slick-next:focus:before, .slick-next:hover:before {
  opacity: 1;
}

.slick-prev:focus:before, .slick-prev:hover:before {
  opacity: 1;
}

.slick-next.slick-disabled:before, .slick-prev.slick-disabled:before {
  opacity: 0.25;
}

.slick-next:before {
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: #fff;
}

.slick-prev:before {
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: #fff;
  left: -25px;
}

[dir=rtl] .slick-prev {
  right: -25px;
  left: auto;
}

.slick-prev:before {
  content: "←";
}

.slick-next:before, [dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}

[dir=rtl] .slick-next {
  right: auto;
  left: -25px;
}
[dir=rtl] .slick-next:before {
  content: "←";
}

.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  bottom: -25px;
  width: 100%;
  margin: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: 0;
  background: 0 0;
}
.slick-dots li button:focus, .slick-dots li button:hover {
  outline: 0;
}
.slick-dots li button:focus:before, .slick-dots li button:hover:before {
  opacity: 1;
}
.slick-dots li button:before {
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: #000;
}
.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #000;
}

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