/* Pulse Animation */
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
}
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the video scales without cropping */
}

#fullscreen-wrapper {
  position: absolute;
  bottom: 30px;
  right: 10px;
  z-index: 99999;
  border: none;
  /* background: rgba(0, 0, 0, 0.6); */
  height: 30px;
  border-radius: 50%;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
video:-webkit-full-screen {
  width: 100% !important;
  height: auto !important;
}

.single-lesson .wraper-header {
  display: none;
}
.loading-tab-content .preloader-loader {
  width: 40px;
  height: 40px;
  margin-right: 5px;
}
.level-head {
  cursor: pointer;
}

.levels .level {
  position: relative;
  z-index: 1;
}

.level-lesson__item a {
  position: relative;
}

.level-lesson__counter {
  top: 0;
  left: 0;
}

.level-lesson__words {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0;
  z-index: 10;
}

.level-lesson__item {
  position: relative;
}

.level-lesson__words-notification {
  display: none;
  position: absolute;
  left: 100%;
  bottom: 0;
  z-index: 100;
  width: 280px;
  text-align: left;
  background-color: #1f63a6;
  border-radius: 16px;
  box-shadow: 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
}

.level-lesson__words-notification .top {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 16px;
}

.level-lesson__words-notification .bottom {
  padding: 12px 16px;
  color: #233537;
  background-color: #fff;
  border-radius: 16px 16px 16px 0;
  font-size: 16px;
}

.level-lesson__words-notification .bottom a {
  color: #0077ff;
}

.w_icon:hover circle {
  fill: #ff9207;
}

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

.container-tasks {
  padding: 20px 0;
  margin: 0 auto;
  position: relative;
  /* position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    background-color: #F3F7FD;
    z-index: 10; */
}

.container-tasks__inner {
  /* position: absolute;
    min-height: 540px
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 928px; */
  max-width: 928px;
  min-height: 540px;
  padding: 0px !important;
  background-color: #fff;
  border-radius: 16px;
  margin: 0 auto;
}

.container-tasks__inner > img {
  max-height: 470px;
  object-fit: cover;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 16px;
}

.container-tasks__inner .bottom-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 32px 16px;
}

.container-tasks__inner .bottom-container__line {
  height: 100%;
  min-height: 80px;
  margin: 0 10px;
}

.container-tasks__inner .bottom-left-container {
  text-align: left;
}

.container-tasks__lesson {
  color: #707b8b;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

.container-tasks__title {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 21px;
  line-height: 32px;
  font-weight: 700;
  color: #02161e;
  margin-bottom: 5px;
}

.container-tasks__title--other {
  opacity: 1;
}

.container-tasks__title .name-task {
  font-weight: normal;
}

.container-tasks__title .close {
  display: flex;
  flex-flow: row wrap;
  justify-content: end;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.tasks__top span.text {
  width: 19%;
}

.container-tasks__title .close a svg {
  cursor: pointer;
  margin-left: 16px;
  padding: 1px 0px;
}

.container-tasks__title-start {
  font-size: 28px;
  font-weight: bold;
  line-height: 36px;
  color: #02161e;
}

.container-tasks__btn {
  display: inline-flex;
  flex-flow: row wrap;
  align-items: center;
  background-color: #ff9207;
  border-radius: 5px;
  border: 1px solid transparent;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.15385;
  padding: 16px 33px;
  min-height: 40px;
}

.container-tasks__btn_quit {
  display: inline-flex;
  flex-flow: row wrap;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  border: 3px solid #ff9207;
  color: #ff9207;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.15385;
  padding: 16px 32px;
  min-height: 60px;
  margin-top: 20px;
  font-weight: 600;
}

.container-tasks__btn.try-question-button {
  background-color: #ed4818;
}

.container-tasks__btn.try-question-button svg {
  margin: 0 4px 0 18px;
}

.container-tasks__btn > svg {
  margin: 0 18px 0 4px;
}

.container-tasks__btn > .right-icon {
  margin: 0 4px 0 18px;
}

.container-tasks__btn > svg.icon-right {
  margin: 0 4px 0 18px;
  transition: all 0.4s;
}

.container-tasks__btn:hover > svg.icon-right {
  transform: translateX(10px);
}

.lesson-score {
}

.lesson-score__title {
  font-weight: 700;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: 0.02em;
  text-align: center;
  color: #02161e;
  margin-top: 32px;
  display: block;
}

.lesson-score__descrition {
  letter-spacing: 0.02em;
  text-align: center;
  color: #02161e;
  margin: 32px 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  width: 100%;
  display: block;
}

.container-tasks__lesson-score {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  justify-content: center;
}

.container-tasks__diagram {
  background: #ffffff;
  box-shadow: 0px 8px 32px rgb(0 0 0 / 4%);
  border-radius: 12px;
  margin: 12px;
  width: calc(100% / 4 - 24px);
  padding: 50px 30px 30px 30px;
  position: relative;
  min-width: 220px;
}

.container-tasks__diagram:before {
  content: "";
  background: #ff9207;
  color: #fff;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 10px;
  top: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.container-tasks__diagram:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 5px;
  top: 7px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: #fff;
}

.container-tasks__diagram:nth-child(1):before {
  background: #6bd7ff;
}

.container-tasks__diagram:nth-child(2):before {
  background: #ff9207;
}

.container-tasks__diagram:nth-child(3):before {
  background: #1f63a6;
}

.container-tasks__diagram:nth-child(4):before {
  background: #049a5b;
}

.container-tasks__diagram .title {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

.container-tasks__diagram .subtitle {
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #02161e;
  opacity: 0.4;
  margin-bottom: 16px;
}

.container-tasks__diagram .subtitle span {
  font-style: normal;
  font-weight: bold;
}

.pie-chart {
  display: grid;
  place-items: center;
  background: conic-gradient(
    hsl(200, 100%, 45%) 0,
    hsl(200, 100%, 45%) 45%,
    hsl(200, 100%, 95%) 0,
    hsl(200, 100%, 95%) 100%
  );
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  border-radius: 50%;
}

.pie-chart__inner {
  display: grid;
  place-items: center;
  background: white;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  font-size: 12px;
  font-style: italic;
}

.pie-chart__inner b {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  display: inline-block;
  margin-right: 5px;
}

.lesson-score__btn {
  margin-top: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .wrong-answer {
    border-radius: 10px;
    border: 2px solid red;
  }
  .correct-answer {
    border-radius: 10px;
    border: 2px solid green;
  } */

.single-lesson .wraper__footer {
  display: none;
}

.lesson-start {
  box-shadow: 0px 8px 32px rgb(0 0 0 / 4%);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

.lesson-start__button svg {
  transition: all 0.4s;
}

.lesson-start__button:hover svg {
  transform: translateX(-10px);
}

.finish-part {
  background-color: transparent;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  width: 100%;
  padding-top: 168px;
  position: relative;
}

.task-words__finish {
  position: relative;
}

.task-words__finish:before,
.finish-part:before {
  content: "";
  width: 0%;
  height: 0%;
  background: url("../img/confetti.svg") no-repeat 50% 50%;
  display: block;
  position: absolute;
  background-size: contain;
  z-index: -1;
  animation: pulse_confetti 3s 1;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes pulse_confetti {
  0% {
    width: 0%;
    height: 0%;
  }

  70% {
    width: 100%;
    height: 100%;
  }

  100% {
    opacity: 0;
  }
}

.finish-part > svg {
  margin-bottom: 16px;
}

.finish-part__title {
  font-weight: bold;
  font-size: 64px;
  line-height: 72px;
  color: #02161e;
  margin-bottom: 16px;
}

.finish-part__description {
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  color: #233537;
  margin-bottom: 48px;
}

.finish-part__grade {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 48px;
  width: 100%;
}

.finish-part__grade .score,
.finish-part__grade .words-count {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  color: #233537;
}

.finish-part__grade .line {
  width: 1px;
  height: 35px;
  background-color: #a0b7c3;
  margin: 0 30px;
}

.finish-part__grade .score .num,
.finish-part__grade .words-count .num {
  display: inline-block;
  font-size: 28px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  color: #1f63a6;
  background: #ffffff;
  box-shadow: 0px 8px 32px rgb(0 0 0 / 4%);
  border-radius: 30px;
  padding: 8px 16px;
  margin-left: 16px;
}

.finish-part__grade .words-count .num {
  color: #ed4818;
}

.finish-part__btn {
  font-weight: bold;
}

.js-audio-play audio {
  display: none;
}

.flipped-js-audio-play {
  position: absolute;
  right: 33px;
  bottom: -21px;
  z-index: 999;
}

.flipped-js-audio-play img {
  height: auto !important;
}

/* Learn words */
.task-words {
  background-color: transparent;
  /* padding-bottom: 20vh; */
  padding-top: 88px;
}

.task-words__card {
  position: relative;
  width: 100%;
  margin-bottom: 22px;
  height: 540px;
}

.task-words__card.swipe-left {
  animation: swipe-left 2s linear;
}

.task-words__card.swipe-right {
  animation: swipe-right 2s linear;
}

.task-words__word,
.task-words__translation {
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  transition: 0.6s linear;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.task-words__translation {
  display: flex;
  flex-flow: column wrap;
  background-color: #fff;
  border-radius: 16px;
  transform: perspective(1500px) rotateY(180deg) translateZ(4px);
}

.task-words__translation .img-wrap {
  display: inline-block;
  width: 100%;
  text-align: center;
  /* margin-bottom: 20px; */
}

.task-words__translation .img-wrap img {
  height: 420px;
  width: 100%;
  object-fit: cover;
  margin-bottom: 20px;
}

.task-words__translation .img-wrap .img {
  margin-bottom: 0;
}

.task-words__translation .title {
  color: #02161e;
  font-weight: 500;
  font-size: 48px;
  padding-left: 40px;
}

.task-words-buttons {
  display: none;
  /* max-width: 928px; */
  margin: 0 auto;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  transition: all 0.4s;
  padding: 0 5px;
  margin: 0 auto;
}

.task-words__card.active + .task-words-buttons {
  display: flex;
}

.task-words__word {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 16px;
  transform: perspective(1500px) rotateY(0deg) translateZ(0px);
  /* margin-top: -50%; */
  top: 0;
  position: absolute;
}

.test-mode-wrapper {
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  color: #fff;
  font-size: 14px;
  border-top-right-radius: 20px;
  z-index: 120;
  position: fixed;
  bottom: 0;
  left: 0;
}

.task-words__word .title {
  position: relative;
  max-width: 500px;
  width: 100%;
  color: #18386b;
  font-size: 72px;
  font-weight: 500;
  line-height: 80px;
  margin-bottom: 96px;
}

.task-words__word .sentence {
  position: relative;
  max-width: 500px;
  width: 100%;
  color: #233537;
  font-size: 20px;
}

.task-words__word .title__audio {
  position: absolute;
  right: 40px;
  bottom: 80px;
  z-index: 20;
}

.task-words__word .sentence__inner {
  position: relative;
  display: inline-flex;
  flex-flow: center;
  align-items: center;
  border: 1px solid #6bd7ff;
  border-radius: 0 22px 22px 22px;
  padding: 12px 24px;
  flex-wrap: wrap;
}

.task-words__word .sentence__inner::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-right-width: 18px;
  border-left-width: 0px;
  border-bottom: 12px solid #6bd7ff;
  left: -1px;
  bottom: 100%;
}

span.translated_sentence {
  width: 100%;
  display: block;
  font-size: 12px;
}

@media (min-width: 600px) {
  span.translated_sentence {
    font-size: 13px;
  }
}

.task-words__word .sentence__inner::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-right-width: 18px;
  border-left-width: 0px;
  border-bottom: 12px solid #fff;
  left: 0px;
  bottom: calc(100% - 2px);
}

.sentence__audio {
  background-image: url(../../public/img/audio.svg);
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 17px;
}

.task-words-buttons .container-tasks__btn {
  margin: 0 0px;
  font-size: 16px;
  line-height: 1.15385;
  padding: 10px 16px;
  min-height: 44px;
  min-width: 150px;
  display: flex;
  justify-content: center;
}

.task-words-buttons__repeat-word {
  color: #fff;
  background-color: #3b7bce;
  transition: all 0.4s;
}

.task-words-buttons__next-word {
  transition: all 0.4s;
}

.task-words-buttons__repeat-word svg {
  margin: 0 18px 0 0;
  transition: all 0.4s;
}

.task-words-buttons__next-word svg {
  margin: 0 0 0 18px;
  transition: all 0.4s;
}

.task-words-buttons__repeat-word:hover {
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.2);
}

.task-words-buttons__next-word:hover {
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.2);
}

.task-words-buttons__repeat-word:hover svg {
  transform: translateX(-10px);
}

.task-words-buttons__next-word:hover svg,
.task-words-buttons__next-word:hover img,
.js-repeat-word:hover img {
  transform: translateX(10px);
}

.task-words-linner-wrap {
  display: flex;
  align-items: center;
  text-align: left;
  justify-content: start;
  width: 52%;
}

.tasks__top_hd h3 {
  color: #18386b;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 5px;
}

.task-words-linner {
  flex: 1 1;
  position: relative;
  display: inline-block;
  width: 100%;
  border-radius: 12px;
  height: 8px;
  background-color: rgba(112, 123, 139, 0.12);
}

.task-words-linner i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #ff9207;
  border-radius: 20px;
}

.task-words-nuber {
  flex: 0 0 auto;
  background-color: #fff;
  font-size: 16px;
  line-height: 24px;
  color: #233537;
  border-radius: 22px;
  padding: 4px 12px;
  margin-left: 16px;
}

.task-words__card.active .task-words__translation {
  transform: perspective(1500px) rotateY(0deg) translateZ(0px);
}

.task-words__card.active .task-words__word {
  transform: perspective(1500px) rotateY(-180deg) translateZ(4px);
}

.task-words__card .message {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 14px;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
  background-color: #ed4818;
}

.task-words__word .message svg {
  margin-left: 18px;
}

.task-words__translation .message svg {
  margin: 0 18px;
}

.task-words__finish {
  text-align: center;
  padding-top: 80px;
  margin-bottom: 20vh;
}

.task-words__finish > svg {
  margin-bottom: 32px;
}

.task-words__finish .title {
  font-weight: bold;
  font-size: 64px;
  line-height: 72px;
  color: #02161e;
  margin-bottom: 16px;
}

.task-words__finish .description {
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  color: #233537;
  margin-bottom: 62px;
}

.task-words__finish .btn-next {
  font-weight: bold;
  line-height: 28px;
  align-items: center;
}

.task-words__finish .btn-next > svg {
  margin: 0 4px 0 18px;
  transition: all 0.4s;
}

.task-words__finish .btn-next:hover > svg {
  transform: translateX(10px);
}

/* Select correct translation */
.select-correct-translation {
  min-height: 500px;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  background-color: transparent;
  padding: 0px 20px 50px;
  margin-bottom: 20px;
}

.select-correct-translation .task-words-linner-wrap {
  margin-bottom: 40px;
}

.select-correct-translation__word {
  margin-bottom: 15px;
}

.select-correct-translation__word .word {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  color: #18386b;
  font-size: 72px;
  font-weight: 500;
  line-height: 80px;
  margin-bottom: 30px;
}

.select-correct-translation__word .word .title__audio {
  margin: 0 16px;
  cursor: pointer;
}

.select-correct-translation__translations {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  margin-bottom: 54px;
}

.progress-time {
  position: relative;
  height: 8px;
  width: 128px;
  margin: 0 auto;
  background: rgba(112, 123, 139, 0.12);
  border-radius: 12px;
  margin-bottom: 32px;
}

.progress-time .progress-line {
  position: absolute;
  left: 0;
  display: inline-block;
  height: 100%;
  width: 0%;
  background: #6bd7ff;
  border-radius: 20px;
}

.select-correct-translation-next button {
  font-weight: bold;
  align-items: center;
}

.select-correct-translation-next button svg {
  margin: 0 4px 0 17px;
}

.select-correct-translation__btn-wrap {
  text-align: center;
}

.select-correct-translation__btn-wrap .btn-next {
  align-items: center;
  font-weight: 700;
}

.select-correct-translation__btn-wrap .btn-next svg {
  margin: 0 4px 0 17px;
}

.select-correct-translation .translation-wrap {
  position: relative;
  cursor: pointer;
  background-color: #fff;
  padding: 8px;
  border: 5px solid transparent;
  border-radius: 16px;
  margin: 0 16px;
  flex: 1;
  box-shadow: 0px 8px 32px rgba(24, 56, 107, 0.16);
  transition: all 0.4s;
}

.select-correct-translation .translation-wrap:hover {
  border-color: #6bd7ff;
  transform: translateY(-16px);
}

.select-correct-translation .translation-wrap.correct-answer {
  border-color: #049a5b;
  transform: translateY(-16px);
}

.select-correct-translation .translation-wrap.correct-answer::after {
  content: "";
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../img/ok.svg");
  background-repeat: no-repeat;
  width: 46px;
  height: 46px;
}

.select-correct-translation .translation-wrap.wrong-answer {
  border-color: #f33b3e;
  transform: translateY(-16px);
}

.select-correct-translation .translation-wrap.wrong-answer::after {
  content: "";
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../img/no-ok.svg");
  background-repeat: no-repeat;
  width: 46px;
  height: 46px;
}

.select-correct-translation .translation-wrap img {
  height: 160px;
  object-fit: cover;
  margin-bottom: 15px;
  border-radius: 10px;
}

.select-correct-translation .translation-wrap__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
  color: #18386b;
}

.select-correct-translation__num-question {
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  text-align: center;
}

/* Watch video */
.video-conteiner {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  max-width: 958px;
  padding: 32px 15px 0 15px;
  margin: 0 auto;
}

/*Speaking task video container size update*/
.container-tasks.container-tasks-speaking .video-conteiner {
  max-width: 1020px;
  width: 114%;
  padding: 32px 15px 0 15px;
  margin: 0 auto 0 -5%;
}
.container-tasks.container-tasks-speaking .task-pronunciation .bkwhite {
  max-width: 1020px;
  width: 113%;
  margin-left: -5%;
  padding: 50px;
}
@media (max-width: 1192px) {
  .container-tasks.container-tasks-speaking .video-conteiner {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    margin-left: 0;
  }
  .container-tasks.container-tasks-speaking .task-pronunciation .bkwhite {
    padding-left: 15px;
    padding-right: 15px;
    width: 97%;
    margin-left: 0;
    margin-left: 2%;
  }
}
/*Speaking task video container size update*/

.video-conteiner .video,
.video-popup-wrapper .video {
  width: 100%;
  height: 100%;
}

.iframe-conteiner .iframe-task {
  width: 100%;
  min-height: 480px;
  aspect-ratio: 16 / 9;
  cursor: default;
}

.iframe-conteiner .iframe-task__embed {
  width: 100%;
  height: 100%;
  min-height: 596px;
  border: 0;
  display: block;
}

.sp-voice-over-task__instruction {
  max-width: 958px;
  margin: 0 auto 24px;
  padding: 0 15px;
}

.sp-voice-over-task__list {
  max-width: 958px;
  margin: 0 auto;
  padding: 0 15px;
}

.sp-voice-over-task__item {
  margin-bottom: 24px;
}

.sp-voice-over-task__video .video {
  width: 100%;
  border-radius: 16px;
}

.video-conteiner .c-video {
  position: relative;
  font-size: 0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s;
  cursor: pointer;
  height: 100%;
}

.video-conteiner .center-play,
.video-popup-wrapper .center-play {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.video-conteiner .controls,
.video-popup-wrapper .controls {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px;
  margin: 15px;
  border-radius: 8px;
  width: calc(100% - 30px);
  transition: all 0.4s;
  opacity: 0;
}

.video-conteiner .c-video:hover .controls,
.video-popup-wrapper .video-area:hover .controls {
  opacity: 1;
}

.video-conteiner .buttons,
.video-popup-wrapper .buttons {
  font-size: 0;
  padding-right: 10px;
}

.video-conteiner .buttons button,
.video-popup-wrapper .buttons button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 0;
  padding: 0;
}

.video-conteiner .buttons button::before,
.video-popup-wrapper .buttons button::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='81' viewBox='0 0 80 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_b_69_12124)'%3E%3Cellipse cx='40' cy='40.6132' rx='39.7714' ry='39.7714' fill='%23FF9207'/%3E%3C/g%3E%3Cpath d='M52.8892 40.6135L33.5558 51.7756L33.5558 29.4514L52.8892 40.6135Z' fill='white'/%3E%3Cdefs%3E%3Cfilter id='filter0_b_69_12124' x='-3.77148' y='-3.1582' width='87.543' height='87.543' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImage' stdDeviation='2'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_69_12124'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_69_12124' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: cover;
  width: 30px;
  height: 30px;
  display: inline-block;
}

.video-conteiner .buttons button.play::before,
.video-popup-wrapper .buttons button.play::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='81' viewBox='0 0 80 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_b_69_12124)'%3E%3Cellipse cx='40' cy='40.6132' rx='39.7714' ry='39.7714' fill='%23FF9207'/%3E%3C/g%3E%3Cpath d='M52.8892 40.6135L33.5558 51.7756L33.5558 29.4514L52.8892 40.6135Z' fill='white'/%3E%3Cdefs%3E%3Cfilter id='filter0_b_69_12124' x='-3.77148' y='-3.1582' width='87.543' height='87.543' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImage' stdDeviation='2'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_69_12124'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_backgroundBlur_69_12124' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
}

.video-conteiner .buttons button.pause::before,
.video-popup-wrapper .buttons button.pause::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='14.4999' cy='14.6127' rx='13.7143' ry='13.7143' fill='white'/%3E%3Crect x='11.5278' y='11.0586' width='1.77778' height='7.11111' fill='%23FF9207'/%3E%3Crect x='14.9443' y='11.0586' width='1.77778' height='7.11111' fill='%23FF9207'/%3E%3C/svg%3E%0A");
}

.video-conteiner .orange-bar,
.video-popup-wrapper .orange-bar {
  flex: 1 0 auto;
  height: 4px;
  background-color: rgba(112, 123, 139, 0.2);
}

.video-conteiner .orange-juice,
.video-popup-wrapper .orange-juice {
  height: 4px;
  width: 0;
  background-color: #ff9207;
}

.video-conteiner .time,
.video-conteiner .full-time,
.video-popup-wrapper .time,
.video-popup-wrapper .full-time {
  flex: 0 1 auto;
  font-size: 10px;
  line-height: 20px;
  color: azure;
  margin: 0 7px;
}

.video-conteiner .sound,
.video-popup-wrapper .sound {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.video-conteiner .sound svg,
.video-popup-wrapper .sound svg {
  margin-right: 5px;
}

.video-conteiner .sound [type="range"],
.video-popup-wrapper .sound [type="range"] {
  width: 0;
  transition: all 0.4s;
  height: 2px;
  -webkit-appearance: none;
}

.video-conteiner .sound:hover [type="range"],
.video-popup-wrapper .sound:hover [type="range"] {
  width: 70px;
}

.video-conteiner .sound input[type="range"]::-webkit-slider-thumb,
.video-popup-wrapper .sound input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  border-radius: 50px;
  background: #ff9800;
  cursor: pointer;
  width: 0;
  height: 0;
}

.video-conteiner .sound:hover input[type="range"]::-webkit-slider-thumb,
.video-popup-wrapper .sound:hover input[type="range"]::-webkit-slider-thumb {
  height: 10px;
  width: 10px;
}

.video-conteiner__btn {
  font-weight: bold;
}

.video-conteiner #video-seek-slider,
.video-popup-wrapper #video-seek-slider {
  flex: 1;
  position: relative;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 4px;
  background-color: rgba(112, 123, 139, 0.2);
  cursor: pointer;
}

.video-conteiner #video-seek-slider::-webkit-slider-thumb,
.video-popup-wrapper #video-seek-slider::-webkit-slider-thumb {
  opacity: 0;
}

.video-conteiner #video-seek-slider::before,
.video-popup-wrapper #video-seek-slider::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: var(--seek-before-width);
  height: 4px;
  background-color: #ff9207;
  cursor: pointer;
}

/* Answer questions */
.answer-questions {
  max-width: 968px;
  padding: 88px 20px 50px 20px;
  background-color: transparent;
  margin-bottom: 20px;
}

.answer-questions-inner {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  margin-bottom: 20px;
}

.answer-questions-inner .task-words-linner-wrap {
  flex: 1 0 100%;
}

.answer-questions__text {
  flex: 1;
  padding: 0 16px;
}

.answer-questions__text .text {
  height: 450px;
  background-color: #fff;
  padding: 32px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow-y: auto;
}

.answer-questions__text h3 {
  position: relative;
  font-weight: bold;
  font-size: 18px;
  line-height: 32px;
  text-transform: uppercase;
  color: #02161e;
  margin-bottom: 32px;
}

.answer-questions__text h3::after {
  content: "";
  width: 88px;
  height: 3px;
  background-color: #f9db37;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
}

.answer-questions__text p {
  font-size: 16px;
  line-height: 24px;
  color: #233537;
}

.answer-questions__text .speak-icon {
  cursor: pointer;
}

.answer-questions__variants {
  flex: 1;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-around;
  padding: 0 16px;
}

.answer-questions__variants .text {
  font-weight: bold;
  font-size: 18px;
  line-height: 28px;
  color: #02161e;
  margin-bottom: 24px;
}

.answer-questions .variant {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  background-color: #fff;
  padding: 16px;
  font-size: 16px;
  line-height: 24px;
  color: #233537;
  border: 2px solid transparent;
  margin-bottom: 10px;
  transition: all 0.4s;
}

.answer-questions .variant:hover {
  border-color: #6bd7ff;
  box-shadow: 0px 8px 32px rgb(24 56 107 / 16%);
}

.answer-questions .variant.active-false {
  border-color: #d90004;
  background-color: #fff5f5;
}

.answer-questions .variant.active-true {
  border-color: #049a5b;
  background-color: #f6fff7;
}

.answer-questions .variant__check {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid #9da5b0;
  border-radius: 6px;
  margin-right: 16px;
}

.answer-questions .variant.active-false .variant__check {
  background-color: #d90004;
  border-color: #d90004;
}

.answer-questions .variant.active-true .variant__check {
  background-color: #049a5b;
  border-color: #049a5b;
}

.wrap-clue {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
}

.wrap-clue__icon {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  background-color: #6bd7ff;
  border-radius: 50%;
  margin: 14px 0;
  cursor: pointer;
}

.wrap-clue__offer {
  position: absolute;
  top: 14px;
  right: 73px;
  display: none;
  width: 238px;
  border-radius: 16px;
  background: #ffffff;
  transition: all 0.4s;
  box-shadow: 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
}

.wrap-clue__offer .top-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  background: #ed4818;
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 8px;
}

.wrap-clue__offer .middle-text {
  padding: 0 16px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
  color: #233537;
}

.wrap-clue__offer .buttons {
  display: flex;
  flex-flow: row wrap;
  margin: 0 12px;
  margin-bottom: 12px;
}

.wrap-clue__offer .buttons button {
  flex: 1;
  margin: 0 4px;
  background: #f3f6f8;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #707b8b;
  padding: 8px;
  cursor: pointer;
}

.wrap-clue__offer .buttons button:last-child {
  background: #fff6e0;
  color: #ff9207;
}

.wrap-clue__clue {
  position: absolute;
  top: 14px;
  right: 73px;
  display: none;
  width: 348px;
  background-color: #fff;
  border-radius: 16px;
  transition: all 0.4s;
  box-shadow: 0px 30.1616px 38.3382px rgb(0 28 67 / 6%),
    0px 17.9997px 19.2259px rgb(0 28 67 / 5%),
    0px 11.8413px 7.48995px rgb(0 28 67 / 4%),
    0px 7.52386px 0.694863px rgb(0 28 67 / 3%),
    0px 3.75382px 0px rgb(0 28 67 / 2%);
}

.wrap-clue__clue .top-text {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  padding: 16px;
  background-color: #6bd7ff;
  border-radius: 16px;
  margin-bottom: 12px;
}

.wrap-clue__clue .middle-text {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #233537;
  padding: 0 16px;
  margin-bottom: 16px;
}

.wrap-clue__clue button {
  display: block;
  min-width: 170px;
  background: #ddf5ff;
  border-radius: 7px;
  border: none;
  padding: 10px;
  margin: 0 auto;
  margin-bottom: 22px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #1f63a6;
  cursor: pointer;
}

.answer-questions__btns {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  width: 100%;
}

.answer-questions__btns button {
  display: none;
}

.answer-questions__btns .try-question-button {
  background-color: #ed4818;
}

.answer-questions__btns .try-question-button > svg {
  margin: 0 4px 0 18px;
}

.answer-questions .audio-player-container {
  font-family: "Poppins", sans-serif;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  padding: 10px 18px;
  max-width: 450px;
  background-color: #ffffff;
  --seek-before-width: 0%;
  --volume-before-width: 100%;
  --buffered-width: 0%;
  border-radius: 8px;
  cursor: pointer;
}

.answer-questions .audio-player-container .time {
  font-family: "Poppins", sans-serif;
  display: inline-block;
  font-size: 10px;
  line-height: 20px;
  color: #233537;
  padding: 0 8px;
}

.answer-questions #mute-icon {
  margin-left: 8px;
  cursor: pointer;
}

.answer-questions .play-icon {
  font-size: 0;
  margin-right: 10px;
}

.answer-questions #volume-slider {
  margin: 10px 2.5%;
  width: 58%;
}

.answer-questions #volume-slider::-webkit-slider-runnable-track {
  background: rgba(0, 125, 181, 0.6);
}

.answer-questions #volume-slider::-moz-range-track {
  background: rgba(0, 125, 181, 0.6);
}

.answer-questions #volume-slider::-ms-fill-upper {
  background: rgba(0, 125, 181, 0.6);
}

.answer-questions #volume-slider::before {
  width: var(--volume-before-width);
}

.answer-questions input[type="range"] {
  flex: 1;
  position: relative;
  -webkit-appearance: none;
  width: 48%;
  margin: 0;
  padding: 0;
  height: 6px;
}

.answer-questions input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: rgba(112, 123, 139, 0.2);
}

.answer-questions input[type="range"]::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: var(--seek-before-width);
  height: 6px;
  background-color: #6bd7ff;
  cursor: pointer;
}

.answer-questions input[type="range"]::-webkit-slider-thumb {
  opacity: 0;
}

.answer-questions input[type="range"]:active::-webkit-slider-thumb {
  opacity: 0;
}

.answer-questions input[type="range"]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: linear-gradient(
    to right,
    rgba(0, 125, 181, 0.6) var(--buffered-width),
    rgba(0, 125, 181, 0.2) var(--buffered-width)
  );
}

/* input[type="range"]::-moz-range-progress {
    background-color: #007db5;
  } */
.answer-questions input[type="range"]::-moz-focus-outer {
  border: 0;
}

.answer-questions input[type="range"]::-moz-range-thumb {
  opacity: 0;
}

.answer-questions input[type="range"]:active::-moz-range-thumb {
  opacity: 0;
}

.answer-questions input[type="range"]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: transparent;
  border: solid transparent;
  color: transparent;
}

.answer-questions input[type="range"]::-ms-fill-lower {
  background-color: #007db5;
}

.answer-questions input[type="range"]::-ms-fill-upper {
  background: linear-gradient(
    to right,
    rgba(0, 125, 181, 0.6) var(--buffered-width),
    rgba(0, 125, 181, 0.2) var(--buffered-width)
  );
}

.answer-questions input[type="range"]::-ms-thumb {
  opacity: 0;
}

.answer-questions input[type="range"]:active::-ms-thumb {
  opacity: 0;
}

/* Put the words into the correct order */
.arrange-words {
  margin: 0 auto;
  max-width: 968px;
  min-height: 500px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  padding: 30px 20px 20px 20px;
  background-color: transparent;
}

.arrange-words__img-wrap {
  width: 544px;
  margin-bottom: 30px;
}

.arrange-words__img-wrap img {
  width: 100%;
  max-height: fit-content;
  object-fit: cover;
}

.arrange-words__text {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #1f63a6;
  margin-bottom: 40px;
  position: relative;
}

.arrange-words__text .hebrew {
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  color: #02161e;
}

.arrange-words__places-words {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-bottom: 50px;
}

.arrange-words__places-words .place-word {
  min-width: 100px;
  height: 56px;
  border-radius: 8px;
  border: 2px dashed #3794cb;
  margin: 4px;
}

.arrange-words__places-words .place-word.ui-sortable-disabled,
.arrange-words__places-words .place-word.word-added {
  min-width: auto;
  border: 2px solid #3794cb;
}

.arrange-words__places-words .place-word.ui-sortable-disabled > .word {
  height: 100%;
}

.arrange-words__places-words .place-word .word__inner {
  display: flex;
  font-size: 19px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  cursor: pointer;
}

.arrange-words__words {
  display: flex;
  margin-bottom: 50px;
  justify-content: center;
}

.js-offer {
  display: none;
}

.arrange-words__words .word {
  display: inline-flex;
  flex-flow: column wrap;
  justify-content: center;
  min-width: 56px;
  border-radius: 8px;
  background-color: rgba(221, 230, 234, 0.6);
  height: 56px;
  margin: 4px;
  cursor: pointer;
}

.arrange-words__words .word.over {
  border: 1px dotted #000;
}

.arrange-words__words .word .word__inner {
  border: 2px solid #fff;
  border-radius: 8px;
  background-color: #fff;
  height: 56px;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 19px;
}

.arrange-words__words .word .word__inner:hover {
  border: 2px solid #6bd7ff;
  box-shadow: 0px 2px 8px rgba(79, 170, 255, 0.61);
}

/* Match images with audio-records */
.images_and_audio {
  background-color: transparent;
}

.image-selection,
.audio-selection {
  display: flex;
  justify-content: space-between;
}

.image-selection__inner-wrap {
  width: 220px;
  height: 220px;
  background-color: rgba(221, 230, 234, 0.6);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.image-selection__inner-wrap:hover {
  margin-top: -18px;
}

.image-selection__inner-wrap.empty:hover {
  margin-top: 0px;
}

.audio-selection__item {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  height: 220px;
  width: 220px;
}

.image-selection__inner-wrap img,
.audio-selection__item .place-word img {
  object-fit: cover;
  width: 220px;
  height: 220px;
  border-radius: 16px;
  padding: 4px;
  background-color: #fff;
  box-shadow: 0px 4px 12px rgba(3, 52, 101, 0.32);
}
body.page-template-public-profile {
  background-color: #fff;
}

pre {
  overflow: scroll;
}

.student-item.disabled::after {
  width: 100%;
  height: 73px;
  position: absolute;
  content: "";
}

.student-item.disabled {
  opacity: 0.4;
}

.audio-selection__item .title__audio {
  position: absolute;
  left: 14px;
  bottom: 14px;
  transform: translateY(0);
  width: 64px;
  height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_274_32187)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4881 10.8211C22.1389 10.1702 23.1942 10.1702 23.8451 10.8211L22.6666 11.9996C23.8451 10.8211 23.8463 10.8223 23.8463 10.8223L23.8475 10.8235L23.85 10.826L23.8553 10.8314L23.8675 10.8439L23.8975 10.8753C23.9199 10.8992 23.947 10.929 23.9782 10.9646C24.0405 11.0358 24.1191 11.1308 24.2083 11.2496C24.3863 11.4871 24.6077 11.8218 24.824 12.2543C25.2592 13.1247 25.6666 14.3783 25.6666 15.9996C25.6666 17.6209 25.2592 18.8745 24.824 19.745C24.6077 20.1775 24.3863 20.5122 24.2083 20.7496C24.1191 20.8685 24.0405 20.9634 23.9782 21.0346C23.947 21.0703 23.9199 21.1 23.8975 21.1239L23.8675 21.1554L23.8553 21.1678L23.85 21.1733L23.8475 21.1758L23.8463 21.177C23.8463 21.177 23.8451 21.1781 22.6666 19.9996L23.8451 21.1781C23.1942 21.829 22.1389 21.829 21.4881 21.1781C20.8444 20.5344 20.8373 19.4951 21.4669 18.8427L21.4696 18.8396C21.4802 18.8275 21.5057 18.7975 21.5416 18.7496C21.6135 18.6537 21.7255 18.4884 21.8425 18.2543C22.074 17.7914 22.3333 17.045 22.3333 15.9996C22.3333 14.9542 22.074 14.2078 21.8425 13.745C21.7255 13.5108 21.6135 13.3455 21.5416 13.2496C21.5057 13.2018 21.4802 13.1718 21.4696 13.1596L21.4668 13.1565C20.8373 12.5041 20.8444 11.4648 21.4881 10.8211Z' fill='white'/%3E%3Cpath d='M1.33325 16.2663V15.733C1.33325 13.4927 1.33325 12.3726 1.76923 11.517C2.15272 10.7643 2.76464 10.1524 3.51729 9.76893C4.37294 9.33296 5.49304 9.33296 7.73325 9.33296H8.17709C9.09747 9.33296 9.55767 9.33296 9.99365 9.23428C10.3803 9.14676 10.7518 9.00226 11.096 8.8055C11.484 8.58363 11.8233 8.27267 12.5017 7.65074L15.0917 5.2766C16.2223 4.2402 16.7876 3.722 17.2691 3.69881C17.6873 3.67867 18.0906 3.8561 18.3583 4.17796C18.6666 4.54856 18.6666 5.31544 18.6666 6.84919V25.1501C18.6666 26.6838 18.6666 27.4507 18.3583 27.8213C18.0906 28.1431 17.6873 28.3206 17.2691 28.3004C16.7876 28.2772 16.2223 27.759 15.0917 26.7226L12.5017 24.3485C11.8233 23.7266 11.484 23.4156 11.096 23.1937C10.7518 22.997 10.3803 22.8525 9.99365 22.765C9.55767 22.6663 9.09747 22.6663 8.17709 22.6663H7.73325C5.49304 22.6663 4.37294 22.6663 3.51729 22.2303C2.76464 21.8468 2.15272 21.2349 1.76923 20.4823C1.33325 19.6266 1.33325 18.5065 1.33325 16.2663Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_274_32187'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-color: #ff9207;
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.audio-selection__item .title__audio:hover {
  background-color: #f9db37;
}

.audio-selection__item .place-word {
  width: 100%;
  height: 100%;
  border: 2px dashed #1f63a6;
  border-radius: 16px;
}

.audio-selection__item .place-word.ui-sortable-disabled {
  /*border: none;*/
}

.audio-selection__item .place-word.false {
  -webkit-box-shadow: 0px 0px 0px 4px red;
  -moz-box-shadow: 0px 0px 0px 4px red;
  box-shadow: 0px 0px 0px 4px red;
}

.audio-selection__item .place-word.true {
  -webkit-box-shadow: 0px 0px 0px 4px green;
  -moz-box-shadow: 0px 0px 0px 4px green;
  box-shadow: 0px 0px 0px 4px green;
}

.images_and_audio__buttons {
  text-align: center;
}

/* Writing task */
.writing-task {
  padding: 88px 0 0 0;
  background-color: transparent;
}

.writing-task__inner {
  display: flex;
  flex-flow: row wrap;
}

.writing-task .video {
  position: relative;
}

.writing-task .video__text {
  display: none;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 70px;
  transform: translateY(-50%);
  background-color: #000;
  color: #f3f6f8;
  padding: 8px 10px;
  border-radius: 6px;
  transition: all 0.3s;
}

.writing-task .video__text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-right: 10px solid #000;
}

.writing-task__textarea {
  flex: 1;
  margin-bottom: 30px;
  border: 1px solid #f3f6f8;
  background-color: #fff;
  border-radius: 8px;
  padding: 32px 24px 24px 24px;
  margin-left: 16px;
}

.writing-task__textarea .title {
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #02161e;
  margin-bottom: 16px;
}

.writing-task__textarea textarea {
  border: none;
  width: 100%;
  resize: none;
}

.writing-task__textarea .bottom {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: end;
}

.writing-task__textarea .bottom .count {
  flex: 1;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #3794cb;
}

.writing-task__textarea .bottom .send svg path {
  fill: #fff;
}

.writing-task__textarea .bottom .send {
  font-family: "Open Sans", sans-serif;
  width: 220px;
  height: 48px;
  background: rgba(211, 216, 223, 0.2);
  border: none;
  color: #d3d8df;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s;
  display: none;
}

.writing-task__textarea .bottom .send svg {
  margin-left: 20px;
}

.writing-task__textarea .bottom .send:hover {
  background: #049a5b;
  color: #fff;
}

.writing-task__textarea .bottom .send:hover svg {
  fill: #fff;
}

.writing-task__textarea .bottom .done {
  display: none;
  width: 100%;
  background-color: #e9fff0;
  border-radius: 48px;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #049a5b;
  text-align: center;
}

.writing-task__textarea .bottom .done svg {
  margin-left: 11px;
}

.writing-task__questions {
  padding-top: 32px;
  display: flex;
  flex-flow: column wrap;
  flex: 1;
  margin-right: 16px;
}

.writing-task .question {
  position: relative;
  padding-left: 20px;
}

.writing-task .question > p {
  margin-top: 0;
}

.writing-task .question__num {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
}

.writing-task .video__popup-activator {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #ff9207;
  height: 56px;
  width: 56px;
  border-radius: 50%;
  transition: all 0.3s;
}

.writing-task .video__popup-activator:hover {
  background-color: #ed4818;
}

.writing-task .video__popup-activator:hover + .video__text {
  display: inline-block;
  opacity: 1;
}

.writing-task__video-popup {
  display: none;
  margin-top: 30px;
}

/* Match words with sentences */
.match-words-with-sentences {
  background-color: transparent;
}

.match-words-with-sentences__top,
.match-words-with-sentences__bottom {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 -8px;
}

.match-words-with-sentences__top .sentence {
  flex: 1;
  margin: 0 8px 20px 8px;
}

.match-words-with-sentences__top .sentence img {
  height: 220px;
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
  padding: 4px;
  background-color: #fff;
  box-shadow: 0px 4px 12px rgb(3 52 101 / 32%);
}

.match-words-with-sentences__top .sentence .text {
  font-size: 19px;
  line-height: 24px;
  color: #233537;
  margin-top: 20px;
  text-align: center;
}

.match-words-with-sentences__top .sentence .place-word {
  display: block;
  height: 40px;
  border: 2px dashed #3794cb;
  padding: 5px;
  border-radius: 8px;
  margin: 8px 0;
  text-align: center;
}

.match-words-with-sentences__top .sentence .place-word.ui-sortable-disabled {
  border: 2px solid #fff;
  background-color: #fff;
  cursor: pointer;
}

.match-words-with-sentences__top .sentence .place-word.correct-answer {
  border: 2px solid #049a5b;
  background: #f6fff7;
}

.match-words-with-sentences__top .sentence .place-word.wrong-answer {
  background: #fff5f5;
  border: 2px solid #d90004;
}

.match-words-with-sentences__bottom {
  min-height: 50px;
  align-items: center;
  margin: 0 -12px 56px;
}

.match-words-with-sentences__bottom .variant {
  flex: 1;
  height: 52px;
  min-width: 180px;
  /*background: rgba(221, 230, 234, 0.6);*/
  border-radius: 8px;
  margin: 0 12px;
}

.match-words-with-sentences__bottom .word {
  display: inline-block;
  background-color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #233537;
  padding: 12px;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0px 2px 8px rgba(3, 52, 101, 0.2);
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: border 0.3s;
}

.match-words-with-sentences__bottom .word:hover {
  border: 2px solid #6bd7ff;
}

.match-words-with-sentences__bottom .word.ui-sortable-helper {
  transform: translateY(50%);
}

.match-words-with-sentences__btns {
  text-align: center;
}

.match-words-with-sentences__btns button {
  display: none;
}

/* Grammar - Answer questions */
.grammar-answer-questions {
  max-width: 968px;
  padding: 0px 20px 50px 0px;
  background-color: transparent;
  margin-bottom: 20px;
}

.grammar-answer-questions .grammar-answer-questions-inner {
  display: flex;
  flex-flow: column wrap;
  margin-bottom: 22px;
}

.grammar-answer-questions .answer-questions__text {
  flex: 2;
}

.grammar-answer-questions__text {
  margin-bottom: 22px;
}

.grammar-answer-questions__text p {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
  color: #02161e;
  justify-content: center;
}

.grammar-answer-questions__text.js-vb-wrapper-top img {
  height: 304px;
  width: 544px;
  margin-bottom: 30px;
  object-fit: cover;
}

@media (max-width: 600px) {
  .grammar-answer-questions__text.js-vb-wrapper-top img {
    width: 95% !important;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
    margin-bottom: 15px;
  }
}

.grammar-answer-questions__text .place-word {
  display: inline-block;
  min-width: 180px;
  height: 54px;
  border: 2px dashed #3794cb;
  border-radius: 8px;
  margin: 0 12px;
}

.grammar-answer-questions__text .place-word.ui-sortable-disabled {
  box-shadow: 0px 2px 8px rgb(3 52 101 / 20%);
  border: 2px solid #fff;
}

.grammar-answer-questions__variants {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
@media (max-width: 600px) {
  .grammar-answer-questions__variants {
    margin: 40px 0 0;
  }
}

.profile-goals-timer {
  margin-top: 15px;
  max-width: 250px;
  padding: 0 20px;
  background: rgba(0, 0, 0, 1);
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  color: #fff;
  left: 0;
}

.profile-goals-timer span {
  color: #ccc;
}

.profile-header__goals .wrapper_goal {
  background: #ffffff;
  padding: 20px;
  box-shadow: 0px 100px 80px rgb(0 0 0 / 7%),
    0px 41.7776px 33.4221px rgb(0 0 0 / 5%),
    0px 22.3363px 17.869px rgb(0 0 0 / 4%),
    0px 12.5216px 10.0172px rgb(0 0 0 / 4%),
    0px 6.6501px 5.32008px rgb(0 0 0 / 3%),
    0px 2.76726px 2.21381px rgb(0 0 0 / 2%);
  border-radius: 16px;
}

.profile-goals-timer:before {
  content: "";
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.88);
  transform: rotate(45deg);
  left: -4px;
  position: absolute;
  z-index: -1;
}

.profile-goals-timer svg {
  width: 15px !important;
  height: 15px !important;
  margin-right: 10px;
}

.profile-goals-timer svg path {
  fill: #fff !important;
}

.grammar-answer-questions .variant {
  height: 52px;
  min-width: 180px;
  background: rgba(221, 230, 234, 0.6);
  border-radius: 8px;
  margin: 0 12px;
}

.grammar-answer-questions .variant__inner {
  display: inline-block;
  background-color: #fff;
  font-size: 19px;
  font-weight: 400;
  line-height: 24px;
  color: #233537;
  padding: 14px;
  border: 2px solid #fff;
  border-radius: 8px;
  width: 100%;
  text-align: center;
}

.grammar-answer-questions__variants .variant__inner:hover {
  border-color: rgb(107, 215, 255);
  box-shadow: rgb(79 170 255 / 61%) 0px 2px 8px;
  cursor: pointer;
}

.grammar-answer-questions .variant__inner.ui-sortable-helper {
  transform: translateY(50%);
}

.grammar-answer-questions__text
  .place-word.ui-sortable-disabled
  .variant__inner {
  width: 100%;
  height: 100%;
  text-align: center;
}

.grammar-answer-questions__btns {
  text-align: center;
  display: flex;
  justify-content: center;
}

.grammar-answer-questions__btns button {
  display: none;
}

.video-tutorial {
  position: relative;
}

/* Video Tutorial */
.video-tutorial-wrap {
  text-align: right;
  display: flex;
  justify-content: end;
  width: 100%;
  padding-bottom: 60px;
}

.wrap-clue .video-tutorial {
  margin-right: 16px;
}

.video-tutorial__popup-activator {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  /* background-color: #FF9207;
    box-shadow: 0px 4px 8px rgb(255 189 129 / 44%); */
  background-color: #3b7bce;
  box-shadow: 0px 4px 8px rgb(88 142 211 / 44%);
  border-radius: 40px;
  padding: 16px 36px;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #ffffff;
}

.video-tutorial__popup-activator:hover {
  background-color: #ed4818;
  box-shadow: 0px 4px 8px rgb(245 142 113 / 44%);
}

.video-tutorial__popup-activator svg {
  margin-right: 10px;
}

.video-tutorial__text {
  display: none;
  min-width: 210px;
  opacity: 0;
  position: absolute;
  top: 50%;
  right: calc(100% + 15px);
  transform: translateY(-50%);
  background-color: #000;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: #f3f6f8;
  text-align: center;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.3s;
}

.video-tutorial__text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left: 10px solid #000;
}

.video-tutorial:hover .video-tutorial__text {
  display: block;
  opacity: 1;
}

/* Fill in the correct word */
.fill-correct-word {
  background-color: transparent;
}

.fill-correct-word .task-words-linner-wrap {
  margin-bottom: 39px;
}

.fill-correct-word .fill-correct-word__img {
  height: 220px;
  min-width: 380px;
  margin: 0 auto 0;
}

.lesson-score {
  padding: 30px;
}

.fill-correct-word__sentence {
  font-weight: bold;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  color: #02161e;
  margin-bottom: 36px;
}

.fill-correct-word__sentence > p {
  display: inline-block;
  margin: 0;
}

.fill-correct-word .word-check {
  min-width: 240px;
  display: inline-block;
  background-color: #fff;
  border: 2px solid #6bd7ff;
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  color: #02161e;
  text-align: center;
  padding: 16px;
}

.fill-correct-word .word-check.wrong-answer {
  border-color: #d90004;
}

.fill-correct-word .word-check.correct-answer {
  border-color: #049a5b;
}

.fill-correct-word__btns {
  text-align: center;
}

.fill-correct-word__btns button {
  display: none;
  transition: all 0.3s;
}

.fill-correct-word__btns button:hover {
  box-shadow: 0px 2px 8px rgba(3, 52, 101, 0.3);
}

.fill-correct-word__btns .js-check-correct-word {
  display: inline-flex;
}

.task-pronunciation {
  display: none;
}

.task-pronunciation.active {
  display: block;
  padding: 0 16px !important;
}

.task-pronunciation .page_1_img {
  text-align: center;
}

.task-pronunciation .page_1_img img {
  display: inline-block;
  /* height: 250px; */
  height: 304px;
  width: 544px;
  margin-bottom: 30px;
  object-fit: cover;
  border-radius: 5px;
}
@media (max-width: 600px) {
  .task-pronunciation .page_1_img img {
    height: auto;
    width: 100%;
    margin-bottom: 5px;
  }
}
.task-pronunciation .bkwhite {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  margin-top: 50px;
}

.bkwhite-sentence {
  padding-right: 80px;
}

.bkwhite-button {
  position: absolute;
  right: 24px;
  bottom: 24px;
}

.bkwhite-button img.playicon {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.bkwhite-button .material-icons {
  background: #ff9207;
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  font-size: 0 !important;
  position: relative;
}

.bkwhite-button .material-icons:after {
  content: "";
  display: block;
  background: #fff;
  width: 12px;
  height: 12px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.task-words__card.active .bkwhite-button .material-icons {
  display: flex !important;
}

.task-pronunciation__record {
  text-align: center;
}

.task-pronunciation__record #buttons {
  display: inline-block;
}

.task-pronunciation__record .record,
.spw-record__box .record {
  display: inline-flex;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  background: #6bd7ff;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  position: relative;
}

.spw-record__box .record {
  height: 56px;
  width: 56px;
  float: right;
  margin: 0;
  position: absolute;
  right: 24px;
  bottom: 24px;
}

.task-pronunciation__record .record:hover,
.spw-record__box .record:hover {
  background: #3794cb;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.04);
}

.container-tasks-pronunciation.onboarding .task-pronunciation__record .record {
  z-index: 99;
}

.task-pronunciation__record .record span,
.spw-record__box .record span {
  width: 140px;
  position: absolute;
  right: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.88);
  box-shadow: 0px 4px 16px #1e1e1f;
  backdrop-filter: blur(4px);
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  margin-right: 12px;
  transition: all 0.3s;
  opacity: 0;
}

.task-pronunciation__record .record span:after,
.spw-record__box .record span:after {
  content: "";
  width: 0px;
  height: 0px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #1e1e1f;
  position: absolute;
  left: 100%;
}

.task-pronunciation__record .record:hover span,
.spw-record__box .record:hover span {
  opacity: 1;
}

.main-controls__recording,
.task-pronunciation__record .clip,
.spw-record .clip {
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 120, 171, 0.2);
  border-radius: 16px;
  height: 80.62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  margin: 32px 0;
}

.spw-record .clip,
.spw-record .main-controls__recording {
  margin: 0;
  height: 56px;
  border-radius: 12px;
}

.main-controls__recording span {
  text-align: right;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1f63a6;
  position: relative;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
}

.main-controls__recording span:before {
  content: "";
  width: 8px;
  height: 8px;
  background: #1f63a6;
  display: inline-block;
  border-radius: 50%;
  margin-right: 4px;
}

.main-controls__recording div {
  flex: 1;
  padding: 0 30px;
}

.main-controls__recording div canvas {
  width: 100% !important;
}

.main-controls__recording button {
  background: #ffffff;
  border: 1px solid #a0b7c3;
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0;
  cursor: pointer;
}

.main-controls__recording button:before,
.main-controls__recording button:after,
.task-pronunciation__record .clip .play.pause:before,
.task-pronunciation__record .clip .play.pause:after,
.spw-record .clip .play.pause:before,
.spw-record .clip .play.pause:after {
  content: "";
  background: #1f63a6;
  width: 2px;
  height: 10px;
  display: inline-block;
  margin: 0 2px;
}

.task-pronunciation__record .clip audio,
.spw-record .clip audio {
  display: none;
}

.task-pronunciation__record .clip p,
.spw-record .clip p {
  flex: 1;
  padding: 0 30px;
  font-size: 0;
}

.task-pronunciation__record .clip p:before,
.spw-record .clip p:before {
  content: "";
  width: 100%;
  background: url("../img/record.svg") no-repeat 50%;
  height: 40px;
  display: block;
}

.task-pronunciation__record .clip .play,
.spw-record .clip .play {
  background: #1f63a6 url("../img/play.svg") no-repeat 15px 12px;
  background-size: 13px;
  border: 1px solid #1f63a6;
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0;
  cursor: pointer;
}

.task-pronunciation__record .clip .play.pause,
.spw-record .clip .play.pause {
  position: relative;
  background: #1f63a6;
}

.task-pronunciation__record .clip .play.pause:before,
.task-pronunciation__record .clip .play.pause:after,
.spw-record .clip .play.pause:before,
.spw-record .clip .play.pause:after {
  background: #fff;
}

.task-pronunciation__record .clip .delete,
.spw-record .clip .delete {
  position: relative;
  border: none;
  background: transparent;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #233537;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0;
}

.task-pronunciation__record .clip .delete:before,
.spw-record .clip .delete:before {
  content: "";
  width: 20px;
  background: url("../img/retry.svg") no-repeat 50%;
  height: 20px;
  display: inline-block;
  margin-right: 10px;
}

.task-pronunciation__continue {
  text-align: center;
  display: flex;
  justify-content: center;
}

.task-pronunciation__continue button {
  width: 232px;
  height: 60px;
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  display: none;
}

.task-pronunciation__continue .btn-next {
  margin-top: 32px;
}

.task-pronunciation .task-words__card {
  height: auto;
  margin-bottom: 0;
}

.task-pronunciation__nav {
  max-width: 928px;
  padding: 0 16px !important;
  margin: 0 auto;
}

.spw .question-section__list {
  display: block;
  padding: 40px;
  height: auto;
  min-height: auto;
  cursor: default;
  background: #ffffff;
  border-radius: 16px;
}

.spw .task-words__word h4 {
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  color: #18386b;
  display: block;
  margin-bottom: 8px;
}

.spw .sentences-item {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #02161e;
  margin-bottom: 8px;
}

.question-section__nav {
  padding-top: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.question-section__nav button {
  margin: 0 16px;
}

.question-section__nav button.writeanswer {
  background: #1f63a6;
}

.question-section__nav button img {
  margin-right: 14px;
}

.question-section__nav span {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #1f63a6;
  margin-bottom: 32px;
  width: 100%;
  display: block;
  text-align: center;
}

.spw-text {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.spw-text__questions {
  width: 50%;
  padding-right: 50px;
}

.spw-text__questions .title {
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: #02161e;
  margin-bottom: 24px;
}

.spw-text__questions ol {
  padding: 0;
  overflow-y: scroll;
  margin: 0;
}

.tasks__wrapper-content {
  height: 100%;
  max-width: 940px;
  margin: 0 auto;
}

.text-learning-plan {
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  color: #233537;
}

.tasks-result-details {
  font-size: 16px;
  cursor: pointer;
  line-height: 24px;
  text-align: center;
  margin-top: 22px;
  color: #9da5b0;
}

.spw-text__questions ol li {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #02161e;
  margin-bottom: 8px;
}

.spw-text__answer {
  width: 50%;
  background: #ffffff;
  border: 1px solid #f3f6f8;
  border-radius: 8px;
  padding: 24px;
  position: relative;
}

.spw-text__answer .steppingtext {
  display: none;
  position: relative;
}

.spw-text__answer .steppingtext.active {
  display: block;
}

.spw-text__answer .steppingtext textarea {
  width: 100%;
  border: 1px solid #fff;
  min-height: 420px;
  resize: none;
}

.spw-text__answer .steppingtext span {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #3794cb;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 16px;
}

.spw-text__answer .steppingtext p {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #02161e;
}

.spw-text__answer .button {
  padding: 8px 25px 12px;
  font-family: "Open Sans";
  font-style: normal;
  background: #049a5b;
  border-radius: 8px;
  color: #fff;
  width: 220px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  position: absolute;
  right: 24px;
  bottom: 24px;
  cursor: pointer;
}

.spw-text__answer .button.done {
  width: calc(100% - 48px);
  color: #049a5b;
  background: #e9fff0;
  border-radius: 48px;
  left: 24px;
  cursor: default;
  z-index: 10;
}

.spw-text__nav,
.spw-record__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 32px 0;
}

.spw-record__container {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.spw-record__item {
  background: #ffffff;
  border-radius: 16px;
  width: calc(50% - 32px);
  margin: 8px;
  padding: 24px;
  display: block;
  position: relative;
  padding-bottom: 70px;
}

.spw-record__item .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #02161e;
  margin-bottom: 16px;
}

/* animations */
@keyframes swipe-left {
  from {
    transform: rotate(0) translate(0, 0);
    opacity: 0.7;
  }

  to {
    transform: rotate(25deg) translate(-200vw, 25vh);
    opacity: 0;
  }
}

@keyframes swipe-right {
  from {
    transform: rotate(0) translate(0, 0);
    opacity: 0.7;
  }

  to {
    transform: rotate(-25deg) translate(200vw, 25vh);
    opacity: 0;
  }
}

.trophy_filter {
  border: 1px solid grey;
  padding: 10px 9px 6px 12px;
  text-align: center;
}

/*border-radius: 10px;*
  }
  .group-item.filter{
    text-align: right;
    padding-right: 50px;
  }
  */

/*--==== http://talkindeeddev3.wpengine.com/words page fixing from here====--*/

.page-id-463 .wraper__content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

.page-id-463 .words .words-head__filter {
  column-gap: 5%;
}

.page-id-463 .words .words-head__filter .filter {
  text-align: center;
}

.page-id-463 .words .words-head__filter .search {
  width: 100%;
  max-width: 50%;
}

.page-id-463 .words .words-head__filter .filter {
  width: auto;
  text-align: center;
  border: 1px solid #dde6ea;
  border-radius: 6px;
  padding: 10px 0;
}

.page-id-463 .words .words-head__filter .filter a {
  border: none !important;
  margin-right: 0px !important;
  border-right: 1px solid #dde6ea !important;
}

.page-id-463 .words .words-head__filter .filter a:last-child {
  border-right: none !important;
  padding-right: 12px;
}

.page-id-463 .words .display_sentence {
  display: flex;
  background: #f3f6f8;
  padding: 12px 26px;
  visibility: hidden;
  height: 0;
}

.page-id-463 .words .display_sentence img {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}

.page-id-463 .words .display_sentence span {
  text-align: left;
}

.page-id-463 .translation:nth-last-child(2) {
  text-align: center;
}

.page-id-463 .words .display_sentence.active {
  visibility: visible;
  height: auto;
}

.page-id-463 .tr .example svg:first-child {
  margin-left: 35%;
}

/* .single.single-lesson .ty-learn_words .task-words__translation .img-wrap .img {
    height: 550px !important;
  } */

.single.single-lesson {
  overflow: auto !important;
}

.ty-learn_words .tasks__wrapper-content {
  position: relative;
}

.ty-learn_words .task-words__card {
  height: max-content;
}

.ty-learn_words .task-words-buttons {
  position: absolute;
  bottom: 0px;
}

.single.single-lesson .container-tasks {
  padding-bottom: 0;
  position: unset;
}

.tasks__center.ty-learn_words {
  margin-bottom: 0;
}

.tasks__bottom .task-words-buttons {
  width: 928px;
  padding: 0 0px;
  margin: 0 auto;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 0%);
}

.task-words__translation .title {
  padding-bottom: 15px;
}

/*--====responsive start from here====--*/

@media (max-width: 1920px) {
  .task-words-linner-wrap {
    /* width: 994px; */
    width: auto;
    flex: 1;
    margin-right: 15px;
    position: relative;
    left: -10px;
  }
}

@media (max-width: 1729px) {
  .task-words-linner-wrap {
    /* width: 999px; */
    left: 0px;
    width: auto;
    flex: 1;
    margin-right: 15px;
  }

  .tasks__top span.text {
    width: 21%;
  }

  .ritht-top-container {
    gap: 5px !important;
    justify-content: end !important;
    width: 17%;
  }
}
@media (max-width: 1200px) {
  .task-words-linner-wrap {
    flex: auto;
    margin-right: 0px;
  }
}

@media only screen and (min-width: 576px) {
  .words {
    padding: 24px 20px !important;
  }

  .page-id-463 .words .students-body__table-head {
    padding: 12px;
    column-gap: 10px;
  }

  .page-id-463 .words-head {
    flex-direction: column !important;
  }

  .page-id-463.words-head__filter {
    flex-direction: column !important;
  }

  .page-id-463 .words .words-head__filter .search {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 0px;
  }

  .page-id-463 .words .words-head__filter {
    column-gap: 0;
    width: 60%;
    flex-direction: column;
  }

  .words-head {
    flex-direction: column;
  }
}

@media only screen and (min-width: 650px) {
  .page-id-463 .wraper__content {
    width: 100%;
    max-width: 85%;
    margin: 0 auto;
    position: relative;
    margin-left: 15%;
  }

  .page-id-463 .words .words-head__filter {
    column-gap: 0;
    width: 80%;
    flex-direction: column;
  }

  .page-id-463 .words .words-head__filter .filter {
    width: 100%;
    margin-left: 0px;
  }

  .page-id-463 .words .words-head__filter .search {
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 768px) {
  .page-id-463 .wraper__content {
    width: 100%;
    max-width: 85%;
    margin: 0 auto;
    position: relative;
    margin-left: 15%;
  }

  .page-id-463 .words .words-head__filter {
    column-gap: 0;
    width: 80%;
    flex-direction: column;
  }

  .page-id-463 .words .words-head__filter .filter {
    width: 100%;
    margin-left: 0px;
    padding-bottom: 6px;
  }

  .page-id-463 .words .words-head__filter .search {
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 992px) {
  .page-id-463 .words {
    padding: 24px 40px !important;
  }

  .page-id-463 .words-head {
    flex-direction: row !important;
  }

  .page-id-463.words-head__filter {
    flex-direction: row !important;
  }

  .page-id-463 .words .words-head__filter .filter {
    width: 50%;
    margin-left: 0px;
    padding-bottom: 7px;
  }

  .page-id-463 .words .words-head__filter {
    column-gap: 0%;
    flex-direction: column;
    width: 60%;
    align-items: flex-start;
  }

  .page-id-463 .wraper__content {
    width: 100%;
    max-width: 88%;
    margin: 0 auto;
    position: relative;
    margin-left: 12%;
  }

  .page-id-463 .words .words-head__filter .search {
    width: 100%;
    max-width: 50%;
    margin: 0;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 1140px) {
  .page-id-463 .words {
    padding: 24px 40px !important;
  }

  .page-id-463 .words-head {
    flex-direction: row !important;
  }

  .page-id-463 .words-head__filter {
    flex-direction: row !important;
  }

  .page-id-463 .words .words-head__filter .filter {
    width: auto;
    margin-left: 25px;
    padding-bottom: 7px;
  }

  .page-id-463 .words .words-head__filter {
    column-gap: 5%;
    width: auro;
    flex-direction: row;
  }

  .page-id-463 .wraper__content {
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
    margin-left: 10%;
  }

  .page-id-463 .words .words-head__filter .search {
    width: 100%;
    max-width: 50%;
    margin: 0;
    margin-bottom: 0px;
  }
}

@media only screen and (max-width: 1200px) {
  .container-tasks__title .close {
    position: absolute;
    right: 25px;
    top: 13px;
  }
}

@media only screen and (min-width: 1200px) {
  .page-id-463 .wraper__content {
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
    margin-left: 10%;
  }

  .page-id-463 .words .words-head__filter .filter {
    width: auto;
    margin-left: 25px;
    padding-bottom: 6px;
  }
}

@media only screen and (min-width: 1366px) {
  .page-id-463 .wraper__content {
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    position: relative;
  }
}

@media only screen and (min-width: 1400px) {
  .page-id-463 .wraper__content {
    width: 100%;
    max-width: 85%;
    margin: 0 auto;
    position: relative;
  }
}

@media only screen and (min-width: 1440px) {
  .page-id-463 .wraper__content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
  }
}

.page-numbers.current {
  background: #1f63a6 !important;
  color: #fff;
}

.blue_logo {
  width: 36%;
  margin: 0 40px 6px 0;
}

.page-template-profile .page-elementor,
.page-template-learn .page-elementor {
  margin: 130px 0 0 23px;
}

.page-template-profile-full .page-container {
  margin: 100px 0 0 23px;
}

.blocked-calendar-popup__form .cancelled-popup-text {
  padding: 10px 0 10px 0 !important;
  text-align: left !important;
}

.moddal-close-timing {
  font-weight: 500;
  font-size: 14px;
  color: #707b8b;
  display: inline-flex;
  cursor: pointer;
}

.calendar-popup__form .moddal-close-timing {
  display: none;
}

.archive.author .page-container {
  margin: 119px 0 0 49px;
}

/* 08-05-23 */
.tasks__top .live-score {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 15px;
}

.tasks__top .live-score img {
  width: 40px;
  margin-top: 5px;
}

.tasks__top span.score {
  background: #fff;
  padding: 0px 15px;
  border: 1px solid #177dd463;
  border-radius: 20px;
  color: #177dd4;
  line-height: 32px;
  font-size: 16px;
  width: 125px;
  text-align: right;
  text-align: right;
}

.ritht-top-container {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 50px;
}

.heart-icons-set {
  max-width: 928px;
  margin: 0 auto;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  transition: all 0.4s;
  /* padding: 0px 15px 0px 14px; */
  margin: 20px auto;
}

span.gotit-counter {
  color: #ff9207;
}

.ty-learn_words .container-tasks__inner {
  min-height: auto;
}

/*First time tool tip */
.show_for_first_time_tooltip {
  position: absolute;
  bottom: 56px;
  display: flex;
  gap: 20%;
  width: 100%;
}

.show_for_first_time_tooltip div {
  width: 40%;
  text-align: center;
  background-color: #3b7bce;
  padding: 10px;
  border-radius: 13px;
  color: #fff;
}

.show_for_first_time_tooltip.fc_p .show_for_first_time_tooltip_left {
  width: 50%;
}

.show_for_first_time_tooltip.fc_gaq .show_for_first_time_tooltip_left {
  width: 100%;
}

.show_for_first_time_tooltip.fc_gaq .show_for_first_time_tooltip_left::after {
  left: 40%;
}

.show_for_first_time_tooltip div::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #3b7bce;
  font-size: 0;
  line-height: 0;
  bottom: -10px;
}

.show_for_first_time_tooltip_left::after {
  left: 20px;
}

.show_for_first_time_tooltip_right::after {
  right: 20px;
}

@keyframes tooltip_animation {
  from {
    bottom: 70px;
  }

  to {
    bottom: 60px;
  }
}

.show_for_first_time_tooltip {
  animation-name: tooltip_animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

/*First time tool tip ENDS */
@keyframes arrange_words_animation {
  from {
    bottom: 60px;
  }

  to {
    bottom: 50px;
  }
}

.arrange-words .show_for_first_time_tooltip {
  animation-name: arrange_words_animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  left: 50%;
  transform: translate(-50%, 0%);
}

.arrange-words .show_for_first_time_tooltip div::after {
  left: 50%;
  transform: translate(-50%, 0%);
}

.arrange-words .show_for_first_time_tooltip div {
  width: 100%;
}

.container-tasks-arrange_words.onboarding .arrange-words__text,
.container-tasks-pronunciation.onboarding .pronunciation__text {
  padding: 7px 8px;
  color: #fff;
}

.container-tasks-arrange_words.onboarding .arrange-words__text .hebrew {
  color: #ffffff;
}

/* Heart alignment */
.heart-text {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hand Animation */
@keyframes move_hand {
  from {
    right: 0;
    bottom: 0;
  }

  to {
    right: 45%;
    bottom: 50%;
  }
}

@keyframes blink_hand {
  from {
    opacity: 0;
    right: 45%;
    bottom: 50%;
  }

  to {
    opacity: 1;
    right: 45%;
    bottom: 50%;
  }
}

/* .show_for_first_time {
    animation-name: move_hand, blink_hand;
    animation-duration: 1s, 1s;
    animation-iteration-count: 1, infinite;
    animation-delay: 0s,1s;
} */

.container-tasks__inner.lesson-start img:hover {
  cursor: pointer;
}

/* 13/09/2023 */
.container-tasks-arrange_words.onboarding::after,
.container-tasks-pronunciation.onboarding::after,
.container-tasks-answer_questions.onboarding::after {
  content: "";
  background: #00000061;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.arrange-words__text,
.pronunciation__text {
  z-index: 9;
}

.show_for_first_time_tooltip div {
  color: #000;
}

.container-tasks.container-tasks-start .container-tasks__btn {
  /* z-index: 0; */
  position: relative;
  z-index: 2;
}

.select-correct-translation .translation-wrap {
  box-shadow: 3px 2px 8px rgba(24, 56, 107, 0.16);
}

.show_for_first_time_tooltip div {
  background-color: #ffffff;
  color: #000;
}

.show_for_first_time_tooltip div::after {
  border-top: 15px solid #fcfcfc;
}

.single.single-lesson .task-words-buttons {
  z-index: 11;
}

.container-tasks.container-tasks-learn_words.onboarding::after,
.container-tasks.container-tasks-grammar_answer_questions.onboarding::after,
.container-tasks.container-tasks-fill_in_the_correct_word.onboarding::after {
  content: "";
  background: #00000061;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

/* 22-09-2023 css */
.main-controls {
  position: relative;
}

.main-controls .show_for_first_time_tooltip_left {
  position: absolute;
  top: 24px;
}

.main-controls .show_for_first_time_tooltip div {
  box-shadow: 0 0 10px rgb(221 221 221 / 32%);
}

.main-controls .show_for_first_time_tooltip {
  position: relative;
  bottom: unset;
  display: flex;
  gap: 20%;
  justify-content: center;
  width: 100%;
  z-index: 99;
}

.main-controls .show_for_first_time_tooltip div::after {
  bottom: -20px;
  transform: translate(-50%, -50%);
  left: 50%;
}

.show_for_first_time_tooltip.fc_gaq {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  gap: 20%;
  width: 342px;
  transform: translate(-50%, 126px);
  z-index: 999;
}

.show_for_first_time_tooltip.fc_gaq div::after {
  left: 50% !important;
  transform: translate(-50%, 17px);
  top: -11px;
  transform: rotate(182deg);
}

@media (max-width: 767px) {
  .mobile-chat {
    margin-top: -10px;
  }
  .show_for_first_time_tooltip {
    width: 89%;
    z-index: 9;
  }

  .show_for_first_time_tooltip div {
    font-size: 16px;
    color: #18386b;
    text-align: center;
    font-weight: 600;
  }

  .show_for_first_time_tooltip.fc_gaq {
    width: 95%;
    margin: 0 auto;
  }

  .container-tasks.container-tasks-grammar_answer_questions.onboarding
    .grammar-answer-questions
    .wrapper_help {
    padding-bottom: 70px;
  }

  .container-tasks.container-tasks-grammar_answer_questions
    .grammar-answer-questions
    .wrapper_help {
    padding-bottom: 15px;
    margin-bottom: 10px !important;
  }

  .container-tasks.container-tasks-grammar_answer_questions
    .grammar-answer-questions {
    margin-bottom: 0 !important;
  }

  .video-tutorial__text {
    min-width: 30px;
    right: calc(100% + -29px);
    font-size: 12px;
  }

  .single.single-lesson .tasks__bottom .button-wrapper {
    height: auto;
  }

  .container-tasks.container-tasks-grammar_answer_questions
    .ty-grammar_answer_questions
    .grammar-answer-questions {
    overflow: hidden !important;
  }

  .grammar-answer-questions .wrap-clue .show_for_first_time_tooltip div,
  .container-tasks.container-tasks-answer_questions
    .show_for_first_time_tooltip
    div,
  .container-tasks-fill_in_the_correct_word.onboarding
    .show_for_first_time_tooltip
    div {
    width: 157px !important;
  }

  .single.single-lesson .container-tasks {
    overflow: hidden;
  }

  .container-tasks.container-tasks-grammar_answer_questions .tasks__center {
    padding-bottom: 0px !important;
  }

  .container-tasks.container-tasks-answer_questions .wrapper_help {
    justify-content: center !important;
  }

  .container-tasks.container-tasks-answer_questions.onboarding {
    position: relative;
  }

  .container-tasks-fill_in_the_correct_word .container-tasks__btn {
    z-index: 0;
  }

  .container-tasks-fill_in_the_correct_word.onboarding
    span.wrap-clue__icon.js-offer {
    z-index: 2 !important;
  }

  .container-tasks-fill_in_the_correct_word.onboarding
    .show_for_first_time_tooltip
    div {
    width: 126px !important;
  }

  .lesson-score__title {
    font-size: 31px;
    line-height: 36px;
    margin-top: 0px;
  }

  .lesson-score__descrition {
    margin: 12px 0;
    font-size: 17px;
    line-height: 24px;
  }

  .container-tasks__bg.lesson-score {
    padding: 20px 15px;
  }

  .ty-fill_in_the_correct_word .mejs-container.wp-video-shortcode.mejs-video {
    width: 100% !important;
    height: 200px !important;
  }

  .ty-fill_in_the_correct_word .wp-video-shortcode {
    height: 100% !important;
    width: 100% !important;
  }

  .pie-chart__inner {
    width: 63px;
    height: 61px;
  }

  .pie-chart {
    width: 70px;
    height: 70px;
  }

  .container-tasks__lesson-score {
    justify-content: space-between;
    gap: 20px;
  }

  .pie-chart__inner {
    width: 70px;
    height: 70px;
  }

  .lesson-score__btn {
    margin-top: 10px;
  }

  .pie-chart__inner {
    width: 70px;
    height: 70px;
  }

  .container-tasks__diagram {
    padding: 20px 10px 20px 10px;
    margin: 0;
    width: 45%;
    min-width: 42%;
  }

  .container-tasks__diagram .title {
    font-size: 18px;
    line-height: 27px;
  }

  .tasks-result-details {
    font-size: 14px;
    line-height: 22px;
  }

  .lesson-score__btn {
    margin-top: 16px;
  }

  /* video-profile-box starts 16-04 */
  .video-profile-box {
    display: flex;
  }
  .video-profile-box .profile-image {
    width: 65px;
    height: 65px;
    margin-bottom: 10px;
    position: relative;
  }
  .video-profile-box .profile-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 100%;
  }
  .profile-image-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
  }
  .profile-content__avatar .delete-avatar-profle {
    z-index: 9;
    top: 0 !important;
    height: 20px !important;
    width: 20px !important;
  }
  .video-profile-box .profile-name p {
    font-weight: 700;
    text-align: center;
    font-size: 12px;
    margin: 0;
  }

  .profile-content__avatar .delete-avatar-profle svg {
    height: 9px;
    width: 9px;
  }
  .profile-name {
    margin-bottom: 20px;
  }

  ul.profile-image-lists {
    /* display: flex;
        gap: 3px; */
    justify-content: space-between;
    padding-left: 0;
    flex-wrap: wrap;
  }
  ul.profile-image-lists > li {
    list-style-type: none;
    flex: 28%;
  }
  .profile-lists {
    display: flex;
    column-gap: 15px;
  }
  .image-details-lists h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
  }
  .image-lists {
    width: 150px;
    height: 90px;
    position: relative;
  }
  .image-lists img,
  .image-lists video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  .icon-placed {
    position: absolute;
    top: 6px;
    left: 6px;
  }

  .page-template-profile .page-content {
    margin-top: -32px !important;
  }

  #menu-footer-menu {
    display: none;
  }
  .list-view-authore {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    margin-top: 5px;
  }
  .authore-name h5 {
    color: #6d7378;
    font-size: 11px;
    margin: 0;
    font-weight: 400;
    line-height: 19px;
  }

  .semi-done {
    background: #ff9207;
    padding: 1px 6px 3px;
    color: #000;
    margin-right: 7px;
  }
  .done {
    background: #0aca2e;
    padding: 1px 6px 3px;
    color: #000;
    margin-right: 5px;
  }
  .authore-img {
    width: 27px;
    height: 27px;
    border-radius: 100%;
    overflow: hidden;
  }

  .authore-img img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  .profile-image-lists > li {
    margin-bottom: 2px;
  }
  .image-details-share {
    display: flex;
    padding-left: 0;
    align-items: center;
    column-gap: 5px;
  }
  .page-template-templateprofile-php {
    background-color: #fff;
  }
  .image-details-share a {
    font-size: 12px;
    display: flex;
    column-gap: 3px;
    align-items: center;
    color: #6d7378;
  }
  .image-details-share a svg {
    width: 14px;
    height: 14px;
  }
  .image-details-share li {
    list-style-type: none;
  }
  .profile-image-lists {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .popup-confirmation-wrapper p {
    font-size: 19px;
    padding-bottom: 30px;
  }
}

@media (max-width: 600px) {
  .tasks__center.ty-writing_task .writing-task__questions {
    padding: 0 20px !important;
  }

  .container-tasks__title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #f3f7fd;
    z-index: 99;
    padding: 20px 20px 5px 20px !important;
  }

  .tasks__top_hd {
    margin-top: 97px;
  }
}

@media (max-width: 1600px) {
  .container-tasks.container-tasks-grammar_answer_questions .tasks__center {
    padding-bottom: 106px;
  }
}

/* 26-09-2023 */
.grammar-answer-questions .wrapper_help {
  justify-content: center;
}

.grammar-answer-questions .wrap-clue .show_for_first_time_tooltip_left::after {
  left: 46%;
  transform: translate(-50%, 0px);
  top: -11px;
  transform: rotate(182deg);
}

.grammar-answer-questions .wrap-clue .show_for_first_time_tooltip div {
  width: 269px;
  left: 50%;
  transform: translate(-50%, 68px);
  position: absolute;
  z-index: 992;
}

.container-tasks.container-tasks-grammar_answer_questions
  .grammar-answer-questions {
  margin-bottom: 50px;
}

.tasks__center.ty-grammar_answer_questions .tasks__wrapper-content,
.container-tasks.container-tasks-grammar_answer_questions .tasks__center {
  overflow: hidden !important;
}

.container-tasks.container-tasks-answer_questions
  .show_for_first_time_tooltip
  div,
.container-tasks-fill_in_the_correct_word.onboarding
  .show_for_first_time_tooltip
  div {
  width: 283px;
  z-index: 999;
  position: relative;
}

.answer-questions .wrap-clue,
.container-tasks-fill_in_the_correct_word.onboarding
  .video-tutorial__popup-activator,
.container-tasks-fill_in_the_correct_word.onboarding
  span.wrap-clue__icon.js-offer {
  z-index: 991;
  position: relative;
}

.container-tasks.container-tasks-fill_in_the_correct_word .wrapper_help {
  justify-content: center;
  padding-bottom: 20px;
}

.video-popup-wrapper {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.82);
}

.video-popup-container {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 50%;
  width: 800px;
  padding: 32px 40px;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #ffffff;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  font-weight: bold;
  border: none;
  font-family: arial;
  font-size: 12px;
  font-style: oblique;
  line-height: 9px;
}

/* video slider css */

.main-video-wrapper,
.video-wrapper-each {
  position: relative;
}

.main-video-wrapper .center-play-new,
.video-wrapper-each .center-play-new {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-thumbnails {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  position: relative;
  background: #fff;
}

.video-wrapper-each .center-play-new svg {
  width: 26px;
}

.video-prev {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translate(-50%, -50%);
}

.video-prev svg,
.video-next svg {
  width: 20px;
  height: max-content;
}

.video-next {
  position: absolute;
  right: 0px;
  left: unset;
  top: 50%;
  transform: translate(-50%, -50%);
}

.video-popup-container .mytext .vid-container .video-thumbnails a.video-prev,
.video-popup-container .mytext .vid-container .video-thumbnails a.video-next {
  padding: unset !important;
  margin-top: unset !important;
  background-color: #fff !important;
}

.video-prev,
.video-next {
  background: #fff;
  box-shadow: 0 0 10px #00000024;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  padding: 2px;
}

.video-thumbnails video.video.active {
  border: 3px solid #ff9207;
  border-radius: 4px;
}

.video-popup-container .video-thumbnails {
  background: #e7e7e7;
}

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

@media (max-width: 767px) {
  .center-play-new svg {
    width: 40px;
  }

  .video-popup-wrapper video.video {
    height: 100% !important;
    width: 100% !important;
  }

  span.close-video-popup {
    position: absolute;
    top: 2px;
    right: 0;
  }

  .wraper__content .step-1-status .setup-level__head img {
    width: 186px;
  }

  .wraper__content .step-1-status .setup-level__head h3 {
    font-size: 34px;
  }

  .wraper__content .step-1-status .setup-level__head h5 {
    padding-bottom: 8px;
    font-size: 17px;
    line-height: normal;
  }

  .voiceover-signup-login-wrapper {
    height: calc(100vh - 24rem) !important;
  }
}

@media (max-width: 600px) {
  .task-words__word .sentence__inner {
    font-size: 19px;
  }

  .review-complete-progress {
    position: absolute;
    bottom: 10px;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, 0px);
  }

  .heart-icons-set {
    padding-bottom: 45px !important;
  }

  .heart-text p {
    font-size: 14px;
    font-weight: 600;
  }

  .heart-text {
    gap: 5px;
  }
  .arrange-words__places-words .place-word.ui-sortable-disabled,
  .arrange-words__places-words .place-word.word-added {
    height: 91px !important;
    overflow: hidden;
  }
}

.video-wrapper-each.playing-thumb {
  border: 2px solid #ff9207;
}

/* step one great job popup css */

.step-1-status .setup-level__head img {
  width: 257px;
  margin: 0 auto;
  padding: 5px 0;
}

.step-1-status .setup-level__head h3 {
  padding: 0;
  font-weight: bold;
  font-size: 64px;
  line-height: 72px;
  color: #02161e;
  margin-bottom: 16px;
}

.step-1-status .setup-level__head h5 {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  color: #233537;
  margin-bottom: 62px;
  padding: 0;
}

.step-1-status.container-tasks__btn {
  width: max-content;
}

.review-complete-progress img {
  width: 21px;
  height: 31px;
}

.review-complete-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55%;
}

.word-review-complete-block:first-child {
  border-left: 1px solid #a0b7c3;
}

.word-review-complete-block.active {
  border: 3px solid #fcdf1b;
}

.word-review-complete-block {
  border: 1px solid #a0b7c3;
  border-left: unset;
  width: 21px;
  height: 32px;
}

.word-review-complete-block.active img {
  height: 26px;
}

.step-1-status .setup-level__head .heart-icon img {
  width: 34px;
  margin: 0 8px !important;
}

.step-1-status .setup-level__head .heart-icon span {
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
}

.step-1-status span#repeat_count_text {
  padding-right: 8px;
}

.step-1-status .setup-level__head {
  padding-top: 80px;
  margin-bottom: 20vh;
}

.step-1-status button.container-tasks__btn.lets_repeat svg {
  margin: 0 4px 0 18px;
  transition: all 0.4s;
}

.step-1-status button.container-tasks__btn.lets_repeat:hover > svg {
  transform: translateX(10px);
}

span.sentence__audio.js-audio-play.word-learn-audio-icon {
  background-image: url(../../public/img//audio-learn-words.svg);
  margin-left: 0px;
  margin-right: 5px;
}

/* Pronunciation 17/11/2023 */
div#show-hide-pr-sentance {
  font-size: 14px;
  cursor: pointer;
  background-color: #afeeee;
  padding: 8px;
  border-radius: 20px;
  display: inline;
  border: 1px solid #0175ca;
}

div#show-hide-pr-sentance img {
  display: inline;
  width: 15px;
  vertical-align: middle;
}

div#show-hide-pr-sentance:hover {
  box-shadow: 0px 5px 5px 2px #cfcfcf;
}

/* video page css */
.speaking-video-searchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.speaking-video-level ul li:first-child {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 8px;
  border-left: 1px solid #ddd;
}

.speaking-video-level ul li.active {
  background: #c8e7fe;
}

.speaking-video-level ul li:last-child {
  /* border-radius: 0px 5px 5px 0px; */
}

.speaking-video-level ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.speaking-video-level ul li {
  padding: 0px;
  border: 1px solid #ddd;
  border-left: 0;
}

.speaking-video-level a {
  font-size: 14px;
  padding: 0 4px;
}

.speaking-video-level li a {
  display: block;
  font-family: "popins";
  font-weight: 400;
}

.speaking-video-level ul li a img {
  mix-blend-mode: darken;
  height: 34px;
}

.speaking-video-level li.active a {
  color: #2336b2 !important;
}

.speaking-video-level p {
  margin: 0;
  padding: 0;
  padding-right: 10px;
}

.speaking-video-level {
  display: flex;
  align-items: center;
}

.speaking-video-sort-srch {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.speaking-video-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.speaking-video-srch input {
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  color: #323232;
}

.speaking-video-srch {
  background: #fff;
  border: 1px solid #cbcbcb;
  border-radius: 5px;
  display: flex;
  align-items: stretch;
}

.speaking-video-srch i {
  background: #dde6eb;
  padding: 10px 10px;
  height: 100%;
  display: block;
  border-radius: 0 5px 5px 0px;
  cursor: pointer;
}

.speaking-video-sort select {
  border: 1px solid #cbcbcb;
  padding: 8px 8px;
  border-radius: 5px;
  font-size: 14px;
  color: #323232;
}

ul.staff-pick-list {
  display: flex;
  align-items: start;
  justify-content: start;
  flex-wrap: wrap;
  gap: 30px 27px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 20px;
}

ul.staff-pick-list li {
  width: 23.5%;
  cursor: pointer;
}

ul.staff-pick-list li p {
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  padding: 9px 0px 5px 0px;
  margin: 0;
  font-family: "Poppins";
}

.postedby p {
  font-weight: 600 !important;
  padding-top: 0 !important;
  font-size: 12px !important;
  font-family: "Eina01" !important;
}

.postedby p span {
  width: 13px;
  height: 13px;
  background: #efcf21;
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
  border: 1px solid #9b9999;
}

.postedby p {
  display: flex;
  align-items: center;
}

.speaking-video-sort p,
.speaking-video-level p {
  font-size: 16px;
  color: #979292;
  font-family: "Poppins";
}

section.staff-pick-sec h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding-top: 40px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  font-family: "Poppins";
}

.staff-pick-sec.editor-pic ol {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  grid-gap: 25px;
  counter-reset: items;
}

.staff-pick-sec.editor-pic li::before {
  order: -1;
  margin-bottom: 2rem;
  color: #e1e1e1;
  font-family: "Mark Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 4.8rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  content: "0" counter(items) ". ";
  display: block;
}

.staff-pick-sec.editor-pic ol.staff-pick-list p {
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  padding: 9px 0px 5px 0px;
  margin: 0;
  font-family: "Poppins";
}

ol.staff-pick-list li {
  position: relative;
  display: block;
  counter-increment: items;
}
.video-categories-container {
  position: sticky;
  z-index: 4;
  top: 62px;
  background-color: #fff;
}
ul.video-categories {
  display: flex;
  overflow: auto;
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 100vw;
  list-style: none;
  font-size: 1.5rem;
  line-height: 2rem;
  padding-bottom: 22px;
  padding-top: 22px;
  padding-left: 0;
  /* Hide scrollbar for Chrome, Safari, and Edge */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}
ul.video-categories::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}
.fixdiv-mob .video-categories::-webkit-scrollbar {
  height: 0px;
}

ul.video-categories .video-category.video-category-active a {
  background: #e5e7f8;
  border-radius: 5px;
  color: #2336b2 !important;
}

ul.video-categories .video-category a {
  color: #323235;
  font-size: 16px;
  display: block;
  padding: 0px 8px;
  font-family: "Eina01";
  font-weight: 600;
}
.fixdiv-mob .video-category a {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

ul.video-categories .video-category a:hover {
  background: #e5e7f8;
  border-radius: 5px;
}

li.video-category {
  padding: 0px 8px;
}

.page-id-24946 .fixdiv-mob li.video-category {
  padding: 0 12px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

li.video-category:first-child {
  padding-left: 0 !important;
}

.tax-speaking_videos_categories .page-content {
  min-height: 80vh;
}
section.staff-pick-sec.speaking-more-videos h1 {
  font-size: 64px;
  font-weight: 600;
  line-height: 79px;
  text-align: center;
  font-family: "Poppins";
}
.page-id-24946,
.tax-speaking_videos_categories {
  background: none;
  background-color: #fff;
}
@media (max-width: 992px) {
  ul.staff-pick-list li {
    width: 48%;
    position: relative;
  }
  section.staff-pick-sec.speaking-more-videos h1 {
    font-size: 35px;
    line-height: 35px;
    margin-bottom: 10px;
  }
  ul.staff-pick-list {
    gap: 25px;
  }

  ul.video-categories {
    justify-content: left;
  }

  ul.video-categories .video-category a {
    white-space: nowrap;
  }

  ul.video-categories {
    margin-bottom: 18px;
    padding-bottom: 10px;
  }
}

@media (max-width: 600px) {
  ul.staff-pick-list li {
    width: 100%;
  }

  .speaking-video-sort-srch {
    flex-direction: column-reverse;
    gap: 7px;
    align-items: flex-start;
    width: 100%;
  }

  .speaking-video-srch input {
    width: 100%;
  }

  .speaking-video-srch {
    width: 100%;
  }

  .speaking-video-searchbar {
    flex-direction: column-reverse;
    gap: 7px;
    align-items: flex-start;
  }
  .tax-speaking_videos_categories .page-content {
    margin-top: 345px !important;
  }
}
li.full-width {
  width: 100% !important;
  text-align: center;
}
.page-id-24946 .profile-header,
.tax-speaking_videos_categories .profile-header {
  box-shadow: 0px 4px 10px 8px #003a831c;
}

.notification-header .page-content,
.notification-header.tax-speaking_videos_categories .page-content {
  /* margin-top: 130px; */
  margin-top: 50px;
}
.tax-speaking_videos_categories .page-content {
  margin-top: 223px;
}

/* single video page css starts */

.speaking-single-video-mian {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-video-section {
  margin-top: 60px;
}
.speaking-single-video {
  width: 58%;
}
.speaking-single-video-text {
  width: 38%;
}
.profile-single-video-main {
  display: flex;
  align-items: start;
  padding-top: 10px;
  justify-content: space-around;
  flex-wrap: wrap;
  border-right: 1px solid #ddd;
  padding-bottom: 100px;
  padding-right: 10px;
}
.publish-video-preview-section .profile-single-video-main {
  justify-content: flex-start;
}
.speaking-video-details .speaking-video-details-list-wrapper {
  padding: 0px;
}
.item-video-section .profile-single-video-main {
  margin-top: 56%;
  padding-top: 0px;
}
span.myversion-btn-active {
  background-image: linear-gradient(
    246deg,
    rgba(3, 61, 133, 0.996078431372549) 0%,
    rgba(3, 38, 83, 0.9999999999999999) 100%
  );
  color: #ecf2f8 !important;
  border-radius: 0px 27px 26px 0px;
}

.profile-single-video-myversion-btn {
  border-radius: 37px;
  background-color: #f0f5fd;
  border: 3px solid #033d84;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-single-video-myversion-btn span {
  font-size: 11px;
  line-height: 24px;
  color: #022154;
  font-weight: 400;
  font-family: "Eina01";
  text-align: center;
  padding: 6px 6px;
  display: block;
  cursor: pointer;
  margin-right: -1px;
}
.profile-video-share a img {
  width: 16px;
}
.profile-video-share a {
  border-radius: 37px;
  background-color: #f0f5fd;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  color: #000102;
  font-weight: bold;
  font-family: "Eina01";
  font-size: 14px;
}
.profile-video-share {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
}
.profile-single-video-area h5 {
  font-size: 17px;
  line-height: normal;
  color: #1f2d39;
  font-weight: 400;
  font-family: "Eina01";
  margin: 0;
}
.profile-single-video-share {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  width: 50%;
  justify-content: end;
}
.profile-single-video-area p {
  font-size: 14px;
  margin: 0;
  line-height: normal;
  font-family: "Eina01";
  font-weight: 600;
}
.profile-single-video {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 15px;
  margin-top: 10px;
}
.speaking-video-details
  .speaking-video-details-user-card
  .profile-single-video {
  margin-top: 0;
}
.profile-single-video figure {
  margin: 0;
  width: 45px;
  height: 45px;
}
.profile-single-video figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-single-video p span {
  border-radius: 10px;
  background-color: #fae1b8;
  color: #482d01;
  padding: 5px 10px 9px 10px;
  line-height: normal;
  margin-left: 10px;
  font-family: "Eina01";
  font-weight: 600;
}
.speaking-video-details .speaking-video-details-user-card .authore-title {
  padding: 0;
}
.profile-single-video p {
  font-family: "Eina01";
  font-weight: 400;
}
.speaking-single-video-hide-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
button.video-hide-text-btn img {
  width: 20px;
}
button.video-hide-text-btn {
  border-radius: 10px;
  background-color: #f0f5fd;
  border: 2px solid #033d85;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  cursor: pointer;
  color: #033c83;
  font-weight: 400;
  font-family: "Eina01";
  font-size: 14px;
}
button.video-hide-text-btn.inactive {
  color: #025702;
  border: 2px solid #025702;
  background-color: #f2fdf2;
}

ul.speaking-single-video-chat {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* margin-top: 25px; */
  height: 529px;
  overflow-y: auto;
  overflow-x: hidden;
}
.video-text-message p,
.video-chat-progressbar {
  filter: drop-shadow(-0.954px 0.521px 3px rgba(5, 80, 174, 0.17));
  background-color: #f1f3f9;
  border: 2px solid rgb(217 217 217 / 60%);
  padding: 10px;
  font-size: 12px;
  color: #000;
  /* width: 519px; */
  margin: 0;
  font-family: "Eina01";
  font-weight: 600;
  padding-right: 25px;
}
.video-text-message p {
  width: 100%;
}
.show-recording-screen:hover {
  cursor: pointer;
}
label.progress-bar__value.recording-started {
  background-color: #f00;
  display: block;
  border: 1px solid #f00;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  animation: blinker 1s linear infinite;
}
label.progress-bar__value.recording-stopped {
  background: none;
  border: none;
  display: block;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.5;
  }
}
.video-text-sent.active p,
.video-text-replies.active p {
  background-color: #ffdc00;
}
li.video-text-sent.active .video-text-message::after {
  border-right: 13px solid #ffdc00;
}
li.video-text-replies.active .video-text-message::after {
  border-left: 13px solid #ffdc00;
}
ul.speaking-single-video-chat li {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  justify-content: center;
}
li.video-text-replies {
  flex-direction: row-reverse;
}
.single-speaking_videos {
  background: #fff;
}
.video-text-message {
  display: flex;
  width: 60%;
  justify-content: flex-start;
  position: relative;
  margin: 10px;
}
li.video-text-sent .video-text-message::after {
  border-top: 11px solid transparent;
  border-right: 13px solid #f1f3f9;
  border-bottom: 11px solid transparent;
  margin-left: 6px;
  width: 0;
  height: 0;
  content: "";
  left: 34px;
  top: 50%;
  position: absolute;
  transform: translate(-50px, -50%);
  filter: drop-shadow(-2.954px 0.521px 2px rgba(5, 80, 174, 0.17));
}
.video-text-replies .video-text-message::after {
  border-top: 11px solid transparent;
  border-left: 13px solid #f2fdf2;
  border-bottom: 11px solid transparent;
  margin-left: 6px;
  width: 0;
  height: 0;
  content: "";
  right: -61px;
  top: 50%;
  position: absolute;
  transform: translate(-50px, -50%);
  filter: drop-shadow(4.046px 0.521px 2px rgba(5, 80, 174, 0.17));
  display: none;
}
li.video-text-replies p {
  background: #f2fdf2;
}
.video-text-profile-img {
  display: flex;
  align-items: center;
  gap: 10px;
}
li.video-text-sent .video-text-profile-img {
  position: absolute;
  left: 0;
}
.video-text-replies .video-text-profile-img {
  right: 0 !important;
  position: absolute;
  flex-direction: row-reverse;
}
img.video-profile-img {
  width: 42px;
  height: 42px;
  cursor: pointer;
  border-radius: 50%;
}
img.video-play-outine-img {
  width: 22px;
  cursor: pointer;
}
.video-text-message img {
  right: 11px;
  top: 7px;
  position: absolute;
  z-index: 5;
  width: 11px;
}
.speaking-single-video-hide-text.speaking-single-video-create-btn
  .video-hide-text-btn {
  border-radius: 10px;
  background-color: #fdecdb;
  border: 1.5px solid #f78203;
  color: #fd8400;
}
.speaking-single-video-hide-text.speaking-single-video-create-btn
  .video-hide-text-btn.inactive {
  border-radius: 10px;
  background-color: #f0f5fd;
  border: 1.5px solid #04265d;
  color: #022154;
}
.speaking-single-video-hide-text.speaking-single-video-create-btn {
  padding-top: 30px;
}
.staff-pick-sec.creator-comunity h4 {
  font-size: 20px;
  border-top: 1px solid #ddd;
  border-bottom: unset;
  padding-top: 0;
  line-height: 52px;
}

.single-speaking_videos .container {
  max-width: 1500px;
  margin-right: 55px;
}
.staff-pick-sec.speaking-more-videos {
  margin-top: 256px;
}
.notification-header .staff-pick-sec.speaking-more-videos {
  margin-top: 158px;
}

ul.speaking-single-video-chat::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

ul.speaking-single-video-chat::-webkit-scrollbar {
  width: 4px;
  background-color: #f5f5f5;
}

ul.speaking-single-video-chat::-webkit-scrollbar-thumb {
  background-color: #000000;
}

.video-chat-progressbar progress {
  height: 17px;
  border-radius: 50px;
  transition: width 300ms ease;
  border: 1px solid #033d84;
  background-color: transparent;
  width: 189px;
}
.video-chat-progressbar progress[value]::-webkit-progress-bar {
  height: 17px;
  border-radius: 50px;
  transition: width 300ms ease;
  border: 1px solid #033d84;
  background-color: transparent;
}
.video-chat-progressbar progress[value]::-webkit-progress-value {
  width: 0;
  background-color: #033d84;
  transition: width 300ms ease;
  border-radius: 50px 0px 0px 50px;
  z-index: 0;
}

.video-chat-progressbar progress.inactive {
  border: 1px solid #ff0000 !important;
}
.video-chat-progressbar progress.inactive[value]::-webkit-progress-bar {
  border: 1px solid #ff0000 !important;
}
.video-chat-progressbar progress.inactive[value]::-webkit-progress-value {
  background-color: #ff0000 !important;
}
.video-chat-progressbar img {
  position: unset;
}
.video-chat-progressbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.progress-bar-btn img {
  width: 23px;
}
.progress-bar-btn {
  display: flex;
  gap: 10px;
}
.progress-bar__wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
label.progress-bar__value {
  color: #033d84;
  font-size: 18px;
  line-height: normal;
  font-weight: 500;
}

.speaking-single-video video.disable,
.video-processing-loader,
.video-save-processing-loader {
  display: none;
}

span.edited-video.myversion-btn-active {
  border-radius: 22px 0px 0px 22px !important;
  background-image: linear-gradient(
    49deg,
    rgba(3, 61, 133, 0.996078431372549) 0%,
    rgba(3, 38, 83, 0.9999999999999999) 100%
  ) !important;
}
span.shared-video.myversion-btn-active {
  border-radius: 0px !important;
  background-image: linear-gradient(
    49deg,
    rgba(3, 61, 133, 0.996078431372549) 0%,
    rgba(3, 38, 83, 0.9999999999999999) 100%
  ) !important;
}
#sv_create_video:disabled,
.invite-to-edit-btn:disabled,
.video-text-message.disabled,
.video-text-message.disabled p,
.video-text-message.disabled div {
  cursor: no-drop;
}

.sv_video-popup-wrapper {
  position: fixed !important;
  z-index: 99 !important;
}
#popupBlock.sv_video {
  width: auto !important;
}
#popupBlock.sv_video a.button.no {
  position: absolute;
  right: 10px;
  top: 10px;
  font-style: normal;
  cursor: pointer;
}

.postedby-small figure {
  margin: 0;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.postedby-small figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.postedby-small {
  display: flex;
}
.list-screen-filter-video-card {
  width: auto;
  /* margin: 0 8px; */
  background: #fff;
  border: 1px solid #d3d5d7;
  border-top-style: none;
}
.profile-video-share .cn_sv_like.active svg path {
  fill: #ffffff;
}
.profile-video-share .cn_sv_like svg {
  width: 20px;
  height: 16px;
}
.profile-video-share .cn_sv_like.active {
  background-color: #04316b;
  color: #fff;
}
.invite-to-edit-links {
  position: relative;
  display: none;
}
.invite-to-edit-links div.addtoany_shortcode {
  position: absolute;
  margin-top: 40px;
  right: 0;
}
.invite-to-edit-links.active {
  display: block;
}

.tiny-popup {
  display: none;
  position: absolute;
  height: auto;
  width: 100%;
  z-index: 9999999;
  top: -50px;
  text-align: center;
  font-size: 13px;
  background: rgb(255 255 255 / 95%);
  border: 1px solid #033d84;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 5px 5px #00000047;
}
.tiny-popup::after {
  content: "";
  position: absolute;
  left: 42%;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #ffffff;
}
.tiny-popup::before {
  content: "";
  position: absolute;
  left: 42%;
  top: calc(100% + 1px);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #033d84;
}
.video-text-message:hover .tiny-popup.hover-add {
  display: block !important;
}

.speaking-single-video-chat li:first-child .video-text-message .tiny-popup {
  top: 50px;
}
.speaking-single-video-chat
  li:first-child
  .video-text-message
  .tiny-popup::before {
  transform: rotate(180deg);
  top: calc(-31% + 0px);
}
.speaking-single-video-chat
  li:first-child
  .video-text-message
  .tiny-popup::after {
  transform: rotate(180deg);
  top: -10px;
}

.tiny-popup .close-icon {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 5px;
  cursor: pointer;
}

/* Ria 04/03/2024 */
.mobile-only {
  display: none;
}

.speaking-video-details .speaking-video-details-list .video-title {
  font-size: 14px;
  line-height: 18px;
  border-bottom: none;
}
.speaking-video-details .speaking-video-details-list .image-details-share li {
  padding: 0 !important;
}
.speaking-video-details .speaking-video-details-list .list-item li {
  padding: 0 !important;
  margin-bottom: 2px !important;
}

@media (max-width: 932px) {
  .video-text-sent .counter-container {
    top: auto !important;
  }
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }

  .page-id-24946 .container,
  .single-speaking_videos .container {
    padding: 0;
  }
  .page-id-24946 .mobile-only {
    display: block;
  }
  .item-filter-video-wrapper {
    margin-top: 190px;
  }
  .postid-27083 .item-filter-video-wrapper,
  .postid-26806 .item-filter-video-wrapper,
  .postid-26798 .item-filter-video-wrapper,
  .postid-26798 .item-filter-video-wrapper,
  .postid-25655 .item-filter-video-wrapper {
    margin-top: 160px;
  }
  .page-id-24946 li.video-category,
  .single-speaking_videos li.video-category {
    background: #f2f6fb;
    margin-right: 12px;
    border-radius: 8px;
    border: 1.5px solid transparent;
  }
  .page-id-24946 ul.video-categories .video-category.video-category-active a,
  .single-speaking_videos
    ul.video-categories
    .video-category.video-category-active
    a {
    color: #000 !important;
  }
  .video-category-active {
    background: linear-gradient(#f2f6fb, #f2f6fb) padding-box,
      linear-gradient(to right, #78b8fc, #c876fe) border-box !important;
    border: 1.5px solid transparent;
  }
  .page-id-24946 ul.video-categories .video-category a,
  .single-speaking_videos ul.video-categories .video-category a {
    color: #000;
    padding: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
  }
  .page-id-24946 ul.video-categories .video-category.video-category-active a,
  .single-speaking_videos
    ul.video-categories
    .video-category.video-category-active
    a {
    background-color: transparent;
  }
  .page-id-24946 li.video-category:first-child,
  .single-speaking_videos li.video-category:first-child {
    padding-left: 12px !important;
  }
  .page-id-24946 .video-content,
  .single-speaking_videos .video-content {
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
    padding: 12px 6px 14px 6px;
  }
  .page-id-24946 .mobile-only .video-titels,
  .single-speaking_videos .mobile-only .video-titels {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 17px;
    color: #000;
    margin: 0 !important;
    font-family: "Poppins" !important;
    padding: 0;
    margin-bottom: 3px !important;
  }
  .page-id-24946 .mobile-only .video-contents {
    margin-top: 6px;
    color: #393f45;
    padding: 0;
    font-size: 12px !important;
    line-height: 16px;
  }

  .single-speaking_videos .mobile-only .video-contents {
    padding: 0;
    color: #393f45;
    font-size: 14px !important;
    line-height: 17px;
  }
  .single-speaking_videos .profile-single-video p span {
    padding: 0px;
  }

  .single-speaking_videos .postedby .video-contents {
    margin: 8px 0;
  }

  .page-id-24946 .mobile-only .video-contents span,
  .single-speaking_videos .mobile-only .video-contents span {
    width: auto;
    height: auto;
    background: transparent;
    display: inline-block;
    border-radius: 0;
    margin-right: 0;
    border: none;
    position: relative;
  }
  .page-id-24946 .mobile-only .video-contents .authore-title,
  .single-speaking_videos .mobile-only .video-contents .authore-title {
    display: flex;
    align-items: center;
    column-gap: 11px;
  }
  .page-id-24946 .mobile-only .video-contents > span,
  .single-speaking_videos .mobile-only .video-contents > span {
    margin-right: 11px;
  }
  /* .page-id-24946
    .mobile-only .video-contents span:before{
        position: absolute;
        top: 0;
        left: 0;
        content: '';
       background:url(../img/badge.png);
    } */

  .page-id-24946 .video-categories-container,
  .single-speaking_videos .video-categories-container {
    padding-left: 10px;
  }

  .page-id-24946 ul.video-categories {
    padding-bottom: 6px;
    margin-bottom: 4px;
    padding-top: 12px;
  }
  .page-id-24946 ul.staff-pick-list {
    margin-top: 120px;
    gap: 18px;
  }
  .list-screen-filter-video-list {
    background: #eff0f1;
  }
  .close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: 0;
    font-size: 1rem;
    font-weight: 700;
    display: block;
    cursor: pointer;
    color: black;
    padding: 1rem 1.25rem;
    background: white;
    border-radius: 50%;
    outline: none;
  }
  .close_outr .close {
    padding: 0 !important;
    background: none !important;
  }
  .close-colab-popup {
    font-size: 20px;
    font-weight: 900;
    top: 14px;
    right: 22px;
    position: absolute;
    cursor: pointer;
  }
  .popup-container-wrapper p {
    font-size: 20px;
    text-align: center;
    margin-top: 40px;
  }
  .close:hover {
    background: #d62839;
  }
  .fixdiv-mob .search-box > div,
  .fixdiv-mob .search-box > div img {
    height: 24px;
    width: auto;
    object-fit: cover;
  }
  .fixdiv-mob .search-box .mobile-nav-user img {
    min-width: 24px;
    min-height: 24px;
  }
  .search-box.search-elem {
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(50, 33, 58, 0.9);
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  .search-box.search-elem .inner {
    width: 70%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .search-box.search-elem label {
    color: white;
    font-weight: 300;
    font-family: "Roboto", "Helvetica Neue", sans-serif;
  }
  .search-box.search-elem button.submit {
    outline: none;
    position: absolute;
    top: 0;
    right: 15px;
    height: 70px;
    padding: 10px 2rem;
    background: #00a896;
    font-family: "Roboto", "Helvetica Neue", sans-serif;
    font-size: 1rem;
    color: white;
  }
  .search-box.search-elem button.submit[disabled] {
    background: #ccc;
    color: #32213a;
  }
  .search-box.search-elem input[type="text"] {
    padding: 20px;
    height: 72px;
    font-size: 32px;
    font-family: "Roboto", "Helvetica Neue", sans-serif;
    font-weight: 300;
    border: none;
    border-bottom: solid 2px #999;
    transition: border 0.3s;
    border-radius: 0;
  }
  .search-box.search-elem input[type="text"]:focus {
    border-bottom: solid 2px #00a896;
    box-shadow: none;
  }
  .search-box.search-elem label.placeholder {
    position: absolute;
    top: 10px;
    left: 2rem;
    font-size: 32px;
    font-weight: 300;
    font-family: "Roboto", "Helvetica Neue", sans-serif;
    color: #999;
    transition: all 0.3s;
  }
  .search-box.search-elem label.placeholder.move-up {
    top: -25px;
    color: white;
    font-size: 1rem;
  }

  .search-box.search-elem.search-open {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  .search-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 18px;
    /* <!-- Joy-SS --> flex: 2; */
  }
  /* .fixdiv-mob .search-box{
        margin-left: 53px;
      } */
  .icon-chat-bot {
    width: auto;
    height: 22px;
    object-fit: cover;
    display: block;
  }
  .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    position: relative;
  }
  .speaking-video-details .mobile-nav {
    padding-bottom: 0;
  }

  .page-id-24946 .fixdiv-mob .mobile-nav {
    justify-content: space-between;
  }
  .fixdiv-mob .plus-gradient-btn {
    background: transparent;
    height: 22px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .fixdiv-mob .plus-gradient-btn img {
    height: 22px;
    width: auto;
    object-fit: cover;
  }
  .logo-mobile {
    display: flex;
    align-items: flex-end;
    gap: 12px;
  }
  .icon-txt-home {
    width: auto;
    height: 20px;
    object-fit: cover;
  }
  .logo-icon {
    width: 19px;
    height: 20px;
    overflow: hidden;
    line-height: 50px;
  }
  .logo-icon img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
  .logo-icon {
    width: 19px;
    height: 20px;
    background: url("../img/icon-home-fill.svg") no-repeat center;
    background-size: cover;
    object-fit: cover;
  }
  .logo-icon-fill {
    width: 22px;
    height: 22px;
    background: url("../img/icon-home-fill.svg") no-repeat center;
    background-size: cover;
    object-fit: cover;
  }
  .plus-mobile {
    /* <!-- Joy-SS --> flex:2 */
  }
  .plus-icon {
    /* <!-- Joy-SS --> background-image: linear-gradient(to right, #03bdfa, #048dfb); */
    width: 103px;
    height: 30px;
    border-radius: 8px;
    text-align: center;
  }
  .plus-gradient-btn {
    background: linear-gradient(121deg, #ffffffd4, #fff7f6) padding-box,
      linear-gradient(92deg, #0611f999, #f91c0599) border-box;
    border: 1.5px solid transparent;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #000;
    font-weight: 600;
    border-radius: 5px;
    /* border: 1px solid;
        border-image-slice: 1;
        border-width: 1px;
        border-image-source: linear-gradient(to left, #743ad5, #d53a9d); */
  }
  .plus-icon i {
    font-size: 20px;
    line-height: 32px;
  }
  .page-id-24946 .video-height {
    width: 100%;
    height: 210px;
    object-fit: cover;
    overflow: hidden;
  }
  .page-id-24946 .staff-pick-list video {
    max-width: 100%;
    height: 100%;
    display: block;
    transition: all 0.3s;
    max-height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .mobile-only .postedby-small figure {
    margin-right: 0;
    margin-top: 0;
  }
  .mobile-nav-user {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
  }

  .page-id-24946 button {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
  }

  .page-id-24946 [data-toggle="modal"] i {
    font-size: 20px;
    color: #676666;
  }

  .page-id-24946 .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255);
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    transform: translateY(1rem) translateZ(0);
    transition: all 0.3s ease;
  }
  .page-id-24946 .modal.active {
    visibility: visible;
    transform: translateY(0) translateZ(0);
    opacity: 1;
    z-index: 999;
    visibility: visible;
  }
  .page-id-24946 .modal.active .content {
    opacity: 1;
    visibility: visible;
  }
  .page-id-24946 .modal [data-dismiss="modal"] {
    position: absolute;
    height: 2rem;
    width: 2rem;
    top: 1.5rem;
    left: 0;
  }
  .page-id-24946 .modal [data-dismiss="modal"]:focus i {
    color: #0288d1;
  }
  .page-id-24946 .modal [data-dismiss="modal"] i {
    font-size: 1rem;
    color: #545658;
  }
  .page-id-24946 .modal [data-dismiss="modal"] span {
    display: block;
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.5rem;
    transform: translateY(1.1rem);
  }
  .page-id-24946 .modal .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0.3s;
  }
  .page-id-24946 .modal .content.show-tag-results > div.results {
    visibility: hidden;
    transform: translateX(-100%);
  }
  .page-id-24946 .modal .content.show-tag-results > div.tag-results {
    visibility: visible;
    transform: translateX(0);
  }
  .page-id-24946 .modal .content > .results {
    position: absolute;
    width: 100%;
    left: 0;
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
  }
  .page-id-24946 .modal .content > div.results {
    visibility: visible;
    transform: translateX(0);
  }
  .page-id-24946 .modal .content > div.tag-results {
    visibility: hidden;
    transform: translateX(100%);
  }

  .page-id-24946 .modal input {
    display: block;
    width: 100%;
    background: none;
    border: none;
    /* border-width: 0 0 1px 0; */
    color: #000;
    padding: 9px 21px;
    font-size: 15px;
    font-weight: 100;
    background: #f2f6fb;
    border-radius: 38px;
    width: 80%;
    margin: 0 auto;
  }
  .page-id-24946 .modal input:focus {
    outline: none;
  }
  .modal ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .modal ul li {
    position: relative;
    color: #000;
    font-size: 13px;
    padding: 12px 14px 12px 35px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .results-title {
    flex: 2;
  }
  .voice-search {
    position: absolute;
    width: 30px;
    left: auto;
    transition: all 0.3s cubic-bezier(1, 0.1, 0, 0.9);
    height: 30px;
    right: 0;
  }
  .results-image {
    flex-basis: 18%;
    width: 100%;
    height: 40px;
    /* object-fit: cover; */
    overflow: hidden;
    border-radius: 5px;
    margin-right: 14px;
  }
  .results-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
  }
  .modal ul li:before {
    font-family: "Font Awesome 6 Free";
    content: "\f017";
    position: absolute;
    top: 50%;
    left: 0.5rem;
    margin-top: -4px;
  }
  .modal ul li:hover,
  .modal ul li:focus {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
  }
  .modal ul + h2 {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    margin-top: 1rem;
  }
  .modal .tag-results .selected-tag {
    display: block;
    position: absolute;
    left: 3rem;
    background: #0288d1;
    color: white;
    padding: 0.5rem 1rem;
  }
  .modal .tag-results > ul {
    margin-left: 35%;
    width: 60%;
  }
  .modal .back {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.5rem;
    width: 1.5rem;
  }
  .modal .back i {
    font-size: 1.5rem;
  }
  .modal ::-moz-placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 100;
    font-family: "Roboto";
  }
  .modal :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 100;
    font-family: "Roboto";
  }
  .modal ::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 100;
    font-family: "Roboto";
  }

  .material-icons {
    color: white;
  }

  #fixedDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    color: #fff;
    padding: 12px;
    transition: top 0.3s ease; /* Smooth transition */
    z-index: 3;
  }
  .page-id-24946 #fixedDiv {
    padding-bottom: 0px;
  }

  #content {
    padding-top: 50px; /* Adjust according to the height of fixedDiv */
  }

  /* Ria 07/03/2024 */

  .full-width {
    width: 100%;
  }

  .single-speaking_videos .profile-single-video-main {
    padding-right: 0px;
  }
  .single-speaking_videos .video-categories {
    padding: 10px;
  }
  .item-user-profile-wrapper .video-categories {
    padding: 0 10px;
    padding-top: 7px;
    padding-bottom: 9px;
    border-top: 1px solid #cccccc;
  }
  .single-speaking_videos .video-category-active {
    background: linear-gradient(#f2f6fb, #f2f6fb) padding-box,
      linear-gradient(to right, #767df6, #f58181) border-box !important;
    border: 1.5px solid transparent;
  }
  .single-speaking_videos ul.staff-pick-list {
    margin-top: 0px;
  }

  .single-speaking_videos ul.video-categories {
    margin-bottom: 0;
  }

  /* -- Remix page -- */
  .remix-header .remix-header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0px;
  }
  .remix-header .remix-header-nav .plus-mobile {
    margin-left: 91px;
  }
  .remix-header .remix-header-nav .mobile-nav-user {
    margin-left: 88px;
  }
  .remix-video-player-wrapper {
    position: fixed;
    z-index: 2;
  }
  .remix-video-section {
    margin-top: 58px;
  }
  .remix-video-player-closebtn {
    position: absolute;
    left: 0px;
    padding: 30px;
    top: -10px;
    z-index: 99;
    color: #fff;
    font-size: 20px;
    left: -10px;
  }
  .item-user-profile-wrapper {
    width: 100%;
    position: fixed;
    background: #fff;
    z-index: 10;
  }
  .item-user-profile-wrapper .mobile-only {
    padding: 10px;
  }
  .remix-user-profile {
    margin-top: 0px;
  }
  .remix-user-profile h5 {
    display: block !important;
    word-wrap: break-word;
    white-space: normal;
  }

  .listing-style {
    /* border-bottom: 2px solid #cccc; */
    padding: 10px;
  }
  .speaking-video-details .speaking-video-details-user-card {
    padding-top: 30px;
    margin-bottom: 10px;
  }
  .speaking-video-details
    .speaking-video-details-user-card
    .profile-video-share
    a {
    font-size: 12px;
  }
  .listing-style-align {
    align-items: flex-start;
  }
  .listing-style h5 {
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .profile-video-share {
    margin-top: 10px;
  }
  .speaking-video-details
    .speaking-video-details-user-card
    .profile-video-share {
    margin-top: 5px;
  }
  .single-speaking_videos .profile-video-share {
    margin-top: 5px;
  }
  .single-speaking_videos .profile-video-share a {
    border-radius: 16px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 300;
  }
  .gradient-btn {
    background-image: linear-gradient(to bottom right, #a702fd, #0589f9);

    padding: 6px 26px;
    border: 1px solid #fff;
    font-size: 12px;
    border-image: linear-gradient(45deg, rgb(146, 212, 254), rgb(200, 143, 255))
      1;
    border-width: 2px;
    border-style: solid;
    line-height: 15px;
    position: relative;
  }

  .gradient-btn a {
    color: #fff;
  }
  .gradient-btn:before {
    background-image: url(../../public/img/star.png);
    position: absolute;
    top: 20%;
    left: 0;
    content: "";
    width: 18px;
    height: 19px;
    background-repeat: no-repeat;
    display: none;
  }
  .related-tab .gradient-btn:before {
    display: block;
  }

  /* .speaking_videos-template-default header{
display: none;
} */

  .listing-style-align p span {
    margin-left: 0;
    padding-left: 0;
  }
  .remix-box {
    margin-left: 53px;
  }
  .video-box {
    margin-top: -8px;
  }
  .grid-boxs {
    position: relative;
    height: 106px;
  }
  .grid-boxs-content {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 7px;
  }
  .remix-filter-video-wrapper {
    width: auto;
    height: auto;
  }
  .remix-filter-video-col {
    display: flex;
    gap: 7px;
  }
  .grid-boxs-content-user {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
    border: 3px solid #fff;
    margin: 0 auto;
    margin-bottom: 7px;
  }
  .remix-filter-video-profile-img {
    width: 32px;
    height: 32px;
    border: 1px solid #fff;
    margin-bottom: 0;
  }
  .video-boxs {
    position: relative;
  }

  .video-close {
    position: absolute;
    z-index: 99;
    color: #fff;
    font-size: 20px;
    padding: 30px;
    top: -10px;
    left: -10px;
  }
  .grid-boxs-text {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 4px 14px;
    text-align: center;
    color: #000;
    border-radius: 4px;
    font-size: 12px;
    text-transform: capitalize;
    font-weight: bold;
  }
  .remix-filter-video-profile-title {
    padding: 2px 12px;
    height: 16px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 10px;
    color: 191a1a;
    font-weight: 600;
  }
  .grids ul {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .grids ul li {
    width: 100%;
    list-style-type: none;
  }
  .grids ul li img {
    width: 100%;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .grid-boxs-content-user imng {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
  }
  .mobile-chat .speaking-single-video-text {
    width: 100%;
  }
  .modify-icons-box {
    width: auto;
    margin: 0;
    text-align: center;
    display: block;
    /* display: flex;
    justify-content: center;
    align-self: center;
    /* align-self: flex-start; */
    /* flex: 1;
    flex-basis: 20%; */
  }
  .mobile-chat ul.speaking-single-video-chat {
    display: flex;
    padding: 25px 12px;
    background-image: linear-gradient(to top, #fff, #cec9c9);
    padding-bottom: 425px;
  }
  .mobile-chat ul.speaking-single-video-chat li {
    width: 100%;
    display: grid;
    grid-template-columns: 46px 71% 46px;
    align-items: center;
    margin-bottom: 20px;
  }
  .mobile-chat ul.speaking-single-video-chat li.video-text-sent {
    flex-direction: row-reverse;
  }

  .mobile-chat ul.speaking-single-video-chat li {
    column-gap: 12px;
  }
  .mobile-chat .video-text-message .show-play-btn,
  .mobile-chat li.video-text-sent .video-text-message .show-play-btn {
    right: 6px;
    position: relative;
    z-index: 5;
    min-width: 25px;
    max-width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 50%;
    line-height: 25px;
    order: 2;
    background: url(../../public/img/icon-play-chat.png) no-repeat center;
    background-size: cover !important;
    transition: 0.3s ease-in;
  }
  .mobile-chat .video-text-message.chat-block-active .show-play-btn,
  .mobile-chat
    li.video-text-sent
    .video-text-message.chat-block-active
    .show-play-btn {
    background: url(../../public/img/icon-pause-chat.png) no-repeat center;
  }
  /* .mobile-chat li.video-text-sent .show-play-btn{    
    background-image: linear-gradient(to right, #a314db, #da7cff);
    order: 2;
} */
  .mobile-chat .show-play-btn i {
    font-size: 10px;
    color: #fff;
  }
  .mobile-chat .chat-profile-img {
    width: auto;
    /* height: 100%; */
    margin: 0;
    text-align: center;
    display: block;
    /* display: flex;
    justify-content: center;
    align-self: flex-start;
    flex: 1;    
    flex-basis: 24%; */
  }
  li.video-text-replies {
    position: relative;
  }
  li.video-text-replies .chat-profile-img {
    position: relative;
    width: 42px;
    height: auto;
    align-self: baseline;
  }
  li.video-text-replies .chat-profile-img-box {
    position: absolute;
    top: 0;
    left: 0;
  }
  .item1 {
    grid-area: item1;
  }
  .item2 {
    grid-area: item2;
  }
  .item3 {
    grid-area: item3;
  }
  li.video-text-replies {
    grid-template-areas: "item1 item2 item3";
  }
  li.video-text-sent:not(li.video-text-replies) {
    display: grid;
    grid-template-areas: "item3 item2 item1";
  }
  li.video-text-sent .chat-boxs {
    border-radius: 35px;
    border-bottom-right-radius: 0;
    background: #f7e6fe;
    flex-basis: 71%;
    position: relative;
    margin-left: 24px;
  }
  li.video-text-sent .video-text-message {
    border: 0.3px solid rgb(0 0 0 / 80%);
    align-items: center;
  }
  li.video-text-sent .chat-profile-img {
    position: relative;
    width: 42px;
    height: 100%;
    display: flex;
    margin: 0 auto;
  }
  li.video-text-sent .chat-profile-img-box {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .video-text-replies .chat-boxs {
    border-radius: 35px;
    border-top-left-radius: 0;
    background: #d4ebfd;
    flex-basis: 71%;
    position: relative;
    margin-right: 24px;
  }

  .video-text-replies .chat-active,
  .video-text-sent .chat-active {
    background: linear-gradient(to right, #69b6df, #c75af1);
    padding: 2px;
    border: 0;
    position: relative;
    background: none;
  }

  .chat-profile-img-box {
    width: 42px;
    height: 42px;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
  }

  .chat-profile-img-box img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  .mobile-chat li.video-text-sent .video-text-message::after {
    display: none;
  }
  .modify-icons {
    width: 42px;
    height: 42px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modify-icons.loading {
    animation: pulse 1s ease-in-out forwards;
    border-radius: 50%;
  }

  .modify-icons img {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
  .modify-icons .refresh {
    width: auto;
    height: 24px;
    position: relative;
    z-index: 99;
  }
  .modify-icons .microphone.active {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 99;
  }
  .page-id-26123 .modify-icons .microphone {
    width: auto;
    position: relative;
    z-index: 99;
  }
  .modify-icons .pause {
    width: auto;
    height: 40px;
    position: relative;
    z-index: 99;
  }
  .mobile-chat .video-text-message {
    margin: 0px;
    width: 100%;
  }
  .modify-icons .refresh.active {
    width: 27px;
    height: 27px;
    position: relative;
    z-index: 99;
  }
  .modify-icons .pause.active {
    width: 35px;
    height: 35px;
    position: relative;
    z-index: 99;
  }
  .modify-icons-count {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    font-weight: 600;
    color: #fc3e05;
    opacity: 0.7;
  }

  .mobile-chat .modify-icons .active {
    display: block;
  }
  .modify-icons .refresh,
  .modify-icons .microphone,
  .modify-icons .pause {
    display: none;
  }

  .mobile-chat .video-text-message p {
    border: 0;
    filter: none;
  }

  .mobile-chat .video-text-message p {
    padding-right: 35px;
    font-size: 16px;
    line-height: 20px;
    order: 1;
  }

  .mobile-chat
    ul.speaking-single-video-chat
    li.video-text-replies
    .video-text-message {
    /* --r: 18px;
    --t: 30px;
    margin-left: -6%;
    padding: calc(2* var(--r) / 3);
    -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat, conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box, radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
    background: #d4ebfd;
    --_d: 0%;
    border-left: var(--t) solid #0000 !important;
    
    place-self: start; */
    position: relative;
    border-radius: 35px;
    background: #dffaff;
    border-top-left-radius: 0;
    padding: 7px;
    border: 0.3px solid rgb(0 0 0 / 80%);
    display: flex;
    align-items: center;
  }

  .mobile-chat ul.speaking-single-video-chat .video-text-message p {
    background-color: transparent;
  }
  .mobile-chat
    ul.speaking-single-video-chat
    li.video-text-sent
    .video-text-message {
    /* background-color: #f7e6fe; */
    /* --r: 18px;
    --t: 30px;
   position: relative;
    padding: calc(2* var(--r) / 3);
    -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat, conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box, radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
    background: #f7e6fe;   
    --_d: 100%;
    border-right: var(--t) solid #0000;
    place-self: end;
    margin-right: -6%; */
    background-image: url(../../public/img/active-border.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    border-radius: 35px;
    background: #fff;
    border-bottom-right-radius: 0;
    padding: 7px;
    /* border: 1px solid #000; */
    /* border: 1px solid #d4d6d7; */
  }

  .video-text-replies .chat-boxs:before {
    content: "";
    background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="68" height="54"><path d="M0 0 C1.98 0 3.96 0 6 0 C6 17.82 6 35.64 6 54 C-15.45 54 -36.9 54 -59 54 C-59.33 52.68 -59.66 51.36 -60 50 C-57.65238468 47.65238468 -56.14247971 47.60536054 -52.94775391 47.1652832 C-37.98212799 45.06939048 -23.1740207 37.8810224 -13.5703125 25.9921875 C-8.74272635 19.46184052 -5.01060564 12.54465027 -2 5 C-1.62746094 4.071875 -1.25492188 3.14375 -0.87109375 2.1875 C-0.43990234 1.1046875 -0.43990234 1.1046875 0 0 Z " fill="%23DCEDFB" transform="translate(62,0)"/><path d="M0 0 C0.66 0 1.32 0 2 0 C1.03687398 13.20414703 -8.31181514 26.45332333 -18 35 C-22.45643684 38.34966168 -27.18889267 41.19495773 -32 44 C-32.69738281 44.4434375 -33.39476563 44.886875 -34.11328125 45.34375 C-40.97294991 49.3591658 -47.83756166 49.46954281 -56 51 C-35.54 51.33 -15.08 51.66 6 52 C6 52.66 6 53.32 6 54 C-15.45 54 -36.9 54 -59 54 C-59.33 52.68 -59.66 51.36 -60 50 C-57.65238468 47.65238468 -56.14247971 47.60536054 -52.94775391 47.1652832 C-37.98212799 45.06939048 -23.1740207 37.8810224 -13.5703125 25.9921875 C-8.74272635 19.46184052 -5.01060564 12.54465027 -2 5 C-1.62746094 4.071875 -1.25492188 3.14375 -0.87109375 2.1875 C-0.43990234 1.1046875 -0.43990234 1.1046875 0 0 Z " fill="%23B8BBBD" transform="translate(62,0)"/></svg>');
    width: 16%;
    height: 21px;
    position: absolute;
    left: -24px;
    bottom: -1px;
    z-index: 9;
    background-size: contain;
    /* border-bottom: 2px solid #d5d6d8; */
    background-repeat: no-repeat;
    display: none;
  }
  .video-text-sent .chat-boxs:before {
    content: "";
    background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="66" height="54"><path d="M0 0 C1.65 0 3.3 0 5 0 C5.38929688 1.00417969 5.77859375 2.00835937 6.1796875 3.04296875 C13.65093378 21.60698478 24.20798739 33.94243614 42.953125 42.01171875 C47.44997846 43.47031353 52.02572502 44.29999767 56.69458008 45.01318359 C61.80998314 45.80998314 61.80998314 45.80998314 64 48 C64.1875 50.5625 64.1875 50.5625 64 53 C63 54 63 54 60.48802185 54.12025452 C59.37105423 54.11803391 58.25408661 54.11581329 57.10327148 54.11352539 C55.84203964 54.11344986 54.5808078 54.11337433 53.28135681 54.11329651 C51.89460206 54.1081891 50.50784771 54.10297309 49.12109375 54.09765625 C47.71004791 54.09579201 46.29900143 54.09436814 44.88795471 54.09336853 C41.16759465 54.08954379 37.4472734 54.0797139 33.72692871 54.06866455 C29.26660209 54.05665461 24.80626252 54.05204798 20.34592438 54.04621124 C13.56392256 54.0365021 6.78200597 54.01734528 0 54 C0 36.18 0 18.36 0 0 Z " fill="%23F6E5FC" transform="translate(0,0)"/><path d="M0 0 C1.82322737 2.73484106 3.20972614 5.48113364 4.61206055 8.44506836 C12.23673989 24.38357015 22.56466976 34.95692515 38.953125 42.01171875 C43.44997846 43.47031353 48.02572502 44.29999767 52.69458008 45.01318359 C57.80998314 45.80998314 57.80998314 45.80998314 60 48 C60.1875 50.5625 60.1875 50.5625 60 53 C59 54 59 54 56.48802185 54.12025452 C55.37105423 54.11803391 54.25408661 54.11581329 53.10327148 54.11352539 C51.84203964 54.11344986 50.5808078 54.11337433 49.28135681 54.11329651 C47.89460206 54.1081891 46.50784771 54.10297309 45.12109375 54.09765625 C43.71004791 54.09579201 42.29900143 54.09436814 40.88795471 54.09336853 C37.16759465 54.08954379 33.4472734 54.0797139 29.72692871 54.06866455 C25.93319219 54.05844948 22.13944942 54.05387071 18.34570312 54.04882812 C10.89711769 54.03809158 3.44856428 54.0210157 -4 54 C-4 53.34 -4 52.68 -4 52 C16.46 52 36.92 52 58 52 C58 51.01 58 50.02 58 49 C57.14341797 48.96132812 57.14341797 48.96132812 56.26953125 48.921875 C39.65145725 47.75940242 24.28475641 40.34076113 13 28 C-1.03354768 10.07708984 -1.03354768 10.07708984 0 0 Z " fill="%23BBBCBF" transform="translate(4,0)"/></svg>');
    height: 21px;
    position: absolute;
    width: 32px;
    right: -30px;
    bottom: -1px;
    z-index: 9;
    background-size: contain;
    /* border-bottom: 2px solid #d5d6d8; */
    background-repeat: no-repeat;
    display: none;
  }
  .video-text-sent .chat-active:before {
    content: "";
    /* background-image: url(../../public/img/active-purple.png); */
    background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="68" height="55"><path d="M0 0 C1.65 0 3.3 0 5 0 C5.61875 1.55847656 5.61875 1.55847656 6.25 3.1484375 C9.79018925 11.80454322 13.45505144 19.15867641 20 26 C20.64195313 26.69351562 21.28390625 27.38703125 21.9453125 28.1015625 C31.8188612 37.82494316 44.26355926 42.55878912 57.76953125 44.33203125 C60.98602926 44.99711125 62.18790116 45.31491923 64 48 C64.3125 50.5625 64.3125 50.5625 64 53 C62 55 62 55 59.4057312 55.24050903 C57.76025803 55.2338472 57.76025803 55.2338472 56.08154297 55.22705078 C54.84040741 55.22689972 53.59927185 55.22674866 52.32052612 55.22659302 C50.9610783 55.216379 49.6016321 55.205947 48.2421875 55.1953125 C46.85499271 55.19158284 45.46779529 55.18873565 44.08059692 55.18673706 C40.42759949 55.17909684 36.77476083 55.15944516 33.12182617 55.1373291 C29.39504178 55.11687896 25.66823099 55.10762764 21.94140625 55.09765625 C14.62746389 55.07726043 7.31395766 55.03811559 0 55 C0 36.85 0 18.7 0 0 Z " fill="%23F6E3FD" transform="translate(0,0)"/><path d="M0 0 C0.99 0 1.98 0 3 0 C3.61875 1.55847656 3.61875 1.55847656 4.25 3.1484375 C7.79018925 11.80454322 11.45505144 19.15867641 18 26 C18.64195313 26.69351562 19.28390625 27.38703125 19.9453125 28.1015625 C29.8188612 37.82494316 42.26355926 42.55878912 55.76953125 44.33203125 C58.98602926 44.99711125 60.18790116 45.31491923 62 48 C62.3125 50.5625 62.3125 50.5625 62 53 C60 55 60 55 57.4057312 55.24050903 C55.76025803 55.2338472 55.76025803 55.2338472 54.08154297 55.22705078 C52.84040741 55.22689972 51.59927185 55.22674866 50.32052612 55.22659302 C48.9610783 55.216379 47.6016321 55.205947 46.2421875 55.1953125 C44.85499271 55.19158284 43.46779529 55.18873565 42.08059692 55.18673706 C38.42759949 55.17909684 34.77476083 55.15944516 31.12182617 55.1373291 C27.39504138 55.11687896 23.66823096 55.10773713 19.94140625 55.09765625 C12.62753175 55.07619951 5.31378811 55.04205903 -2 55 C-2 54.01 -2 53.02 -2 52 C18.13 52 38.26 52 59 52 C59 51.01 59 50.02 59 49 C58.14341797 48.96132812 58.14341797 48.96132812 57.26953125 48.921875 C40.10215682 47.72097758 24.5104207 39.82972141 13 27 C9.64232768 22.55274311 6.78929056 17.81734907 4 13 C3.52175781 12.175 3.04351562 11.35 2.55078125 10.5 C0.61768348 6.91868203 -0.51187483 4.09499867 0 0 Z " fill="%23C85DF1" transform="translate(2,0)"/></svg>');
    right: -29px;
    bottom: -3px;
    z-index: 9;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 32px;
    height: 29px;
  }
  .video-text-replies .chat-active:before {
    content: "";
    background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="68" height="55"><path d="M0 0 C2.97 0 5.94 0 9 0 C9 18.15 9 36.3 9 55 C-7.39113341 55.08021762 -7.39113341 55.08021762 -14.36328125 55.09765625 C-19.12585897 55.10962465 -23.88836 55.12380251 -28.65087891 55.15087891 C-32.48933886 55.17256585 -36.32771659 55.18455982 -40.16623306 55.18975449 C-41.63270487 55.19345773 -43.09917205 55.200689 -44.56560898 55.21146011 C-46.61529106 55.22592019 -48.66463082 55.22798029 -50.71435547 55.22705078 C-51.88239716 55.231492 -53.05043884 55.23593323 -54.25387573 55.24050903 C-57 55 -57 55 -59 53 C-59.375 50.5625 -59.375 50.5625 -59 48 C-55.71242203 44.67132731 -52.05861572 44.35003822 -47.625 43.75 C-32.776006 41.31106758 -19.40262723 33.49635334 -10.29003906 21.38989258 C-5.52204805 14.67853558 -2.53906555 7.79582438 0 0 Z " fill="%23DAEDFC" transform="translate(59,0)"/><path d="M0 0 C1.65 0 3.3 0 5 0 C0.35951588 17.72845148 -9.88132493 31.48132626 -25.41015625 41.16796875 C-34.85807169 46.69403774 -41.28971196 47.80432099 -53 50 C-32.54 50.33 -12.08 50.66 9 51 C9 52.32 9 53.64 9 55 C0.42922402 55.04628427 -8.14149997 55.08184919 -16.71236992 55.10362434 C-20.69191773 55.11407386 -24.67138021 55.12825422 -28.65087891 55.15087891 C-32.48933886 55.17256585 -36.32771659 55.18455982 -40.16623306 55.18975449 C-41.63270487 55.19345773 -43.09917205 55.200689 -44.56560898 55.21146011 C-46.61529106 55.22592019 -48.66463082 55.22798029 -50.71435547 55.22705078 C-51.88239716 55.231492 -53.05043884 55.23593323 -54.25387573 55.24050903 C-57 55 -57 55 -59 53 C-59.375 50.5625 -59.375 50.5625 -59 48 C-55.71242203 44.67132731 -52.05861572 44.35003822 -47.625 43.75 C-32.776006 41.31106758 -19.40262723 33.49635334 -10.29003906 21.38989258 C-5.52204805 14.67853558 -2.53906555 7.79582438 0 0 Z " fill="%236AB6DF" transform="translate(59,0)"/></svg>');
    display: block;
    width: 16%;
    height: 22px;
    position: absolute;
    left: -23px;
    bottom: 0px;
    z-index: 9;
    background-size: contain;
    /* border-bottom: 2px solid #93bfe2 !important; */
    background-repeat: no-repeat;
    display: none;
  }

  .previe-box {
    background: #000;
    padding: 25px 0;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99;
  }
  .previe-box ul {
    padding-left: 0;
    display: flex;
    justify-content: center;
    /* margin-top: 35px; */
  }
  .previe-box ul li {
    color: #fff;
    font-size: 13px;
    text-align: center;
    list-style-type: none;
    flex: 1;
  }

  .popup {
    background: #000000a6;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999;
    opacity: 1;
    box-shadow: unset !important;
    top: 0;
    left: 0;
    display: none;
  }

  .popup
    .popup-inner:not(#popup-feedback .popup-inner, .plus-popup .popup-inner) {
    position: fixed;
    padding: 21px;
    width: 79%;
    left: 50% !important;
    bottom: 2% !important;
    margin: 0 auto;
    height: auto;
    background: #fff;
    z-index: 20;
    border-radius: 11px;
    transform: translateX(-50%);
  }
  #popup-feedback .popup-inner,
  .plus-popup .popup-inner {
    position: fixed;
    padding: 21px;
    width: 79%;
    left: 50% !important;
    top: 50% !important;
    margin: 0 auto;
    height: auto;
    background: #fff;
    z-index: 20;
    border-radius: 11px;
    transform: translate(-50%, -50%);
  }

  .popup p {
    margin-bottom: 0px;
  }

  .previe-box ul li.active,
  .previe-box ul li.active a {
    color: #5fb5f7 !important;
  }
  .previe-box ul li.active img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(81%) saturate(571%)
      hue-rotate(183deg) brightness(108%) contrast(94%);
  }
  .previe-box ul li img {
    /* width: 33%; */
    margin: 0 auto;
    margin-bottom: 16px;
    height: 22px;
  }
  .previe-box p {
    color: #fff;
    text-align: center;
    font-size: 15px;
    margin: 0;
  }
  .chat-profile-play {
    position: absolute;
    top: auto;
    z-index: 9;
    bottom: 0;
    width: 42px;
    height: 42px;
    left: 0;
  }
  .video-text-replies .chat-profile-play {
    right: -1px;
    bottom: 0;
  }

  /* .speaking-single-video-text{
    background-image: linear-gradient(#919191, #fff, #fff, #fff);
} */
  .count-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-weight: 600;
    z-index: 9;
  }
  .count-box-three {
    height: 62px;
    width: 62px;
    top: 50%;
    position: absolute;
    font-size: 20px;
    font-weight: 800;
    transform: translate(0%, 30%);
    display: none;
  }
  .count-box-two {
    height: 62px;
    width: 62px;
    top: 50%;
    position: absolute;
    font-size: 20px;
    font-weight: 800;
    transform: translate(0%, 30%);
    display: none;
  }
  .wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin: 50px auto;
  }

  .leftHalf,
  .rightHalf,
  .spinner {
    top: 0;
    position: absolute;
    width: 50%;
    height: 100%;
  }

  .leftHalf {
    left: 0;
    background: #fff;
    z-index: 3;
    opacity: 1;
    -webkit-animation: showHide 2s infinite steps(1, end);
    border-radius: 100% 0 0 100%/ 50% 0 0 50%;
  }

  .rightHalf {
    right: 0;
    background: #ff8330;
    z-index: 1;
    opacity: 0;
    -webkit-animation: showHide 2s infinite steps(1, end) reverse;
    border-radius: 0 100% 100% 0/ 0 50% 50% 0;
  }
  .spinner-element {
    /* display: none; */
  }
  .spinner {
    overflow: hidden;
    left: 0;
    background: #ff8330;
    -webkit-animation: spin 2s linear infinite;
    -webkit-transform-origin: center right;
    z-index: 2;
    border-radius: 100% 0 0 100%/ 50% 0 0 50%;
  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @-webkit-keyframes showHide {
    0% {
      opacity: 1;
    }

    50%,
    100% {
      opacity: 0;
    }
  }

  .profile-pic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    width: 50px;
    height: 50px;
  }
  .profile-pic img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    height: 100%;
  }
  .svg-pie {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
  }
  .svg-pie svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
  }
  .svg-pie .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 15px;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  .rendered.svg-pie {
    /* background: url(https://talkindeeddev3.wpengine.com/wp-content/uploads/2023/12/Screen-Shot-2024-02-03-at-3.22.47.png); */
  }
  .rendered.svg-pie .percentage {
    opacity: 1;
  }

  .svg-pie {
    box-shadow: none;
  }
  .svg-pie circle:nth-child(1) {
    fill: transparent;
  }
  .svg-pie circle:nth-child(2) {
    fill: transparent;
    stroke: #e74d3c;
  }
  .svg-pie .percentage {
    color: white;
  }

  .svg-pie {
    float: left;
    margin: 10px;
  }

  .count-box-one {
    height: 62px;
    width: 62px;
    position: absolute;
    font-size: 20px;
    font-weight: 800;
    transform: translate(0%, 30%);
    display: none;
  }

  .chat-profile-img {
    position: relative;
  }
  /* .chat-profile-img:before{
    position: absolute;
    content: '';
    background-color: rgba(0, 0, 0, .04);
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
} */
  @property --num {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
  }
  .counter-container {
    position: absolute;
    z-index: 9;
    width: 42px;
    height: 546px;
    line-height: 42px;
    font-size: 30px;
    color: #fff;
    font-weight: 600;
    z-index: 99;
    top: 0;
  }
  .video-text-sent .counter-container {
    height: 42px;
    bottom: 0;
    align-self: flex-end;
  }
  /* .counter::before {
    counter-reset: my-counter var(--num);
    content: counter(my-counter);
    animation: count 10s ease-in-out infinite alternate;
  } */

  /* @keyframes count {
    to {
      --num: 100;
    }
  } */

  .video-text-replies .mobile-chat .video-play-outine-img {
    width: 26px;
    position: relative;
    bottom: -10px;
    cursor: pointer;
  }
  .video-text-sent .video-play-outine-img {
    width: 35px;
    position: relative;
    bottom: 0px;
    cursor: pointer;
    left: -12px;
    top: 15px;
  }

  .video-text-replies .video-play-outine-img {
    width: 35px;
    position: relative;
    bottom: 0px;
    cursor: pointer;
    left: auto;
    top: 12px;
    right: -18px;
  }

  .loader {
    width: 21px;
    height: 21px;
    border: 2px solid #ffa385;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: absolute;
    top: 13%;
    left: 0;
    right: 0;
  }
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  img {
    -webkit-user-drag: none; /* Prevents image dragging */
    -webkit-touch-callout: none; /* Prevents long-press actions */
    user-select: none; /* Disables selection */
  }
}

/* Collab Popup */
.speaking-mobile-share-popup {
  display: none;
  position: absolute;
  bottom: 2%;
  z-index: 99;
  background: #fff;
  width: 90%;
  right: 5%;
  border-radius: 10px;
  padding: 15px;
}

.sv_video-popup-overlay {
  display: none;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: #00000063;
  top: 0;
}
.speaking-mobile-share-popup h4 {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: bold;
  display: inline-block;
}
h4.invite-to-edit-copy-link {
  font-weight: normal;
}
.addtoany_shortcode {
  margin-bottom: 10px;
}
.speaking-mobile-share-popup.smsp-status {
  padding: 3px 10px;
}

.speaking-mobile-share-popup.smsp-status h4 {
  margin: 0;
}

.disable.inactive {
  opacity: 0.5;
}
/* Collab Popup */

/* Popup Content HTML */
div#popup1 .popup-confirmation-wrapper .button-set {
  display: flex;
  flex-direction: row;
  column-gap: 8px;
}
div#popup1 .popup-confirmation-wrapper .button-set button.btn_primary {
  width: 50%;
}
.btn_primary.gray {
  background-color: #ccc;
}
.video-profile-img-bottom {
  width: 22px;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 15px;
}

.cn-video-profile-sec .video-categories-container > div {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.cn-video-profile-sec .heading-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cn-video-profile-sec .heading-row a {
  width: 10px;
  height: 20px;
  display: inline-block;
  background-image: url(../img/icon-left-arrow.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
}
.cn-video-profile-sec .heading-row a i {
  display: none;
}
.cn-video-profile-sec .heading-row-name {
  line-height: 18px;
  display: inline-block;
  height: 22px;
}

.cn-video-profile-avatar.profile-content__avatar.video-profile-box {
  height: auto !important;
}
/* @media(max-width:600px) {
    .cn-video-profile-sec .profile-content__avatar.video-profile-box {
        height: auto !important; 
    }
} */

.cn-video-profile-avatar .profile-image-cont {
  margin-bottom: 27px;
  display: flex;
  flex-direction: column;
}
.cn-video-profile-avatar .profile-image {
  margin-bottom: 10px !important;
}
.cn-video-profile-avatar .profile-name {
  margin-bottom: 0 !important;
}

.cn-single-speaking_videos .video-categories {
  padding-top: 0;
  padding-left: 0;
}

.cn-single-speaking_videos .image-details-lists h4 {
  margin-bottom: 4px !important;
}
.cn-single-speaking_videos .image-details-share {
  margin-bottom: 0;
}
.cn-single-speaking_videos .list-view-authore {
  margin-top: 0 !important;
}
.cn-single-speaking_videos .image-details-lists h4 {
  line-height: 18px !important;
}
.cn-single-speaking_videos .image-details-lists h4 a {
  line-height: 18px !important;
}

.page-id-26417.page-template-profile {
  background: none !important;
}

.video-block .video-container {
  width: 150px;
  height: 84px;
}
.video-block .video-container video {
  width: 100%;
  height: 100%;
}

.remix-innerpage-header {
  width: 100%;
  position: fixed;
  padding: 12px 10px;
  background: #ebe7e9;
  z-index: 12;
}
.remix-innerpage-header-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.remix-innerpage-header-wrapper .remix-innerpage-header-backbtn {
  position: absolute;
  right: -30px;
}
.brand-mobileview {
  display: flex;
  align-items: center;
  gap: 19px;
  position: relative;
}
.brand-mobileview .logo {
  width: 22px;
  height: 22px;
}
.brand-mobileview .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-mobileview div > a img {
  width: auto;
  height: 22px;
  object-fit: cover;
}
.remix-innerpage-header-tab-list {
  display: flex;
  align-items: center;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.remix-innerpage-header-tab-list li {
  font-size: 12px;
  font-weight: 500;
  color: #010101;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  background: #fff;
}
.remix-innerpage-header-tab-list li:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px 0 0 4px;
}
.remix-innerpage-header-tab-list li:last-child {
  border-radius: 0 3px 3px 0;
}
.remix-innerpage-header-tab-list li.active {
  background: #000;
  color: #fff;
}
.remix-innerpage-header-user {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}
.remix-innerpage-video-wrapper {
  position: relative;
  margin-top: 57px;
  z-index: 12;
}
.remix-innerpage-video-wrapper .profile-single-video-main {
  padding-right: 0;
}
.remix-innerpage-footer-navlist {
  padding: 22px 42px;
}
.remix-innerpage-footer-navlist ul li {
  font-size: 12px;
  font-weight: 500;
}
.remix-innerpage-footer-navlist ul li img {
  height: 16px;
  margin-bottom: 10px;
}
.mix-tab-container {
  display: none;
}
.item-filter-video-wrapper.only-remix {
  margin-top: 0;
}
.profile-single-video-area.item-user-profile-wrapper.only-remix {
  position: inherit;
}
.mix-tab-container.toggle-section .profile-single-video-main {
  padding-bottom: 0px;
}
.mix-tab-container.toggle-section .profile-lists {
  column-gap: 12px;
  padding-left: 10px;
}
.mix-tab-container.toggle-section .profile-lists .image-lists {
  width: 50%;
}
.mix-tab-container.toggle-section .name-icon img {
  display: inline;
}
.remix-user-profile-title {
  display: flex;
  align-items: normal;
  gap: 26px;
}
.remix-user-profile p.video-contents {
  margin-top: 5px;
}
.remix-user-profile p.video-contents span.authore-title,
.remix-user-profile p.video-contents span.authore-title > span {
  background: transparent;
  line-height: normal;
}
.remix-innerpage-recommended-video-wrapper {
  width: 100%;
  height: calc(100vh - 31rem);
  overflow-y: scroll;
}
.remix-innerpage-recommended-video-list {
  padding-top: 40px;
}
.video-mutebtn {
  display: none;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 16px;
  background: url(../img/icon-mute-video.svg) no-repeat center;
  background-size: cover;
  z-index: 2;
}
.video-mutebtn.unmute-activevideo-icon {
  background: url(../img/icon-unmute-video.svg) no-repeat center;
  background-size: cover;
}

.ti-video-controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.ti-video-controls button,
input {
  margin: 5px;
  padding: 5px;
  color: white;
  background-color: #333;
  border: none;
  cursor: pointer;
}

.ti-video-controls input[type="range"] {
  width: 100px;
}

#ti_main_video {
  background-color: transparent !important;
}

/*
.video-container {
    position: relative;
    width: 600px;
    margin: auto;
}

.controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

input#seek-bar {
    margin: -2px;
    color: white;
    background-color: #333;
    border: none;
    cursor: pointer;
    height: 2px;
    display: none;
}

input[type="range"] {
    width: 100%;
}

.playpause {
    position: absolute;
    top: 40%;
    left: 46%;
    display: none;
}

.playpause {
  label {
    display: block;
    box-sizing: border-box;
    width: 0;
    height: 74px;

    border-color: transparent transparent transparent #f9f7f7;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: double;
    border-width: 0px 0 0px 60px;
  }
  input[type="checkbox"] {
    position: absolute;
    left: -9999px;
    &:checked + label {
      border-style: solid;
      border-width: 37px 0 37px 60px;
    }
    &:focus + label {
      box-shadow: 0 0 5px lightblue;
    }
  }
}
*/

.controls-seek {
  margin: -28px 0 0 0;
}
.public-video-boxes input#seek-bar {
  margin: 0 0 -21px 0px;
  color: white;
  background-color: #333;
  border: none;
  cursor: pointer;
  height: 1px;
}

.public-video-boxes input[type="range"] {
  width: 100%;
}

.public-video-boxes .playpause {
  width: 40px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.public-video-boxes .playpause {
  label {
    display: block;
    box-sizing: border-box;
    width: 0;
    height: 74px;

    border-color: transparent transparent transparent #f9f7f7;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: double;
    border-width: 0px 0 0px 60px;
  }
  input[type="checkbox"] {
    position: absolute;
    left: -9999px;
    appearance: none;
    opacity: 0;

    &:checked + label {
      border-style: solid;
      border-width: 20px 0 21px 35px !important;
      -webkit-border-width: 20px 0 21px 35px !important;
    }
    &:focus + label {
      box-shadow: 0 0 5px lightblue;
    }
  }
}

.video-boxs {
  position: relative;
}

/* .public-video-boxes .playpause label { */
.public-video-boxes .playpause label {
  width: 40px !important;
  height: 40px !important;
  border-width: 0px 0 0px 30px !important;
  -webkit-border-width: 0px 0 0px 30px !important;
}
.public-video-boxes .playpause input[type="checkbox"] + label {
  border-width: 0px 37px 0px 37px !important;
}
.controls-seek {
  margin: 0 !important;
  padding: 0 !important;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
}
.controls-seek input[type="range"] {
  -webkit-appearance: none !important;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

.orientation-viewport {
  position: relative;
}
.orientation-viewport::before {
  content: "Please use portrait view mode";
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 2rem;
  color: #fff;
  align-items: center;
  justify-content: center;
  background: #434343;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 99999;
}

/* @media only screen and (min-width: 300px) and (max-device-width: 992px) and (orientation: landscape){
    body {
        transform: rotate(90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow: hidden;
    }
}  */

/*--== Login screen UI ==--*/
.page-id-27535 {
  background: #fff;
}
.page-id-27535 .page-header {
  display: none;
}
.page-id-27535 .page-elementor > p {
  display: none;
}
.voiceover-signup-login-wrapper {
  height: calc(100vh - 17rem);
  margin-top: 30px;
}
.learning-school__login.voiceover-signup {
  margin-inline: 15px;
}

.learning-school__login.voiceover-signup form {
  padding: 0 1.125rem;
  position: relative;
}
.learning-school__login.voiceover-signup form p.status {
  position: relative;
  margin: 0;
}
.learning-school__login.voiceover-signup form p.status span.error {
  font-size: 12px;
  line-height: normal;
}
.learning-school__login.voiceover-signup form img.vo-loading-icon {
  min-width: 90vw;
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 60px 25vw;
}
.learning-school__login.voiceover-signup form * {
  transition: 0.4s ease-in;
}
.learning-school__login.voiceover-signup .voiceover-signup-step-inputs-group {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  overflow: hidden;
  transition: 0.4s ease-in;
  height: auto;
}
.learning-school__login.voiceover-signup form .voiceover-step-1,
.learning-school__login.voiceover-signup form .voiceover-step-2 {
  height: 0;
  opacity: 0;
  transition: 0.4s ease-in;
}
.learning-school__login.voiceover-signup form .voiceover-step-1.active-step,
.learning-school__login.voiceover-signup form .voiceover-step-2.active-step {
  opacity: 1;
  width: 100%;
  height: 100%;
}

.learning-school__login.voiceover-signup form .voiceover-step-1 label,
.learning-school__login.voiceover-signup form .voiceover-step-2 label {
  display: none;
}
.learning-school__login.voiceover-signup form input {
  width: 100%;
  border: 1px solid #0389fb;
  border-radius: 6px;
  height: 2.813rem;
  padding: 0 1.125rem;
  margin: 0px;
  font-size: 1rem;
  line-height: normal;
}
.learning-school__login.voiceover-signup form input::placeholder {
  font-size: 0.875rem;
  opacity: 1;
  font-weight: 500;
  color: #6f6c6c;
}
.learning-school__login.voiceover-signup .voiceover-step-1 {
  min-width: 100%;
}

.learning-school__login.voiceover-signup .voiceover-step-1 h2 {
  font-size: 1.625rem;
  text-align: center;
  line-height: normal;
  font-weight: 700;
  color: #000;
  margin-bottom: 2rem;
}
.learning-school__login.voiceover-signup form button {
  height: 2.813rem;
  padding: 0 1.125rem;
  background: #0389fb;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  border: none;
  position: relative;
  z-index: 9;
}

.learning-school__login.voiceover-signup .voiceover-step-2 h2 {
  font-size: 1rem;
  line-height: normal;
  text-align: center;
  font-weight: 700;
  color: #000;
  margin-bottom: 1.5rem;
}
.learning-school__login.voiceover-signup
  #mobile_signup_form
  .voiceover-step-2
  h2 {
  font-size: 1.25rem !important;
}
.learning-school__login.voiceover-signup .voiceover-step-2 .group-item {
  margin-bottom: 1.125rem;
}
.learning-school__login.voiceover-signup
  .voiceover-step-2
  .group-item:last-child {
  margin-bottom: 0;
}
.learning-school__login.voiceover-signup form .group-btn {
  margin-top: 1.25rem;
  margin-bottom: 0;
}
.learning-school__login.voiceover-signup form .voiceover-login-link {
  margin-top: 1rem;
  margin-bottom: 0;
}
.learning-school__login.voiceover-signup form .voiceover-login-link p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #000;
  text-align: center;
}
.learning-school__login.voiceover-signup form .voiceover-login-link a {
  color: #0389fb;
}
.horizontal-separator {
  position: relative;
  margin-top: 1.75rem;
  margin-inline: 1.125rem;
  text-align: center;
}
.horizontal-separator::before {
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  top: 60%;
  transform: translateY(-50%);
  background: #858585;
  position: absolute;
}
.horizontal-separator span {
  text-align: center;
  font-size: 0.75rem;
  color: #686565;
  font-weight: 500;
  padding: 0 0.75rem;
  background: #fff;
  position: relative;
}
.page-id-27535 .wp_google_login {
  margin-inline: 15px;
  margin-top: 20px;
}
/* .page-id-27535 .wp_google_login .wp_google_login__button{
    text-align: left;
    font-weight: 500;
    color: #1e1c1c;
    display: flex;
    align-items: center; 
    background-color: transparent;
    border: 1px solid #ccced0;
    border-radius: 8px;
} */

.voiceover-signup-login-footer > p {
  color: #000;
  font-size: 12px;
  line-height: normal;
  text-align: center;
}
.voiceover-signup-login-footer a {
  color: #038afb;
}

.load {
  padding: 1rem;
  max-width: 100%;
  width: 100%;
  height: 100vh;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.load .lines {
  width: 100%;
  height: 3rem;
  margin-bottom: 6px;
  border-radius: 2px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(130, 130, 130, 0.2) 8%,
    rgba(130, 130, 130, 0.3) 18%,
    rgba(130, 130, 130, 0.2) 33%
  );
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}

.loading-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20px;
}

.loading-card-image {
  width: 100%;
  height: 100%;
}
.loading-card-image.skeleton-loading {
  width: 100%;
  height: 210px;
}
.loading-card-avatar-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  background: transparent !important;
}
.loading-card-user {
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
}
.loading-card-heading {
  padding: 8px;
  height: 3rem !important;
  font-size: 22px;
  font-weight: 700;
}
.loading-card-heading.skeleton-loading {
  width: 70%;
  height: 1rem;
  margin: 0;
  border-radius: 3px;
  position: relative;
}
.loading-card-description {
  padding: 8px;
  font-size: 16px;
}
.loading-card-description.skeleton-loading {
  height: 3rem;
  margin: 1rem;
  border-radius: 3px;
}
.skeleton-loading {
  position: relative;
  background: #cccccc;
}
.skeleton-loading::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100px);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: wave-lines 0.8s infinite;
}
.plus-popup h3 {
  font-size: 21px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 16px;
}
.plus-popup p {
  margin-top: -6px;
}

.plus-popup span.close-colab-popup {
  right: 12px;
  font-weight: 800;
  top: 14px;
}
.plus-popup p {
  text-align: left;
  font-size: 19px;
}

.plus-popup h3 {
  text-align: left;
}
.plus-popup .popup-inner {
  top: 30%;
  left: 45%;
}

/* -- New loader like yputube -- */
.talkindeed-skeleton-loader {
  padding: 1rem;
  max-width: 100%;
  width: 100%;
  height: 100vh;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding-top: 47px;
}
.talkindeed-skeleton-header {
  width: 100%;
  display: flex;
  gap: 5%;
  justify-content: space-between;
}
.talkindeed-skeleton-header-tab {
  width: 20%;
  height: 32px;
  border-radius: 35px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(130, 130, 130, 0.2) 8%,
    rgba(130, 130, 130, 0.3) 18%,
    rgba(130, 130, 130, 0.2) 33%
  );
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.talkindeed-skeleton-video {
  width: 100%;
  height: 100%;
  min-height: 210px;
  max-height: 210px;
  margin-top: 10px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(130, 130, 130, 0.2) 8%,
    rgba(130, 130, 130, 0.3) 18%,
    rgba(130, 130, 130, 0.2) 33%
  );
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.talkindeed-skeleton-video-info {
  width: 100%;
  height: 66px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
}
.talkindeed-skeleton-video-user {
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(130, 130, 130, 0.2) 8%,
    rgba(130, 130, 130, 0.3) 18%,
    rgba(130, 130, 130, 0.2) 33%
  );
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.talkindeed-skeleton-video-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.talkindeed-skeleton-video-heading,
.talkindeed-skeleton-video-heading-half {
  width: 100%;
  height: 10px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(130, 130, 130, 0.2) 8%,
    rgba(130, 130, 130, 0.3) 18%,
    rgba(130, 130, 130, 0.2) 33%
  );
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.talkindeed-skeleton-video-heading-half {
  width: 50%;
}

.talkindeed-single-skeleton-loader {
  padding: 1rem;
  max-width: 100%;
  width: 100%;
  height: 100%;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.talkindeed-single-skeleton-header-loader {
  width: 100%;
  min-height: 35px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(130, 130, 130, 0.2) 8%,
    rgba(130, 130, 130, 0.3) 18%,
    rgba(130, 130, 130, 0.2) 33%
  );
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.talkindeed-single-skeleton-video-loader {
  width: 100%;
  height: 100%;
  min-height: 240px;
  max-height: 240px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(130, 130, 130, 0.2) 8%,
    rgba(130, 130, 130, 0.3) 18%,
    rgba(130, 130, 130, 0.2) 33%
  );
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.talkindeed-single-skeleton-chat-loader {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.talkindeed-single-skeleton-chat-user {
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(130, 130, 130, 0.2) 8%,
    rgba(130, 130, 130, 0.3) 18%,
    rgba(130, 130, 130, 0.2) 33%
  );
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.talkindeed-single-skeleton-chat-content {
  width: 100%;
  height: 80px;
  border-radius: 0 20px 20px 20px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(
    to right,
    rgba(130, 130, 130, 0.2) 8%,
    rgba(130, 130, 130, 0.3) 18%,
    rgba(130, 130, 130, 0.2) 33%
  );
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}

/* --=== Popup modal modifications ===-- */
/* added on 11.11.2024 */

.speaking-mobile-share-popup.smsp-main h4:not(h4:last-child) {
  font-size: 21px !important;
  line-height: normal !important;
  font-weight: 700;
  color: #02161e;
  text-align: center;
  font-family: "LeagueSpartanBold";
  display: block;
}
.speaking-mobile-share-popup p {
  font-family: "Eina01";
  font-weight: 600;
  line-height: 26px;
  font-size: 16px;
}
.addtoany_shortcode {
  margin-bottom: 0 !important;
}

.popup-container-wrapper p {
  font-family: "Eina01";
  font-weight: 600;
  line-height: 26px;
  font-size: 16px;
  margin-top: 0;
}

.no-coolab-title {
  font-family: "LeagueSpartanBold";
  font-size: 21px;
  line-height: normal;
  font-style: normal;
  font-weight: 700;
  color: #02161e;
  text-align: center;
  margin: 0;
  margin-bottom: 20px;
}
#popup1 p:first-child {
  margin-top: 0;
}
#popup1 p {
  font-family: "Eina01";
  font-weight: 600;
  line-height: 26px !important;
  font-size: 16px;
  text-align: center;
}
p.reset-nonthing-content {
  padding-bottom: 0 !important;
}
#popup1 .reset-confirm-inner {
  width: 90% !important;
}

/* added on 11.11.2024 */

@keyframes wave-lines {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@keyframes wave-squares {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.previe-box li a img:last-child {
  display: none;
}
.previe-box li.active a img:last-child {
  display: block;
}
.previe-box li.active a img:first-child {
  display: none;
}

.page-template-auth .wraper__footer {
  margin-top: 15px !important;
}
.notification-header.page-id-14
  .page-container
  .page-content
  .page-elementor
  .voiceover-login-link
  p {
  display: block !important;
}
#menu-footer-menu {
  display: none;
}

.page-id-154.notification-header .page-header {
  padding-top: 0;
}
.page-id-154 .page-header .page-header__title {
  margin-top: 25px;
}
.page-id-154 .page-content {
  margin-top: 10px;
}

button:disabled {
  opacity: 0.6;
}

button:disabled:hover {
  cursor: not-allowed;
}
.voiceover-signup-login-footer.new-footer-lnk {
  padding-top: 4pc;
}
.learning-school__login.voiceover-signup form .input_text.error-submit {
  border: 1px solid red;
}
.pass-wrap {
  position: relative;
}
span.help-txt {
  font-size: 12px;
}

span.help-txt.error {
  color: red;
}
.group-item span.error {
  font-size: 12px;
}
.learning-school__login.voiceover-signup form.error-submit button {
  pointer-events: none;
  opacity: 0.5;
}
@media (max-width: 600px) {
  /* .o-video-listing.speaking-more-videos,
    .o-video-listing{
       padding:0px 0px!important; 
       background: #eff0f1;
    }
    .o-video-listing .mobile-only.o-video-block{
        padding: 0px 12px;
        width: 100%;
        box-sizing: border-box;
    } */
  .speaking-listing-mobile-device {
    padding: 0px 0px !important;
    background: #eff0f1;
  }
  .speaking-listing-mobile-device .load-more-videos li .mobile-only {
    padding: 0px 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .speaking-listing-mobile-device .load-more-mix-videos li .mobile-only {
    padding: 0px 12px;
  }
}

#popup-feedback .wpcf7-submit {
  border: unset;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 18px;
  background: #ffa200;
  border-radius: 9px;
  cursor: pointer;
  font-family: "poppins";
}
#popup-feedback .wpcf7-form .wpcf7-response-output {
  margin: 1em 0;
  padding: 0.2em 10px;
  font-size: 15px;
}

/* ============ Tab responsive views =========== */
/*@media (min-width: 42.375rem) and (max-width: 64rem) {*/

@media (min-width: 37.55rem) and (max-width: 64rem) {
  /* top percent bar area */
  .tasks__top {
    padding: 0 18px !important;
  }
  .container-tasks__title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #f3f7fd;
    z-index: 99;
    padding: 20px 20px 5px 20px !important;
    font-size: 16px !important;
  }
  .tasks__top span.text {
    width: 50% !important;
  }
  .task-words-linner-wrap {
    width: 100% !important;
    padding-top: 11px !important;
  }
  .tasks__top .live-score {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px;
    position: absolute;
    top: 21px;
    right: 73px;
  }
  .tasks__top .live-score img {
    width: 31px !important;
    margin-top: 0px !important;
  }
  .tasks__top span.score {
    width: 87px !important;
  }
  .tasks__top_hd {
    margin-top: 97px;
  }
  .ty-learn_words .tasks__wrapper-content {
    padding: 0 20px;
  }

  /* card area with inner content */
  .task-words__word .title {
    margin-bottom: 20px;
  }
  .task-words__translation .img-wrap img {
    margin-bottom: 26px;
  }

  /* bottom heart icons set */
  .heart-icons-set {
    padding-bottom: 45px !important;
  }
  .heart-text {
    gap: 5px;
  }
  .review-complete-progress {
    position: absolute;
    bottom: 10px;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, 0px);
  }
  .heart-text {
    gap: 5px;
  }

  /* bottom button area */
  .single.single-lesson .task-words-buttons {
    width: 100% !important;
    padding: 0 20px !important;
    position: fixed !important;
  }
  .task-words-buttons .container-tasks__btn {
    padding: 10px 24px !important;
    width: max-content;
    min-height: 57px;
  }

  /* Second page */
  .select-correct-translation {
    min-height: auto;
    padding: 0px 7px 0px !important;
    margin-bottom: 30px;
  }
  .select-correct-translation__word .word {
    font-size: 40px !important;
    line-height: 40px !important;
    margin-bottom: 0px !important;
    font-weight: 600 !important;
    font-family: "Poppins";
  }
  .select-correct-translation__word .word img {
    width: 35px;
  }
  .select-correct-translation__translations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
    margin: 0;
    margin-bottom: 0;
    padding-inline: 10px;
  }
  .tasks__top_hd h3 {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  .select-correct-translation .translation-wrap {
    margin: 7px 5px;
    height: 100%;
  }
  .select-correct-translation .translation-wrap.correct-answer,
  .select-correct-translation .translation-wrap.wrong-answer,
  .select-correct-translation .translation-wrap:hover {
    transform: translateY(-3px) !important;
  }
  .select-correct-translation .translation-wrap img {
    height: 250px;
    margin-bottom: 0;
  }
  .container-tasks__btn {
    min-height: 57px;
  }
  img.cart_loading_image.next-loader {
    position: absolute;
  }

  /* third page fill the blank */
  .match-words-with-sentences__top,
  .match-words-with-sentences__bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
  }

  /* forth screen select object */
  .js-vb-container {
    width: 100%;
  }
  .image-selection,
  .audio-selection {
    gap: 24px;
  }
  .arrange-words__words {
    margin: 0;
    justify-content: center;
  }
  .image-selection__inner-wrap:hover {
    margin-top: 0;
  }
  .arrange-words__words {
    flex-wrap: wrap;
  }
  .audio-selection__item {
    width: 22%;
    height: 180px;
  }
  .images_with_audio .image-selection__inner-wrap {
    display: block;
    width: 48%;
    min-height: 350px !important;
  }
  .ty-match_images_with_audio .images_with_audio .image-selection__inner-wrap {
    width: 45%;
    min-height: 278px !important;
    margin: 20px 0;
  }
  .arrange-words__words .word .word__inner {
    display: block;
    width: 100% !important;
    height: 115% !important;
    object-fit: cover;
  }
  /*    .container-tasks__btn.try-question-button, .container-tasks__btn.btn-next{*/
  .container-tasks__btn.try-question-button {
    font-size: 25px;
    margin-top: -30px;
  }
  .arrange-words__words .word,
  .arrange-words__places-words .place-word {
    margin: 0;
  }
  .container-tasks__diagram {
    min-width: 298px;
  }

  /* fifth screen select object */
  .audio-selection__item .place-word {
    overflow: hidden;
  }
  .tasks__bottom {
    margin-bottom: 30px;
  }
}