@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: 15px; }

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: #FF7041;
  color: white;
  cursor: pointer; }

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

@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: #FF7041;
      border-color: #FF7041; }
  .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: #FF7041; }
.headerMarkt h3 {
  color: white;
  font-size: 2rem; }
  .headerMarkt h3 span {
    display: block;
    color: #FF7041;
    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: #FF7041; }
  @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: #FF7041;
  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: #FF7041;
  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: #FF7041; }
          .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: #FF7041; }

.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: #FF7041;
    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: #FF7041;
  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: #FF7041;
  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: #160022A6;
  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: #FF7041;
    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: #FF7041;
      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 #FF7041;
      color: #FF7041; }
      .MultipleChoiceAnswer:not(.MultipleChoiceAnswer--selected).MultipleChoiceAnswer--multiple:hover .MultipleChoice__select {
        border-color: #FF7041; } }
  .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: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        color: #FF7041;
        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: #FF7041;
    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: #FF7041;
    font-weight: 600;
    margin: 4em 0;
    text-align: center; }

.Match__line {
  height: 2px;
  background-color: #FF7041;
  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: #FF7041;
  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: "" !important; }

.slick-prev::before {
  font-family: "Font Awesome 5 Pro" !important;
  content: "" !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: white;
  border-radius: 20px;
  background-color: #410064C9;
  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 #FF7041;
    color: #FF7041; }
  .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: #FF7041;
      transition: 200ms; }
    .Primary__btn.TrueFalse__btn:active, .Primary__btn.TrueFalse__btn.Primary__btn--selected {
      color: white;
      background-color: #FF7041;
      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: #FF7041;
    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: #FF7041;
    box-shadow: 0px 2px 0px #A4A4A4; }
    .btnMarkt--white:hover {
      color: #FF7041; }
  .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: #FF7041;
        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: #FF7041; }
  .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: #FF7041; }

.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 #00000027;
  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: #FF7041;
      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: #FF7041;
    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: #FF7041; }
    .ProgressModal__progressBar progress::-webkit-progress-value {
      background-color: #FF7041; }
    .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: #FF7041;
      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: #FF7041; }
  .BadgeModal .BadgeModal__link {
    transition: 150ms;
    position: absolute;
    bottom: -45px;
    color: white;
    text-decoration: underline; }
    .BadgeModal .BadgeModal__link:hover {
      color: #FF7041; }
    @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: #FF7041;
      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: #FF7041;
      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-bottom: 0;
      padding-bottom: 0;
      cursor: pointer; }
      .navMarkt ul li:active, .navMarkt ul li:focus, .navMarkt ul li:hover {
        text-decoration: none;
        border-bottom: 0; }
      .navMarkt ul li:not(:last-of-type) {
        margin-right: 2.3rem; }
      .navMarkt ul li img {
        width: 125px;
        height: auto;
        margin-right: 2.7rem; }
      .navMarkt ul li a {
        color: white;
        font-weight: 600;
        font-size: 1.25rem; }
        .navMarkt ul li a:hover {
          text-decoration: none; }
  @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;
    padding-right: 2.3rem; }
    .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 #FF7041;
        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__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: #FF7041;
        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: #FF7041; }
          @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: #FF7041;
        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--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;
    background-color: transparent;
    font-size: 1.125rem;
    margin-top: 4px; }
    @media (max-width: 992px) {
      .navDash__toggle {
        display: none; } }
    .navDash__toggle:focus, .navDash__toggle:active {
      outline: 0; }
    .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__logo {
    width: 90px;
    height: auto;
    margin-right: 20px; }
    @media (min-width: 992px) {
      .navDash__logo {
        width: 105px; } }
    @media (min-width: 1200px) {
      .navDash__logo {
        margin-right: 60px; } }
  .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: #FF7041; }
  .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:not(:last-of-type) {
      margin-right: 20px; }
      @media (min-width: 1200px) {
        .navDash__link:not(:last-of-type) {
          margin-right: 48px; } }
    .navDash__link a {
      color: white; }
      .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: #FF7041;
      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: #FF7041;
        display: block;
        margin-top: 10px; }
    .navDash__dropdown__link {
      color: white;
      font-weight: 600;
      font-size: 1.125rem; }
      .navDash__dropdown__link--orange {
        color: #FF7041; }
      .navDash__dropdown__link:not(:last-of-type) {
        margin-bottom: 25px; }
      .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 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__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: #FF7041;
        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: #FF7041;
    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: #FF7041; }
        .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 #00000086; }
    .ReactLink__tooltip .rc-tooltip-arrow {
      border-top-color: #fff !important;
      left: 48% !important;
      filter: drop-shadow(2px 2px 1px #00000086) !important; }
    .ReactLink__tooltip .rc-tooltip-inner {
      box-shadow: 0px 2px 2px #00000086;
      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: #FF7041; }
    .AssignmentsList .Assignment--soon:nth-of-type(1n+2) .Assignment__deadline {
      color: #FF7041; }

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

.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: #FF7041;
  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: #FF7041;
  border: none;
  border-radius: 0;
  overflow: hidden;
  z-index: 2; }
  .ProgressBar__indicator::-ms-fill {
    border: none; }
  .ProgressBar__indicator::-moz-progress-value {
    background-color: #FF7041; }
  .ProgressBar__indicator::-webkit-progress-value {
    background-color: #FF7041; }
  .ProgressBar__indicator::-webkit-progress-bar {
    background-color: transparent;
    border-radius: 0;
    overflow: hidden; }
  .ProgressBar__indicator::-moz-progress-bar {
    background-color: #FF7041;
    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: "";
        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: #FF7041;
    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: #FF7041;
      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: #FF7041; }
      .BucketGame .BucketGame__controls .BucketGame__button--selected p, .BucketGame .BucketGame__controls .BucketGame__button--selected .MediaObject {
        background-color: #FF7041;
        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: #FF7041;
      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: #FF7041; }
    .AgainstTheClock__countDown--alert progress {
      color: #FF7041; }
      .AgainstTheClock__countDown--alert progress::-moz-progress-value {
        background-color: #FF7041; }
      .AgainstTheClock__countDown--alert progress::-webkit-progress-value {
        background-color: #FF7041; }
      .AgainstTheClock__countDown--alert progress::-moz-progress-bar {
        background-color: #FF7041; }
    .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: #FF7041;
    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: #FF7041; }
    .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: #FF7041;
    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: #FF7041; }
    .ProgressBar progress::-webkit-progress-value {
      background-color: #FF7041; }
    .ProgressBar progress::-webkit-progress-bar {
      background-color: transparent;
      border-radius: 0 0 8px 8px;
      overflow: hidden; }
    .ProgressBar progress::-moz-progress-bar {
      background-color: #FF7041;
      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: "";
    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: #FF7041;
    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: #FF7041; }
    .Stat--inverted .Stat__inner {
      background-color: white;
      color: #FF7041; }
  .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: #FF7041;
      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: "";
          font-family: "Font Awesome 5 Pro";
          color: #FF7041;
          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: "";
          font-family: "Font Awesome 5 Pro";
          color: #FF7041;
          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: #FF7041;
    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 #00000086; }
  .RangeSlider__tooltip .rc-tooltip-arrow {
    border-top-color: #ECF1FA !important;
    left: 48% !important;
    filter: drop-shadow(2px 2px 1px #00000086) !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 #00000086; }
  .NuggetRangeSlider__tooltip .rc-tooltip-arrow {
    filter: drop-shadow(2px 2px 1px #00000027) !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: #410064;
  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: "";
    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: "";
      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: #FF7041;
        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: #FF7041;
      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: #FF7041; }
    .QuickMenu__item--classes {
      background-color: #FFC700; }
  .QuickMenu__toggle {
    -webkit-appearance: none;
    background-color: #FF7041;
    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: #FF7041;
    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: #FF7041;
      border-bottom: 2px solid #FF7041; }
    .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: #FF7041;
      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: #FF7041;
      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: "";
    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: #FF7041;
        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: #ff7041;
          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: "";
  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: calc(100% / 7);
          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 #FF7041; }
        @media (max-width: 991px) {
          .SpanSelect .dropdown-menu ul li.selected {
            border-bottom: 2px solid #FF7041; } }

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

.newbar {
  display: inline-flex;
  justify-content: space-between;
  background-color: #FF7041;
  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: #FF7041;
    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: "";
      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: #FF7041; }
        .StudentDetail__story__nugget .NuggetProgress::-webkit-progress-value {
          background-color: #FF7041; }
        .StudentDetail__story__nugget .NuggetProgress::-webkit-progress-bar {
          background-color: white;
          border-radius: 12px;
          overflow: hidden; }
        .StudentDetail__story__nugget .NuggetProgress::-moz-progress-bar {
          background-color: #FF7041;
          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: "";
      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: "";
    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: #FF7041;
      font-weight: 700; }
      @media (max-width: 750px) {
        .Assignments__new button {
          background-color: #FF7041 !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: #FF7041 !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: #FF7041;
    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: #FF7041;
        border-radius: 3px;
        overflow: hidden; }
        .AssignmentDetail .NuggetProgress__item__bar progress::-ms-fill {
          border: none; }
        .AssignmentDetail .NuggetProgress__item__bar progress::-moz-progress-value {
          background-color: #FF7041; }
        .AssignmentDetail .NuggetProgress__item__bar progress::-webkit-progress-value {
          background-color: #FF7041; }
        .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: #FF7041;
          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: #FF7041;
    border-radius: 7px;
    border: 1px solid #FF7041;
    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: #FF7041; }
  .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: #FF7041;
    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: "";
        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: #FF7041;
  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: #FF7041; }
    .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 #FF7041;
    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: #FF7041; }
    .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: #FF7041;
  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: #FF7041;
    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: "";
    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: #FF7041;
    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: #FF7041; }

.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 #FF7041; }
  @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: #FF7041; }
  .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: #FF7041;
      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: #FF7041;
      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: #FF7041; }
    .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: #FF7041;
    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: #FF7041 !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: #FF7041;
    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 #FF7041;
      border-radius: 3px; }
      .Indexes__item.active span {
        background-color: #FF7041; }
    @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: #FF7041;
    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: #FF7041;
  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: #FF7041; }
        .StoryNovels__variants__list li:hover:before, .StoryNovels__variants__list li.active:before {
          content: "";
          width: 7px;
          height: 100%;
          background-color: #FF7041;
          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: #FF7041; }
      .NovelModal__toggle__tooltip .rc-tooltip-content,
      .NovelModal__toggle__tooltip .rc-tooltip-inner {
        background-color: #FF7041;
        color: white;
        border-radius: 6px; }
      .NovelModal__toggle__tooltip .rc-tooltip-arrow {
        border-left-color: #FF7041; }
      .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: #FF7041;
  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: #FF7041; }
    .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: #FF7041; }
    .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: #FF7041;
          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: #FF7041; }
  .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: #FF7041; }
    .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: #FF7041; }
  .twoSides__right {
    padding: 4.5rem 0 2rem 0;
    background-color: #FF7041; }
    @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: #FF7041;
          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: #FF7041; }
    @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: #FF7041; }
    .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: #FF7041; }
  .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: #FF7041;
      display: inline-block; }
      .videoMarkt h3 div.inline {
        display: inline-block; }
    .videoMarkt h3 span {
      display: block;
      font-size: 1.5rem;
      font-weight: 400;
      color: #FF7041;
      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: #FF7041;
    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: #FF7041; }
  .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: #FF7041;
    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: #FF7041; }
  .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: #FF7041;
  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: #FF7041; }
  .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: #FF7041;
      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: #FF7041; }
      .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: #FF7041; }
    @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: #FF7041;
      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: #FF7041; }
    @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: #FF7041; }
      .faqMarkt__item__header.js-faq-visible i {
        transform: rotate(180deg);
        transform-origin: center;
        color: #FF7041; }
    .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 {
  padding: 0 0 4rem 0;
  color: #37274F;
  margin-top: -75px; }
  @media (min-width: 992px) {
    .wysiwygMarkt {
      padding: 4rem 0; } }
  .wysiwygMarkt h1, .wysiwygMarkt h2, .wysiwygMarkt h3, .wysiwygMarkt h4, .wysiwygMarkt h5, .wysiwygMarkt h6 {
    color: #FF7041;
    font-size: 1.5rem;
    margin-bottom: 1.2rem; }
    @media (min-width: 992px) {
      .wysiwygMarkt h1, .wysiwygMarkt h2, .wysiwygMarkt h3, .wysiwygMarkt h4, .wysiwygMarkt h5, .wysiwygMarkt h6 {
        font-size: 1.8rem; } }
  .wysiwygMarkt ul, .wysiwygMarkt ol {
    color: #37274F;
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    line-height: 2.2rem; }
    @media (min-width: 992px) {
      .wysiwygMarkt ul, .wysiwygMarkt ol {
        font-size: 1.6rem; } }
    .wysiwygMarkt ul li, .wysiwygMarkt ol li {
      list-style: disc; }
      .wysiwygMarkt ul li::marker, .wysiwygMarkt ol li::marker {
        color: #FF7041; }
      .wysiwygMarkt ul li:not(:last-of-type), .wysiwygMarkt ol li:not(:last-of-type) {
        margin-bottom: 1.5rem; }
  .wysiwygMarkt p {
    color: #37274F;
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    line-height: 2.2rem; }
    @media (min-width: 992px) {
      .wysiwygMarkt p {
        font-size: 1.6rem; } }

.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: #FF7041; }
    .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: #FF7041;
        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: #FF7041; }
    .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: #FF7041; }
      @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: #FF7041;
  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: 18px; }
  @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: #FF7041; }
    .twoCtaMarkt__left:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 100vw;
      top: 0;
      right: 0;
      background-color: #FF7041;
      z-index: -1; }
    .twoCtaMarkt__left .twoCtaMarkt__content h2 {
      color: white; }
      .twoCtaMarkt__left .twoCtaMarkt__content h2 span {
        color: #FF7041; }
  .twoCtaMarkt__right .twoCtaMarkt__content h2 span {
    color: white; }

.humane {
  background-color: #FF7041;
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
  border-radius: 12px;
  margin-top: 2rem; }

.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: #FF7041;
    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: #FF7041;
    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: #FF7041;
    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: #FF7041;
  border: 2px solid #FF7041; }
  .btn-with-price:nth-of-type(1) span:nth-of-type(2) {
    border-left: 2px solid #FF7041; }

@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: #FF7041 !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: #FF7041 !important;
    opacity: 1 !important; }
    .stories-anchor:hover .fa,
    .tour-anchor:hover .fa {
      color: #FF7041 !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: #FF7041;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  font-size: 1.2em; }
  .stories-link-search:hover {
    background-color: white;
    color: #FF7041; }

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