.appLoader {
  background-color: rgba(243, 246, 246, 0.5);
  backdrop-filter: blur(2px);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center; }
  .appLoader_loader {
    position: relative;
    border-top: 4px solid #c6c6c6;
    border-right: 4px solid #c6c6c6;
    border-bottom: 4px solid #c6c6c6;
    border-left: 4px solid var(--platform--primary--color);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: animateSpinner 1.1s infinite linear;
    animation: animateSpinner 1.1s infinite linear; }
    .appLoader_loader, .appLoader_loader:after {
      border-radius: 50%;
      width: 64px;
      height: 64px; }
  .appLoader_logo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 20px;
    -webkit-animation: animateLogo 1.1s infinite linear;
    animation: animateLogo 1.1s infinite linear; }

@-webkit-keyframes animateSpinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes animateSpinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-keyframes animateLogo {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg); }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg); } }

@keyframes animateLogo {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg); }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg); } }

.header {
  height: 80px;
  background-color: #000;
  position: relative;
  z-index: 100; }
  .header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%; }
  .header_logo {
    width: 230px;
    height: 60px;
    cursor: pointer;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat; }
  .header_menu {
    display: flex;
    align-items: center; }
    .header_menu > a {
      text-decoration: none;
      cursor: pointer;
      font-size: 16px;
      margin-right: 40px;
      color: var(--platform--secondary--color);
      transition: all 0.3s; }
      .header_menu > a:last-child {
        margin-right: 0;
        font-size: 14px;
        color: #fff; }
        .header_menu > a:last-child span {
          color: var(--platform--secondary--color); }
      .header_menu > a.active, .header_menu > a:hover {
        color: #fff; }
    .header_menu_fav {
      color: var(--platform--secondary--color) !important;
      font-size: 24px !important;
      transition: all 0.3s;
      margin-right: 25px !important; }
      .header_menu_fav svg {
        display: block; }
      .header_menu_fav:hover {
        color: #fff !important;
        transform: scale(1.4); }
  .header_user {
    display: flex;
    height: 80px;
    align-items: center;
    cursor: pointer; }
    .header_user img {
      border: 2px solid #c4c4c4;
      border-radius: 100%;
      height: 32px;
      width: 32px;
      margin-right: 8px;
      transition: all 0.3s; }
    .header_user i {
      transition: all 0.3s;
      color: #929292; }
    .header_user:hover img {
      border-color: #fff; }
    .header_user:hover i {
      color: #fff; }
    .header_user_wrap {
      margin-right: 15px;
      position: relative; }
    .header_user_menu {
      position: absolute;
      bottom: 10px;
      right: 0;
      padding: 10px 0;
      transform: translate(0, 100%);
      min-width: 220px;
      background-color: #fff;
      box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.06), 0px 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 8px; }
      .header_user_menu hr {
        margin: 8px 15px;
        border-top: 1px solid #dedede; }
      .header_user_menu a {
        color: #2f2f2f;
        display: flex;
        align-items: center;
        height: 36px;
        padding: 0 15px;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px; }
        .header_user_menu a i {
          width: 17px;
          margin-right: 8px;
          color: #595959; }
        .header_user_menu a:hover {
          background-color: #f5f5f5; }
      .header_user_menu_mobile {
        display: none; }
  .header_light {
    background-color: #fff;
    border-bottom: 1px solid #7c7c7b; }
    .header_light .header_menu > a {
      color: #7c7c7b; }
      .header_light .header_menu > a:last-child {
        color: #000; }
        .header_light .header_menu > a:last-child span {
          color: #7c7c7b; }
      .header_light .header_menu > a.active, .header_light .header_menu > a:hover {
        color: #000; }
    .header_light .header_menu_fav:hover {
      color: #000 !important; }
    .header_light .header_user:hover img {
      border-color: #000; }
    .header_light .header_user:hover i {
      color: #000; }
  .header_mobile {
    display: none; }
  @media (max-width: 767px) {
    .header {
      height: 56px;
      min-height: 56px; }
      .header_mobile {
        display: flex;
        margin-left: auto; }
        .header_mobile > * {
          color: #fff !important; }
      .header_inner {
        justify-content: flex-start; }
      .header_logo {
        height: 46px; }
      .header_menu {
        position: fixed;
        left: 0;
        top: 56px;
        bottom: 0;
        right: 0;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 15px;
        transition: all 0.5s;
        transform: translate(100%, 0); }
        .header_menu.active {
          transform: translate(0, 0); }
        .header_menu > a {
          color: #000;
          font-weight: bold;
          font-size: 20px;
          line-height: 30px;
          margin-bottom: 15px; }
          .header_menu > a.active, .header_menu > a:hover {
            color: #000; }
        .header_menu_fav {
          margin-right: 25px !important; }
      .header_user {
        height: 60px; }
        .header_user_wrap {
          display: none; }
        .header_user_menu_mobile {
          display: block;
          width: 100%; }
          .header_user_menu_mobile_menu {
            display: flex;
            font-size: 16px;
            flex-direction: column; }
            .header_user_menu_mobile_menu > a {
              align-items: center;
              display: flex;
              height: 48px; }
          .header_user_menu_mobile_user {
            display: flex;
            align-items: center;
            margin-top: 15px;
            margin-bottom: 15px; }
            .header_user_menu_mobile_user img {
              display: block;
              margin-right: 15px;
              height: 40px;
              width: 40px;
              border-radius: 100%;
              object-fit: cover; }
      .header_light {
        background-color: #fff; }
        .header_light .header_mobile > * {
          color: #000 !important; } }
  @media (max-width: 364px) {
    .header_menu > a {
      margin-right: 8px;
      text-align: center;
      font-size: 13px; } }

.footer {
  padding-top: 60px;
  line-height: 24px;
  font-size: 14px;
  overflow: hidden;
  color: #fff; }
  .footer_bot {
    background-color: #2f2f2f;
    font-size: 14px;
    padding: 15px 0;
    color: var(--platform--secondary--color);
    line-height: 20px; }
    .footer_bot_inner {
      display: flex;
      align-items: center; }
    .footer_bot a {
      color: var(--platform--secondary--color);
      margin-left: 35px;
      display: inline-block;
      text-decoration: none; }
  .footer_copyright {
    max-width: 600px; }
  .footer_inner {
    position: relative;
    justify-content: space-between;
    display: flex;
    padding-bottom: 80px; }
  .footer_social {
    margin-bottom: 15px;
    display: flex;
    align-items: center; }
    .footer_social a {
      display: inline-flex;
      margin-right: 20px;
      transition: all 0.3s; }
      .footer_social a img {
        height: 24px;
        display: block; }
      .footer_social a:hover {
        transform: scale(1.2); }
  .footer_left {
    width: 100%;
    max-width: 600px;
    position: relative;
    z-index: 1; }
  .footer_right {
    position: absolute;
    right: 0;
    bottom: 0;
    top: -60px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: calc(100% - 600px); }
    .footer_right:before, .footer_right:after {
      content: '';
      display: inline-block;
      position: absolute;
      right: 0;
      width: 50px;
      height: 100%; }
    .footer_right:before {
      left: 0;
      background: linear-gradient(to left, transparent 0%, black 100%); }
    .footer_right:after {
      right: 0;
      background: linear-gradient(to right, transparent 0%, black 100%); }
    .footer_right.isColored:before, .footer_right.isColored:after {
      display: none; }
    .footer_right img {
      max-width: 100%;
      max-height: 100%;
      display: block; }
  @media (max-width: 1199px) {
    .footer_left, .footer_right {
      width: 50%; } }
  @media (max-width: 991px) {
    .footer_left {
      max-width: 400px; } }
  @media (max-width: 767px) {
    .footer {
      padding-top: 35px; }
      .footer_inner {
        padding-bottom: 0;
        flex-direction: column; }
      .footer_left, .footer_right {
        width: 100%; }
      .footer_right {
        margin: 30px -15px 0;
        position: static; }
      .footer_bot_inner {
        flex-flow: row wrap; }
        .footer_bot_inner span {
          display: inline-flex;
          flex: 0 0 100%;
          width: 100%;
          margin-bottom: 15px; }
        .footer_bot_inner a {
          margin-left: 0;
          margin-right: 15px; }
          .footer_bot_inner a:last-child {
            margin-left: 0 !important;
            margin-right: 0 !important; } }

.userAvatar {
  position: relative;
  width: 100%;
  min-height: 36px;
  min-width: 36px;
  max-height: 36px;
  max-width: 36px; }
  .userAvatar img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
    display: block; }
  .userAvatar .onlineStatus {
    position: absolute;
    right: -2px;
    bottom: -2px; }

.usersAvatars {
  display: inline-flex; }
  .usersAvatars img {
    height: 26px;
    width: 26px;
    min-width: 26px;
    min-height: 26px;
    border-radius: 100%;
    display: block;
    border: 2px solid white;
    margin-left: -6px;
    object-fit: cover; }
    .usersAvatars img:first-child {
      margin-left: 0; }

.onlineStatus {
  width: 12px;
  height: 12px;
  background-color: #717171;
  border-radius: 12px; }
  .onlineStatus.active {
    background-color: #9cc856; }

.messages_findUsers {
  margin-bottom: 12px;
  position: relative; }
  .messages_findUsers_input {
    border: none;
    padding: 0 12px;
    color: #000;
    outline: none;
    width: 100%;
    background: none;
    height: 36px; }
    .messages_findUsers_input_wrapper {
      display: flex;
      align-items: center;
      border-radius: 8px;
      height: 36px;
      color: #000;
      background: #f4f4f4;
      padding-left: 12px; }
  .messages_findUsers_user {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    border-bottom: 1px solid #f4f4f4;
    font-weight: 600;
    line-height: 26px; }
    .messages_findUsers_user img {
      width: 36px;
      height: 36px;
      border-radius: 36px;
      margin-right: 8px;
      display: block;
      object-fit: cover; }
  .messages_findUsers_list {
    position: absolute;
    max-height: 280px;
    overflow: auto;
    z-index: 1;
    top: 50px;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
    border-radius: 8px; }

.profileHeader {
  position: relative;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 40px 0;
  color: #fff; }
  .profileHeader:before {
    content: '';
    background-image: url("/static/dev/img/settingsHeaderBg.png");
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; }
  .profileHeader_configBg:before {
    display: none; }
  .profileHeader .container {
    position: relative;
    z-index: 1; }
  .profileHeader_inner {
    display: flex;
    align-items: center; }
  .profileHeader_userImg {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 2px solid #fff;
    overflow: hidden;
    position: relative; }
    .profileHeader_userImg_loader {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.5); }
    .profileHeader_userImg_icon {
      width: 32px;
      height: 32px;
      border-radius: 100%;
      background-color: var(--platform--primary--color);
      position: absolute;
      right: 0;
      bottom: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center; }
    .profileHeader_userImg_wrapper {
      margin-right: 35px;
      position: relative;
      cursor: pointer; }
      .profileHeader_userImg_wrapper > div {
        outline: none; }
    .profileHeader_userImg img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .profileHeader_name {
    font-size: 30px;
    margin-bottom: 5px; }
  @media (max-width: 767px) {
    .profileHeader_userImg {
      width: 80px;
      height: 80px; }
      .profileHeader_userImg_wrapper {
        margin-right: 25px; } }

.weeklyPlan_lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px; }
  .weeklyPlan_lesson:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    background-color: var(--platform--primary--color);
    opacity: 0;
    width: 4px;
    transition: all 0.3s; }
  .weeklyPlan_lesson:hover {
    background-color: #343434; }
    .weeklyPlan_lesson:hover:before {
      opacity: 1; }
    .weeklyPlan_lesson:hover i.fa-play-circle {
      font-weight: 900; }
  .weeklyPlan_lesson i.fa-check {
    min-width: 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--platform--primary--color);
    color: #fff;
    border-radius: 100%;
    font-size: 10px;
    margin-left: 8px; }
  .weeklyPlan_lesson i.fa-play-circle {
    margin-left: 8px;
    font-size: 20px; }
  .weeklyPlan_lesson_content {
    flex: 1;
    display: inline-flex; }
  .weeklyPlan_lesson_time {
    font-size: 13px;
    color: #717171;
    margin-left: 5px; }

.weeklyPlan_allWeeks_nav {
  border: 1px solid rgba(255, 255, 255, 0.15);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding: 0 15px;
  position: relative; }
  .weeklyPlan_allWeeks_nav_back {
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center; }

.weeklyPlan_allWeeks_week {
  padding: 16px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  cursor: pointer;
  border-bottom: 1px solid #262626; }
  .weeklyPlan_allWeeks_week:hover {
    background-color: #343434; }
  .weeklyPlan_allWeeks_week_arrow {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center; }
    .weeklyPlan_allWeeks_week_arrow.unavailable {
      background-color: transparent !important; }
    .weeklyPlan_allWeeks_week_arrow:hover {
      background-color: #000; }
  .weeklyPlan_allWeeks_week_notAvailable {
    font-size: 13px;
    color: #717171; }
  .weeklyPlan_allWeeks_week_week {
    width: 85px; }

.weeklyPlan_allWeeks_progress {
  width: 100px;
  margin-right: 10px; }

.weeklyPlan {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  max-width: 500px;
  background-color: #000;
  color: #fff; }
  .weeklyPlan_top {
    background: linear-gradient(180deg, #000000 0%, #4a4a4a 100%);
    text-align: center; }
  .weeklyPlan_nav {
    border: 1px solid rgba(255, 255, 255, 0.15);
    height: 48px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 15px; }
    .weeklyPlan_nav_weeks {
      display: inline-flex;
      align-items: center; }
      .weeklyPlan_nav_weeks_btn {
        padding: 4px;
        cursor: pointer;
        transition: all 0.3s; }
        .weeklyPlan_nav_weeks_btn:hover {
          color: #fff; }
        .weeklyPlan_nav_weeks_btn:first-child {
          margin-right: 15px; }
        .weeklyPlan_nav_weeks_btn:last-child {
          margin-left: 15px; }
    .weeklyPlan_nav_seeAll {
      transition: all 0.3s;
      cursor: pointer;
      margin-left: auto; }
      .weeklyPlan_nav_seeAll:hover {
        color: #fff; }
  .weeklyPlan_progress {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    position: relative; }
    .weeklyPlan_progress_wrapper {
      padding: 25px 0; }
    .weeklyPlan_progress_number {
      font-size: 36px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center; }

.courseCard {
  border-radius: 8px;
  position: relative;
  height: 208px;
  align-items: flex-end;
  display: flex;
  overflow: hidden;
  text-decoration: none !important;
  margin-bottom: 30px;
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.14);
  cursor: pointer; }
  .courseCard:before, .courseCard:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2; }
  .courseCard_isForBuy:after {
    display: none; }
  .courseCard_isForBuy:before {
    background: linear-gradient(180deg, rgba(21, 127, 244, 0.1) 48.56%, var(--platform--primary--light--07--color) 100%); }
  .courseCard:after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 48.56%, rgba(0, 0, 0, 0.7) 100%); }
  .courseCard:hover .courseCard_img {
    transform: scale(1.1); }
  .courseCard:hover .btn_outline_white {
    background-color: #fff;
    color: var(--platform--primary--color); }
  .courseCard_row {
    display: flex;
    flex-flow: row wrap;
    margin-left: -15px;
    margin-right: -15px; }
  .courseCard_col {
    flex: 0 0 50%;
    width: 50%;
    padding: 0 15px; }
  .courseCard_content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    flex: 1;
    padding: 15px 20px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; }
  .courseCard_isNew {
    position: absolute;
    right: 20px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    z-index: 3;
    background: #fff;
    border-radius: 12px;
    height: 24px;
    color: var(--platform--primary--color);
    padding: 0 16px;
    font-weight: 600;
    font-size: 13px; }
  .courseCard_name {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; }
  .courseCard_lessonCount {
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    margin-top: 2px; }
  .courseCard_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: all 0.5s; }
  .courseCard_big {
    width: 100%;
    flex: 0 0 100%; }
    .courseCard_big .courseCard {
      height: 433px; }
  .courseCard_progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background-color: #909090;
    z-index: 3; }
    .courseCard_progress > div {
      background-color: var(--platform--primary--color);
      height: 8px;
      position: absolute;
      bottom: 0;
      left: 0; }
  .courseCard_category {
    flex: 0 0 33.33%;
    width: 33.33%; }
  @media (max-width: 1199px) {
    .courseCard {
      height: 17vw; }
      .courseCard_big .courseCard {
        height: 36vw; } }
  @media (max-width: 991px) {
    .courseCard {
      height: 27vw; }
      .courseCard_category {
        flex: 0 0 50%;
        width: 50%; }
      .courseCard_big .courseCard {
        height: 55vw; } }
  @media (max-width: 767px) {
    .courseCard {
      height: 50vw; }
      .courseCard_big .courseCard {
        height: 50vw; }
      .courseCard_col {
        flex: 0 0 100%;
        width: 100%; } }

.courses_switch {
  margin-bottom: 20px;
  display: flex; }
  .courses_switch h4,
  .courses_switch h3 {
    opacity: 0.5;
    color: #000;
    margin-right: 30px;
    transition: all 0.3s;
    cursor: pointer; }
    .courses_switch h4.active,
    .courses_switch h3.active {
      opacity: 1; }
    .courses_switch h4:last-child,
    .courses_switch h3:last-child {
      margin-right: 0; }

.courseHeader {
  background-size: cover;
  background-position: center;
  position: relative; }
  .courseHeader:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    opacity: 0.3; }
  .courseHeader_content {
    display: flex;
    align-items: center;
    min-height: 248px;
    position: relative;
    z-index: 1;
    max-width: 780px; }
    .courseHeader_content_info {
      color: #fff;
      font-size: 12px;
      margin: 15px 0 30px;
      display: flex; }
      .courseHeader_content_info > div {
        display: flex;
        align-items: center; }
        .courseHeader_content_info > div:first-child {
          margin-right: 30px; }
        .courseHeader_content_info > div i {
          margin-right: 5px;
          font-size: 16px; }
    .courseHeader_content .translations {
      top: 15px;
      left: 0;
      position: absolute; }
  @media (max-width: 767px) {
    .courseHeader {
      background-position: right center; }
      .courseHeader_content {
        min-height: 135px; } }

.coursePreview_title {
  font-size: 30px;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 25px; }

.coursePreview_description {
  text-align: justify; }
  .coursePreview_description p {
    margin-bottom: 0; }
  .coursePreview_description * {
    font-size: 16px !important;
    color: #424242 !important;
    line-height: 26px !important;
    font-family: var(--platform--font--family) !important;
    background-color: transparent !important; }

@media (max-width: 767px) {
  .coursePreview_title {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 15px; } }

.courseFallback {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 20px;
  width: 100%;
  border: 3px solid var(--platform--primary--color);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06), 0px 4px 26px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  min-height: 350px;
  text-align: center;
  margin-bottom: 50px; }
  .courseFallback:before, .courseFallback:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    background-size: 100% 100%;
    width: 215px;
    height: 183px;
    margin: auto 0; }
  .courseFallback:before {
    left: 25px;
    background-image: url("/static/dev/img/courseFallback_leftElements.svg"); }
  .courseFallback:after {
    right: 0;
    background-image: url("/static/dev/img/courseFallback_rightElements.svg"); }
  .courseFallback_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--platform--primary--light--color);
    width: 96px;
    height: 96px;
    border-radius: 100%;
    margin: auto;
    margin-bottom: 10px; }
    .courseFallback_icon i {
      font-size: 42px;
      color: var(--platform--primary--color); }
    .courseFallback_icon img {
      width: 42px; }
  .courseFallback h2 {
    font-size: 36px;
    line-height: 48px; }

.courseProgress {
  background-color: #2f2f2f;
  padding: 15px 0;
  color: #fff;
  white-space: nowrap; }
  .courseProgress.completed .courseProgress_bar > div:first-child {
    text-transform: capitalize; }
  .courseProgress.completed .progressBar_progress {
    background-color: #3bbb40; }
  .courseProgress_inner {
    display: flex;
    align-items: center; }
  .courseProgress_video {
    height: 64px;
    width: 115px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40px;
    background-size: cover;
    background-position: center; }
  .courseProgress_bar {
    flex: 1;
    display: flex;
    align-items: center;
    color: var(--platform--secondary--color); }
    .courseProgress_bar .progressBar {
      margin-left: 25px;
      margin-right: 40px;
      width: 100%; }
  @media (max-width: 991px) {
    .courseProgress_video {
      margin-right: 15px; }
    .courseProgress_bar .progressBar {
      margin-left: 15px;
      margin-right: 15px; } }
  @media (max-width: 767px) {
    .courseProgress_video {
      display: none; }
    .courseProgress_bar {
      font-size: 12px; }
      .courseProgress_bar .progressBar {
        display: none; } }

.lessonCard {
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 12px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  position: relative;
  margin-bottom: 20px;
  padding: 20px;
  display: flex;
  cursor: pointer;
  align-items: center; }
  .lessonCard_time {
    font-size: 14px;
    line-height: 14px;
    color: var(--platform--secondary--color); }
  .lessonCard_name {
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 18px;
    line-height: 24px; }
    .lessonCard_name_wrap {
      margin-left: 20px; }
  .lessonCard_favoriteBtn {
    color: #dadada; }
    .lessonCard_favoriteBtn:hover, .lessonCard_favoriteBtn.active {
      color: var(--platform--primary--color); }
  .lessonCard_description {
    line-height: 20px;
    max-height: 40px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
    margin-right: 10px; }
    .lessonCard_description * {
      white-space: normal !important; }
    .lessonCard_description p {
      margin-bottom: 0; }
    .lessonCard_description img {
      width: 100%; }
  .lessonCard_right {
    margin-left: auto; }
  .lessonCard_icon {
    width: 44px;
    height: 44px;
    position: relative; }
    .lessonCard_icon .iconCircle {
      position: absolute;
      left: 2px;
      top: 2px; }
  .lessonCard_inModule:before {
    content: "";
    display: block;
    left: 16px;
    position: absolute;
    top: 0;
    width: 3px;
    background: #f5f5f5;
    height: 21px;
    transform: translate(0, -100%); }
  @media (max-width: 767px) {
    .lessonCard {
      padding: 10px; }
      .lessonCard .iconCircle {
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important; }
        .lessonCard .iconCircle svg,
        .lessonCard .iconCircle img,
        .lessonCard .iconCircle i {
          font-size: 10px !important;
          width: 10px !important; }
      .lessonCard_icon {
        width: 24px;
        height: 24px;
        position: relative; }
        .lessonCard_icon .iconCircle img {
          width: 8px !important; }
      .lessonCard_name {
        font-size: 15px; }
        .lessonCard_name_wrap {
          margin-left: 10px; }
      .lessonCard_description, .lessonCard_time {
        font-size: 12px; } }

.lessonModule {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  border-radius: 8px;
  cursor: pointer;
  height: 64px;
  padding: 0 25px 0 20px;
  transition: background-color 0.3s linear; }
  .lessonModule.closed {
    background-color: #f4f4f4;
    margin-bottom: 12px; }
  .lessonModule.disabled {
    opacity: 0.5;
    cursor: not-allowed; }
  .lessonModule_grid {
    display: flex;
    flex-flow: row wrap;
    margin-left: -15px;
    margin-right: -15px; }
    .lessonModule_grid > div {
      flex: 0 0 50%;
      width: 50%;
      padding-left: 15px;
      padding-right: 15px; }
    .lessonModule_grid_modal_title {
      margin-bottom: 30px;
      padding-left: 20px;
      padding-right: 20px; }
    .lessonModule_grid_modal_description {
      text-align: justify;
      margin-bottom: 30px; }
      .lessonModule_grid_modal_description p {
        margin-bottom: 0; }
      .lessonModule_grid_modal_description * {
        font-size: 16px;
        color: #424242;
        line-height: 26px;
        font-family: var(--platform--font--family);
        background-color: transparent !important; }
    .lessonModule_grid_modal_inner {
      max-height: 500px;
      overflow-y: auto;
      padding: 0 20px; }
    .lessonModule_grid_modal_bot {
      background: #2f2f2f;
      margin-bottom: -30px;
      padding: 20px;
      display: flex;
      align-items: center;
      color: #fff; }
      .lessonModule_grid_modal_bot_inner {
        margin-right: 25px;
        flex: 1; }
        .lessonModule_grid_modal_bot_inner .progressBar {
          width: 100%; }
        .lessonModule_grid_modal_bot_inner_text {
          font-size: 13px;
          margin-top: 10px; }
    .lessonModule_grid_modal .modal_body {
      max-width: 700px;
      width: 700px;
      padding: 15px 0 30px; }
    .lessonModule_grid_module {
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 12px rgba(0, 0, 0, 0.12);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 30px;
      cursor: pointer;
      position: relative; }
      .lessonModule_grid_module h5 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical; }
      .lessonModule_grid_module img {
        display: block;
        width: 100%;
        height: 208px;
        transition: all 0.3s;
        object-fit: cover; }
      .lessonModule_grid_module_content {
        padding: 20px;
        color: #717171;
        font-size: 14px;
        height: 85px;
        position: relative;
        z-index: 1;
        background-color: #fff; }
      .lessonModule_grid_module:hover img {
        transform: scale(1.2); }
      .lessonModule_grid_module_disabled {
        cursor: not-allowed; }
        .lessonModule_grid_module_disabled img {
          filter: grayscale(1); }
      .lessonModule_grid_module_notAvailable {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 85px;
        z-index: 1;
        background: rgba(0, 0, 0, 0.25);
        color: #fff;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
        line-height: 20px; }
        .lessonModule_grid_module_notAvailable .iconCircle {
          margin: 0 auto 8px; }
        .lessonModule_grid_module_notAvailable b {
          font-weight: bold;
          margin-bottom: 4px;
          font-size: 16px;
          line-height: 26px; }
  .lessonModule_arrow {
    align-self: center;
    margin-left: auto;
    height: 24px;
    justify-content: center;
    display: flex;
    align-items: center;
    color: var(--platform--secondary--color); }
    .lessonModule_arrow_text {
      line-height: 24px;
      font-size: 14px;
      margin-right: 10px; }
    .lessonModule_arrow i {
      font-size: 12px; }
  @media (max-width: 767px) {
    .lessonModule {
      height: 40px;
      padding: 0 20px 0 15px;
      border-radius: 12px; }
      .lessonModule h4 {
        font-size: 20px;
        line-height: 30px; }
      .lessonModule.closed {
        height: 56px; }
      .lessonModule_arrow_text {
        display: none; }
      .lessonModule_grid > div {
        flex: 0 0 100%;
        width: 100%; }
      .lessonModule_grid_module img {
        height: 50vw; }
      .lessonModule_grid_modal .modal_body {
        width: 100%;
        min-width: 330px; } }
  @media (max-width: 364px) {
    .lessonModule_grid_modal .modal_body {
      min-width: 280px; } }

.lessonTop {
  background: var(--platform--primary--light--color);
  color: #2f2f2f;
  border-radius: 6px;
  min-height: 48px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  transition: all 0.5s; }
  .lessonTop.active {
    color: #fff;
    background-color: #3bbb40; }
  .lessonTop_wrapper {
    overflow: hidden;
    transition: all 0.5s; }
  .lessonTop_left {
    display: inline-flex;
    align-items: center; }
    .lessonTop_left img {
      width: 20px; }
  .lessonTop_right {
    margin-left: auto; }
  .lessonTop_done {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    .lessonTop_done i {
      background-color: #fff;
      justify-content: center;
      color: #3bbb40;
      min-width: 20px;
      min-height: 20px;
      border-radius: 20px;
      margin-right: 10px; }
  @media (max-width: 767px) {
    .lessonTop {
      flex-direction: column;
      align-items: flex-start; }
      .lessonTop_left {
        flex: 0 0 100%;
        width: 100%; }
      .lessonTop_right {
        margin: 10px 0 0; } }

.lessonNote {
  background: #fff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 12px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px; }
  .lessonNote_top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px; }
    .lessonNote_top_btns {
      display: flex;
      align-items: center; }
      .lessonNote_top_btns i {
        font-size: 16px;
        color: '#595959'; }
      .lessonNote_top_btns > div {
        margin-left: 20px;
        cursor: pointer; }
        .lessonNote_top_btns > div:first-child {
          margin-left: 0; }
  .lessonNote_time {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--platform--primary--color);
    font-weight: 600; }
    .lessonNote_time i {
      font-size: 20px; }
  .lessonNote_date {
    font-size: 14px;
    line-height: 18px;
    margin-top: 15px;
    color: #717171; }
  .lessonNote_modal .modal_content {
    max-width: 570px;
    width: 100%; }
  .lessonNote_modal .modal_body {
    padding: 20px 25px 30px;
    max-width: 100%; }
  .lessonNote_modal_slider {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 12px rgba(0, 0, 0, 0.12);
    position: relative;
    border-radius: 8px;
    background-color: #fff;
    height: 82px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 115px 0 25px; }
    .lessonNote_modal_slider_time {
      position: absolute;
      right: 25px;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center; }
  @media (max-width: 767px) {
    .lessonNote_modal_slider {
      padding-left: 15px; }
    .lessonNote_modal .modal_body {
      padding: 15px; } }

.resource {
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 12px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  position: relative;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
  cursor: pointer;
  display: flex;
  align-items: center; }
  .resource_content {
    margin-left: 15px;
    flex: 1; }
  .resource_name {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 4px; }
  .resource_description {
    font-size: 14px;
    line-height: 20px;
    color: var(--platform--secondary--color); }
  .resource_loader {
    margin-left: auto; }

.comment {
  display: flex; }
  .comment_wrapper {
    padding: 15px;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 12px rgba(0, 0, 0, 0.12);
    border-radius: 8px; }
  .comment_content {
    flex: 1; }
  .comment_text {
    font-size: 14px;
    line-height: 26px;
    font-weight: 400;
    text-align: justify;
    color: #424242; }
    .comment_text * {
      display: inline; }
  .comment_bot {
    display: flex;
    margin-top: 5px;
    line-height: 20px;
    font-size: 14px; }
    .comment_bot > div {
      margin-right: 15px;
      color: #717171; }
  .comment_repliesUsers {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    color: #2f2f2f;
    margin-top: 10px;
    cursor: pointer; }
    .comment_repliesUsers_imgs {
      display: flex;
      margin-right: 10px; }
      .comment_repliesUsers_imgs img {
        display: block;
        width: 26px;
        height: 26px;
        border-radius: 100%;
        object-fit: cover;
        border: 2px solid #fff;
        margin-left: -6px; }
        .comment_repliesUsers_imgs img:first-child {
          margin-left: -2px; }
  .comment_user {
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    margin-right: 5px; }
  .comment_reply {
    padding: 0 16px 16px 49px; }
  .comment_input {
    padding-left: 49px; }
  .comment_hideBtn {
    color: var(--platform--primary--color);
    font-size: 14px;
    line-height: 20px;
    margin-left: 49px;
    cursor: pointer;
    margin-bottom: 15px; }
  @media (max-width: 767px) {
    .comment_wrapper {
      padding: 15px 12px; }
    .comment .userAvatar {
      margin-right: 10px;
      max-width: 32px;
      max-height: 32px; }
    .comment_text {
      text-align: initial; }
    .comment_reply {
      padding-left: 40px; }
    .comment_bot {
      flex-flow: row wrap; }
      .comment_bot > div {
        margin-bottom: 4px; }
    .comment_input {
      padding-left: 40px; } }

.forumCategory {
  display: flex;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  background: #fff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 12px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  margin-bottom: 20px; }
  .forumCategory_content {
    flex: 1;
    color: #424242;
    padding-right: 50px;
    text-align: justify;
    line-height: 26px; }
  .forumCategory_icon {
    margin-right: 15px;
    align-self: flex-start; }
  .forumCategory_right {
    margin-left: auto;
    text-align: center;
    color: #717171;
    font-size: 14px;
    text-transform: capitalize; }
  .forumCategory_name {
    display: inline-flex;
    align-items: center;
    color: #000;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 8px; }
    .forumCategory_name i {
      display: none; }
  .forumCategory_count {
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
    color: #000; }
  .forumCategory_description p {
    margin-bottom: 0; }
  @media (max-width: 767px) {
    .forumCategory {
      padding: 15px;
      flex-direction: column;
      align-items: flex-start; }
      .forumCategory_name {
        font-size: 16px;
        line-height: 26px; }
        .forumCategory_name i {
          display: block;
          height: 24px;
          margin-right: 10px; }
      .forumCategory_description,
      .forumCategory_description * {
        font-size: 14px;
        line-height: 24px; }
      .forumCategory_right {
        margin-top: 8px;
        margin-left: 0;
        display: flex;
        align-items: center; }
      .forumCategory_count {
        font-size: 14px;
        line-height: 20px;
        margin-right: 5px;
        font-weight: 400; }
      .forumCategory_content {
        padding-right: 0; } }

.mapFind {
  position: absolute;
  top: 10px;
  right: 150px;
  width: 100%;
  z-index: 1;
  max-width: 825px; }
  .mapFind_control {
    height: 42px;
    width: 100%;
    border: none;
    outline: none;
    padding: 0 15px;
    font-size: 16px; }
  .mapFind_results {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 10px;
    min-height: 50px; }
    .mapFind_results_item {
      width: 100%;
      height: 42px;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 0 15px;
      font-size: 16px;
      cursor: pointer; }
      .mapFind_results_item:hover {
        background-color: var(--platform--primary--color);
        color: #fff; }
  @media (max-width: 1500px) {
    .mapFind {
      width: 500px; } }
  @media (max-width: 1199px) {
    .mapFind {
      width: 300px;
      right: 70px;
      left: 10px; } }
  @media (max-width: 767px) {
    .mapFind {
      width: auto;
      left: 10px;
      right: 10px; } }

.topThread {
  background: #f4f4f4;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  color: #000; }
  .topThread_title {
    font-weight: 600;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px; }
  .topThread_img {
    height: 24px;
    width: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 100%;
    display: block; }
    .topThread_img_wrap {
      margin-right: 15px; }
  .topThread_bot {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    color: #717171; }

.topContributors {
  background: #f4f4f4;
  padding: 20px;
  border-radius: 8px; }
  .topContributors_item {
    color: #000;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px; }
    .topContributors_item:last-child {
      margin-bottom: 0; }
    .topContributors_item_name {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical; }
    .topContributors_item_img {
      margin-right: 15px;
      height: 36px;
      width: 36px;
      object-fit: cover;
      border-radius: 100%; }
    .topContributors_item_counter {
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      color: #717171;
      margin-left: 15px; }
      .topContributors_item_counter i {
        font-size: 20px;
        margin-right: 5px; }

.message {
  background-color: #fff;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  line-height: 18px;
  margin-bottom: 8px;
  transition: all 0.3s;
  font-size: 13px;
  min-height: 64px; }
  .message:hover, .message.active {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 12px rgba(0, 0, 0, 0.12); }
  .message.broadcast {
    background: var(--platform--primary--light--color); }
    .message.broadcast.active {
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 12px rgba(0, 0, 0, 0.12); }
  .message_content {
    flex: 1; }
  .message_user {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px; }
  .message_broadcast {
    background-color: var(--platform--primary--light--color);
    box-shadow: none; }
  .message_text {
    color: #717171;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 18px;
    max-height: 36px; }
  .message_time {
    white-space: nowrap;
    color: var(--platform--secondary--color); }
  @media (max-width: 767px) {
    .message_user {
      line-height: 20px; }
    .message_text {
      font-size: 13px;
      line-height: 18px; } }

.conversation {
  border-top: 1px solid #f4f4f4;
  padding: 15px !important;
  min-height: 350px !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  .conversation_messages {
    flex: 1;
    overflow: auto; }
  .conversation_item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px; }
    .conversation_item_date {
      text-align: center;
      margin-bottom: 5px;
      font-size: 12px;
      line-height: 16px;
      color: var(--platform--secondary--color); }
    .conversation_item.incoming .conversation_item_content {
      background: #f4f4f4;
      border-radius: 24px 24px 24px 0; }
    .conversation_item.outgoing {
      justify-content: flex-end; }
      .conversation_item.outgoing .conversation_item_content {
        background: var(--platform--primary--color);
        color: #fff;
        border-radius: 24px 24px 0 24px;
        margin-left: auto; }
      .conversation_item.outgoing .conversation_item_video {
        margin-left: auto; }
    .conversation_item_avatar {
      margin-right: 10px;
      text-align: center; }
      .conversation_item_avatar img {
        width: 40px;
        height: 40px;
        border-radius: 40px; }
    .conversation_item_video {
      width: 280px; }
    .conversation_item_time {
      font-size: 11px;
      color: #585271;
      line-height: 20px; }
    .conversation_item_content {
      padding: 10px 20px; }
    .conversation_item .broadcast_chat_urlBtn {
      transition: all 0.3s; }
      .conversation_item .broadcast_chat_urlBtn:hover {
        background-color: #000; }
  @media (max-width: 767px) {
    .conversation {
      height: 500px;
      border: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important; } }

.conversationInput {
  align-items: center;
  display: flex;
  height: 48px;
  padding-left: 15px;
  background: #f4f4f4;
  border-radius: 12px; }
  .conversationInput_textarea {
    background: none;
    resize: none;
    flex: 1;
    height: 17px;
    padding: 0 10px;
    border: none;
    outline: none; }
  .conversationInput_btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    background-color: transparent;
    justify-content: center;
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer; }
    .conversationInput_btn img {
      width: 21px;
      display: block; }

.checkoutOption {
  background-color: #f4f4f4;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }
  .checkoutOption_top {
    padding: 25px 30px 25px 60px;
    display: block;
    position: relative; }
    .checkoutOption_top i {
      font-size: 20px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 25px; }
  .checkoutOption_title {
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #ababab;
    margin-bottom: 8px; }
  .checkoutOption_price {
    line-height: 24px;
    font-weight: 700;
    font-size: 20px; }
  .checkoutOption_trial {
    margin-top: 5px;
    font-style: italic;
    text-decoration: underline; }
  .checkoutOption_item {
    padding: 0 25px 20px 60px;
    position: relative;
    font-style: italic; }
    .checkoutOption_item, .checkoutOption_item:before {
      display: flex;
      color: #000;
      align-items: center; }
    .checkoutOption_item:before {
      content: '+';
      position: absolute;
      left: 25px;
      top: 0;
      bottom: 20px;
      font-size: 22px; }
  .checkoutOption .checkout_price {
    display: none; }
  @media (max-width: 991px) {
    .checkoutOption {
      border: 1px solid #eaeaea;
      box-shadow: 0 4px 26px rgba(0, 0, 0, 0.06);
      border-radius: 8px; }
      .checkoutOption_top {
        padding: 15px 15px 15px 40px; }
        .checkoutOption_top i {
          left: inherit;
          bottom: inherit;
          right: 20px;
          top: 20px; }
      .checkoutOption_item {
        padding: 0 25px 20px 60px;
        position: relative;
        font-style: italic; }
      .checkoutOption_title {
        padding-right: 35px; } }
  @media (max-width: 767px) {
    .checkoutOption_top {
      padding: 20px; }
    .checkoutOption_title {
      margin-bottom: 5px; }
    .checkoutOption .checkout_price {
      display: block;
      text-align: center;
      margin-top: 15px;
      padding: 20px;
      margin-bottom: 0; } }

.checkoutSummary {
  border-radius: 10px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #eaeaea;
  border-bottom: none;
  box-shadow: 0 4px 26px rgba(0, 0, 0, 0.06);
  padding: 15px; }

.checkoutSummary_item {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 26px; }

.checkoutCards {
  display: flex;
  flex-flow: row wrap;
  margin-left: -8px;
  margin-right: -8px;
  margin-top: 20px; }
  .checkoutCards_item {
    background: #fff;
    border: 2px solid #dadada;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    height: 70px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s; }
    .checkoutCards_item:hover {
      border: 2px solid var(--platform--primary--color); }
    .checkoutCards_item.active {
      background: rgba(21, 127, 244, 0.1);
      border: 2px solid var(--platform--primary--color); }
    .checkoutCards_item_wrapper {
      flex: 0 0 20%;
      width: 20%;
      margin-bottom: 16px;
      padding: 0 8px; }
    .checkoutCards_item_add {
      background: #f4f4f4;
      border: 2px solid #dadada;
      color: #ababab; }
      .checkoutCards_item_add:hover {
        color: #000; }
    .checkoutCards_item_number {
      font-weight: bold;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 1px; }
    .checkoutCards_item_imgs {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .checkoutCards_item_imgs i {
        color: var(--platform--primary--color); }
      .checkoutCards_item_imgs img {
        max-width: 40px;
        max-height: 20px; }
  @media (max-width: 767px) {
    .checkoutCards_item_wrapper {
      width: 33.333%;
      flex: 0 0 33.333%; } }

.checkoutOrderBump {
  border: 2px dashed #000;
  padding: 15px;
  margin-top: 20px !important;
  background-color: #fcf8e3; }
  .checkoutOrderBump .form_checkbox label {
    flex-direction: column;
    width: 100%; }
    .checkoutOrderBump .form_checkbox label:before {
      top: 25px;
      bottom: -6px;
      margin: auto; }
    .checkoutOrderBump .form_checkbox label:after {
      position: absolute;
      font-size: 22px;
      left: 3px;
      top: -25px;
      bottom: 0;
      display: flex;
      align-items: center;
      animation: blinkingArrow 1s linear infinite;
      margin: auto;
      font-family: 'Font Awesome 5 Free';
      content: '\F309';
      font-weight: 900;
      color: #ea1414; }
  .checkoutOrderBump_title {
    text-align: center;
    margin-bottom: 10px; }

@keyframes blinkingArrow {
  50% {
    opacity: 0; } }

.quizCard {
  border-radius: 8px;
  background-color: #ddf4dd;
  display: flex;
  align-items: center;
  margin-left: 60px;
  margin-bottom: 15px;
  padding: 15px 20px;
  cursor: pointer; }
  .quizCard_notAvailable {
    background: #f4f4f4;
    cursor: not-allowed; }
  .quizCard_isDone {
    background-color: #fff;
    border: 2px solid #ddf4dd; }
    .quizCard_isDone .quizCard_icon {
      background-color: #ddf4dd; }
  .quizCard_repeat {
    border: 2px solid var(--platform--primary--color); }
    .quizCard_repeat .quizCard_icon {
      color: var(--platform--primary--color);
      background-color: var(--platform--primary--light--color); }
  .quizCard_content {
    margin-right: 10px; }
  .quizCard_icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px; }
  .quizCard_right {
    margin-left: auto; }
    .quizCard_right i {
      color: #3bbb40; }
  .quizCard_name {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 4px; }
  .quizCard_desc {
    font-size: 14px;
    line-height: 20px;
    color: #717171; }
  @media (max-width: 767px) {
    .quizCard {
      margin-left: 0;
      padding: 10px; }
      .quizCard_name {
        font-size: 15px; }
      .quizCard_desc {
        font-size: 12px; } }

.courseAchievement {
  padding: 12px 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  line-height: 20px;
  margin-bottom: 12px;
  cursor: pointer; }
  .courseAchievement:last-child {
    margin-bottom: 0; }
  .courseAchievement.owned {
    background-color: var(--platform--primary--light--color); }
    .courseAchievement.owned .iconCircle {
      color: #fff; }
    .courseAchievement.owned .courseAchievement_downloader {
      color: var(--platform--primary--color); }
  .courseAchievement.notDownloadable {
    cursor: default; }
  .courseAchievement_content {
    margin-left: 12px; }
  .courseAchievement_name, .courseAchievement_text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical; }
  .courseAchievement_name {
    -webkit-line-clamp: 1;
    font-weight: 600;
    margin-bottom: 2px; }
  .courseAchievement_text {
    -webkit-line-clamp: 2;
    text-transform: capitalize;
    font-size: 14px;
    color: #717171; }
  .courseAchievement_downloader {
    color: #a4a4a4;
    margin-left: auto; }
    .courseAchievement_downloader i {
      font-size: 18px; }
  .courseAchievement .iconCircle {
    color: var(--platform--secondary--color); }

.findCity {
  position: relative; }
  .findCity_results {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    transform: translate(0, 100%);
    border: 1px solid;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 50px;
    border: 1px solid #dadada; }
    .findCity_results_item {
      width: 100%;
      height: 42px;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 0 15px;
      font-size: 16px;
      cursor: pointer; }
      .findCity_results_item:hover {
        background-color: var(--platform--primary--color);
        color: #fff; }
  .findCity_loader {
    position: absolute;
    right: 5px;
    top: 5px; }

.widget {
  cursor: pointer;
  display: block;
  overflow: hidden;
  border-radius: 8px; }
  .widget img {
    display: block;
    width: 100%; }

.translations {
  position: relative;
  padding: 0 15px; }
  .translations_selected, .translations_menu {
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase; }
  .translations_menu {
    position: absolute;
    background-color: #fff;
    bottom: -5px;
    z-index: 1;
    right: 0;
    left: 0;
    transform: translate(0, 100%);
    padding: 5px 15px;
    border-radius: 8px; }
    .translations_menu > div {
      margin-bottom: 10px; }
      .translations_menu > div:last-child {
        margin-bottom: 0; }
  .translations_selected {
    display: flex;
    cursor: pointer;
    align-items: center;
    border-radius: 32px;
    height: 36px; }
  .translations_item {
    display: flex;
    align-items: center;
    cursor: pointer; }
    .translations_item_flag {
      height: 18px;
      width: 18px;
      border-radius: 100%;
      margin-right: 6px;
      overflow: hidden; }
      .translations_item_flag img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover; }
  @media (max-width: 767px) {
    .translations {
      padding: 0; }
      .translations_menu {
        left: 0; } }