.example-page .notice-title {
  text-align: center;
  margin-top: 50px; }
  .example-page .notice-title h1 {
    margin: 50px 0 30px;
    color: #fff;
    font-size: 42px;
    text-align: center; }
  .example-page .notice-title .lazy {
    position: static;
    margin: auto;
    display: none !important; }
  .example-page .notice-title.error .error,
  .example-page .notice-title.success .success {
    display: block !important; }

.example-page .explain h4 {
  text-transform: uppercase;
  margin-bottom: 10px; }

.example-page .explain p {
  	margin: 0;
  	padding-left: 20px;
	font-size: 20px;
  	font-style: italic;
  	font-family: 'Myriad Light'; }

.example-page .test, .example-page .again, .example-page .next {
  color: #fff;
  background: #F08B01;
  width: 300px;
  height: 50px;
  border-radius: 50px;
  border: none;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
  margin-right: auto;
  margin-left: auto; }
  .example-page .test:focus, .example-page .again:focus, .example-page .next:focus {
    outline: none; }

.example-page .again, .example-page .next {
  display: none; }

.example-page .step {
  display: none; }
  .example-page .step.active {
    display: block; }

.example-page .answer-title {
  font-size: 32px;
  color: #fff;
  font-family: 'Myriad Bold'; }

.questions-container.translate-sentences {
  max-width: 810px;
  margin: auto; }

.questions-container.tested .word {
  background-color: #C6E50E; }
  .questions-container.tested .word.wrong {
    background-color: #E8425A; }

.translate_sentence-page .full-sentences {
  text-align: center;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  min-height: 125px;
  margin: 40px 0; }

.translate_sentence-page .test, .translate_sentence-page .again, .translate_sentence-page .next {
  margin: 90px auto 0; }

.translate_sentence-page .word-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.translate_sentence-page .word {
  width: calc(25% - 20px);
  display: inline-flex;
  height: 50px;
  border-radius: 50px;
  justify-content: center;
  align-items: center; }

.translate_sentence-page .split-text .word {
  color: #000;
  background-color: #F9E815;
  border: 2px solid white;
  margin-bottom: 25px; }

.translate_sentence-page .split-text .step-content {
  padding: 55px 45px; }

.translate_sentence-page .step-content {
  background-color: #E8F4F7;
  min-height: 265px;
  border-radius: 34px;
  margin: auto;
  display: flex;
  align-items: center;
  position: relative; }
  .translate_sentence-page .step-content.answer-false {
    border: solid 4px #D81416; }
  .translate_sentence-page .step-content.answer-true {
    border: solid 4px #C7E519; }

  .translate_sentence-page .typing-text-box>span{
	  font-size: 22px!important;
  }

  .translate_sentence-page .step-content .typing-text-box {
    width: 100%;
    height: 100%;
    min-height: 100px;
    outline: none;
    padding: 30px 50px;
    font-size: 26px;
    color: #8E1C76;
    font-family: 'Myriad Bold';
    text-align: center; }
  .translate_sentence-page .step-content .lazy {
    position: absolute;
    left: calc(50% - 75px);
    box-shadow: 0 0 10px -3px;
    border-radius: 50%;
    display: none !important; }
    .translate_sentence-page .step-content .lazy.active {
      display: block !important; }
  .translate_sentence-page .step-content .btn-suggest {
    display: inline-block;
    right: -15px;
    left: unset;
    top: -25px;
    width: 55px;
    height: 55px;
    background: #fff; }

.translate_sentence-page .questions-action {
  margin-top: 50px; }

.translate_sentence-page .questions-status.answer-false, .translate_sentence-page .questions-status.answer-true {
  margin-top: -60px;
  position: relative; }

.translate_sentence-page .rewrite-text .step-content, .translate_sentence-page .rewrite-check .step-content {
  min-height: auto;
  background-color: transparent;
  position: relative;
  margin-top: -10px;
  padding-bottom: 10px; }
  .translate_sentence-page .rewrite-text .step-content:before, .translate_sentence-page .rewrite-check .step-content:before {
    background: #fff;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    top: 40%;
    left: 0; }

.translate_sentence-page .rewrite-text .text-list, .translate_sentence-page .rewrite-check .text-list {
  background-color: rgba(0, 0, 0, 0.3);
  width: 90%;
  margin: auto;
  padding: 15px 35px 30px;
  border-radius: 40px; }
  .translate_sentence-page .rewrite-text .text-list h4, .translate_sentence-page .rewrite-check .text-list h4 {
    font-size: 32px;
    color: #fff;
    margin: 5px auto 25px;
    padding-left: 20px; }
  .translate_sentence-page .rewrite-text .text-list .push-text, .translate_sentence-page .rewrite-check .text-list .push-text {
    min-height: 140px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    border: 2px solid #F7AC16;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
    .translate_sentence-page .rewrite-text .text-list .push-text.answer-false, .translate_sentence-page .rewrite-check .text-list .push-text.answer-false {
      border-color: #D81416; }
    .translate_sentence-page .rewrite-text .text-list .push-text.answer-true, .translate_sentence-page .rewrite-check .text-list .push-text.answer-true {
      border-color: #C7E519; }
    .translate_sentence-page .rewrite-text .text-list .push-text .word, .translate_sentence-page .rewrite-check .text-list .push-text .word {
      border: none;
      width: auto;
      height: auto;
      background: transparent;
      padding-right: 3px;
      margin-bottom: 0;
      color: #8E1C76;
      font-weight: bold;
      font-style: italic; }

.translate_sentence-page .rewrite-text .word, .translate_sentence-page .rewrite-check .word {
  border: 4px solid #fff;
  background-color: #F7AC16;
  margin-bottom: 20px; }

.translate_sentence-page .push-check {
  max-width: 600px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .translate_sentence-page .push-check .word {
    background-color: white;
    border-color: #B5D919; }
    .translate_sentence-page .push-check .word.wrong {
      border-color: #D3455C; }

.translate_sentence-page.hint .questions-status {
  display: none; }

.translate_sentence-page textarea {
  border: none;
  width: 100%;
  display: block;
  resize: none;
  background-color: transparent;
  font-size: 16px;
  padding: 50px 40px; }
  .translate_sentence-page textarea:focus {
    outline: none; }
  .translate_sentence-page textarea::placeholder {
    font-style: italic;
    color: #262626;
    font-size: 16px;
    font-family: 'Myriad Light', serif; }

.choose_answer-page.tested .questions {
  display: none; }

.choose_answer-page .test, .choose_answer-page .again, .choose_answer-page .next {
  margin: 50px auto; }

.choose-answer {
  color: #fff; }
  .choose-answer h2 {
    font-size: 18px;
    text-align: center;
    margin-top: 0; }
    .choose-answer h2:before {
      font-size: 32px;
      content: counter(questions-first-counter) ". ";
      display: inline-block;
      padding-right: 5px;
      font-family: 'Myriad Bold'; }
  .choose-answer .questions-list {
    padding: 50px 0;
    counter-increment: questions-first-counter; }
    .choose-answer .questions-list:first-child {
      padding-top: 0; }
    .choose-answer .questions-list:nth-child(even) {
      background: rgba(0, 0, 0, 0.1); }
  .choose-answer .answer-list {
    counter-increment: answer-first-counter;
    display: flex;
    max-width: 950px;
    margin: 30px auto;
    padding: 40px 60px;
    background-color: #fff;
    border: 4px solid #C4D82D;
    color: #000;
    align-items: center;
    border-radius: 40px;
    flex-direction: column; }
    .choose-answer .answer-list > * {
      width: 100%; }
    .choose-answer .answer-list span {
      text-decoration: underline; }
    .choose-answer .answer-list .fix-answer, .choose-answer .answer-list span {
      font-size: 24px;
      color: #C6E50E;
      font-weight: bold;
      font-family: "Myriad Bold"; }
    .choose-answer .answer-list .fix-answer {
      margin: 0;
      padding: 0 0 5px 0;
      border-bottom: 1px solid #000; }
    .choose-answer .answer-list .text-answer:before {
      font-size: 32px;
      content: counter(answer-first-counter) ". ";
      display: inline-block;
      padding-right: 5px;
      font-weight: bold;
      font-family: "Myriad Bold"; }
    .choose-answer .answer-list.wrong {
      border-color: #E21010; }
      .choose-answer .answer-list.wrong span {
        color: #E21010; }
  .choose-answer .answer-container {
    max-width: 950px;
    margin: 30px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  .choose-answer .answer {
    counter-increment: my-sec-counter;
    position: relative;
    width: calc(50% - 25px); }
    .choose-answer .answer .checkmark {
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer; }
    .choose-answer .answer .checkmark:checked + .text {
      background-color: #C6E50E;
      border: 2px solid #fff; }
    .choose-answer .answer .text {
      display: flex;
      align-items: center;
      border: 2px solid #C6E50E;
      background-color: white;
      color: #000;
      padding: 30px 0 30px 85px;
      border-radius: 20px;
      margin: 12.5px 0; }
      .choose-answer .answer .text:before {
        content: counter(my-sec-counter, lower-alpha) ". ";
        text-transform: uppercase;
        display: block;
        font-weight: bold;
        font-family: "Myriad Bold";
        padding-right: 5px; }

.conjugation_verb-page.tested .questions {
  display: none; }

.conjugation_verb {
  max-width: 1000px;
  margin: 0 auto; }
  .conjugation_verb .fix-answer {
    font-family: "Myriad Bold";
    font-size: 24px;
    display: none; }
    .conjugation_verb .fix-answer.active {
      display: block; }
    .conjugation_verb .fix-answer img {
      width: 30px;
      margin: 0 15px; }
    .conjugation_verb .fix-answer .wrong-text {
      color: #E21010; }
    .conjugation_verb .fix-answer .right-text {
      color: #C4D82D; }
  .conjugation_verb #reset_button {
    display: none; }
  .conjugation_verb .questions-list {
    counter-increment: questions-first-counter;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 35px 45px;
    border-radius: 35px;
    margin: 80px 0; }

.conjugation_verb .answer-questions .questions-list > div > p {
	justify-content: left;
}

.conjugation_verb .answer-questions .questions-list > div > p:not(:first-child) {
	margin-top: unset;
}


.conjugation_verb .answer-questions .questions-list > div > p:not(:last-child) {
	margin-bottom: unset;
}

.conjugation_verb .questions-list > div > p {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 30px;
  /* white-space: pre; */
}
.conjugation_verb .answer-questions .questions-list > .question-typing > p:has(input) {
	/* flex-wrap: nowrap; */
  /* white-space: pre; */
}

.conjugation_verb .answer-questions .questions-list > .question-typing > .text_question_grammar1:has(input) {
  display: block;
}

.conjugation_verb .questions-list > div > p:first-child:before {
	content: counter(questions-first-counter) ". ";
	text-transform: uppercase;
	display: block;
	font-weight: bold;
	font-size: 32px;
	font-family: "Myriad Bold";
	padding-right: 5px;
}

    .conjugation_verb .questions-list .answer {
      border: none;
      border-bottom: 1px solid #000;
      margin: 0 5px;
      background-color: transparent;
      font-family: "Myriad Bold";
      width: 150px;
      font-size: 24px;
      height: 25px;
      text-align: center;
      display: inline-block; }
  .conjugation_verb .test, .conjugation_verb .next, .conjugation_verb .again {
    margin: 20px auto; }
  .conjugation_verb .notice-title {
    display: none; }
  .conjugation_verb .answer-questions .questions-list {
    border: 4px solid transparent;
    position: relative;
    margin: 40px 0; }
    .conjugation_verb .answer-questions .questions-list .lazy.wrong, .conjugation_verb .answer-questions .questions-list .lazy.success {
      position: absolute;
      top: -50px;
      left: calc(50% - 45px); }
    .conjugation_verb .answer-questions .questions-list .lazy.wrong {
      display: none !important; }
    .conjugation_verb .answer-questions .questions-list .lazy.success, .conjugation_verb .answer-questions .questions-list .lazy.wrong {
      display: none !important; }
    .conjugation_verb .answer-questions .questions-list.wrong {
      margin: 80px 0;
      border-color: #E21010; }
      .conjugation_verb .answer-questions .questions-list.wrong .lazy.wrong {
        display: block !important; }
      .conjugation_verb .answer-questions .questions-list.wrong .lazy.success {
        display: none !important; }
    .conjugation_verb .answer-questions .questions-list.true {
      margin: 80px 0;
      border-color: #C4D82D; }
      .conjugation_verb .answer-questions .questions-list.true .lazy.wrong {
        display: none !important; }
      .conjugation_verb .answer-questions .questions-list.true .lazy.success {
        display: block !important; }
  .conjugation_verb .answer-questions .again {
    display: block; }
  .conjugation_verb .answer-questions .answer {
    width: 150px;
    padding: 0 20px;
    border-color: #797B7C;
    height: 28px; }
    .conjugation_verb .answer-questions .answer.true {
      pointer-events: none;
      color: #8DD546; }
    .conjugation_verb .answer-questions .answer.wrong {
      pointer-events: none;
      color: #E21010; }
  .conjugation_verb .explain {
    display: none; }
    .conjugation_verb .explain h4 {
      font-family: "Myriad Bold";
      font-size: 24px; }
    .conjugation_verb .explain p {
      font-size: 22px;
      font-family: 'Myriad Light';
      font-style: normal; }
  .conjugation_verb .final-items .explain {
    display: block; }

.fill_word-page.window {
  position: relative; }
  .fill_word-page.window:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #4B4B4B;
    z-index: 1; }
  .fill_word-page.window .space {
    z-index: -1; }

.fill_word-page.tested .full-sentences .space.wrong {
  background-color: #E74A61; }

.fill_word-page.checked .questions {
  display: none; }

.fill_word {
  max-width: 1000px;
  margin: 0 auto; }
  .fill_word .full-sentences {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 70px 100px;
    margin: 50px auto 70px;
    border-radius: 50px; }
    .fill_word .full-sentences p {
      line-height: 35px;
      margin: 0; }
    .fill_word .full-sentences .space {
      counter-increment: answer-first-counter;
      background: #F9E815;
      min-width: 125px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      border: 2px solid #fff;
      border-radius: 7px;
      position: relative;
      padding: 0 5px 0 3%;
      top: 5px;
      font-weight: bold;
      justify-content: center;
      cursor: pointer; }
      .fill_word .full-sentences .space.active {
        box-shadow: 0 0 20px 5px #fff;
        background-color: white;
        z-index: 1; }
      .fill_word .full-sentences .space.has-text {
        top: -5px; }
      .fill_word .full-sentences .space:before {
        content: counter(answer-first-counter);
        font-weight: bold;
        padding: 0 5px;
        position: absolute;
        left: 0; }
      .fill_word .full-sentences .space:after {
        content: '';
        width: 1px;
        height: 15px;
        background-color: #000;
        position: absolute;
        display: block;
        left: 18px; }
  .fill_word .all-answer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    .fill_word .all-answer .text-answer {
      border: 4px solid #FFFFFF;
      background-color: #F9E815;
      padding: 10px 25px;
      border-radius: 25px;
      margin-right: 20px;
      z-index: 1;
      font-weight: bold;
      cursor: pointer; }
      .fill_word .all-answer .text-answer.choose {
        opacity: 0.5; }
  .fill_word .questions-list {
    counter-increment: questions-first-counter;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 35px 45px;
    border-radius: 35px;
    margin: 80px 0;
    position: relative;
    border: 4px solid #C4D82D; }
    .fill_word .questions-list .lazy {
      position: absolute;
      top: -50px;
      left: calc(50% - 45px); }
      .fill_word .questions-list .lazy.wrong {
        display: none !important; }
    .fill_word .questions-list .explain {
      border-top: 1px solid #000; }
    .fill_word .questions-list.wrong {
      border-color: #E21010; }
      .fill_word .questions-list.wrong .lazy.wrong {
        display: block !important; }
      .fill_word .questions-list.wrong .lazy.success {
        display: none !important; }
    .fill_word .questions-list > p {
      display: flex;
      align-items: baseline;
      justify-content: left;
      flex-wrap: wrap;
      margin-bottom: 30px;
      font-family: "Myriad Bold";
      font-size: 32px; }
      .fill_word .questions-list > p img {
        margin: 0 10px; }
      .fill_word .questions-list > p .right-text {
        color: #FF0000; }
      .fill_word .questions-list > p:before {
        content: counter(questions-first-counter) ". ";
        text-transform: uppercase;
        display: block;
        font-weight: bold;
        padding-right: 5px; }

.listen_and_write #video-controls {
  background: unset; }

.listen_and_write .listen_and_write-box .custom-textarea .pre-text {
  font-style: italic; }

.listen_and_write .listen_and_write-box .custom-textarea .listen_and_write-answer[contenteditable="false"] .true {
  color: #388C02; }




  .container{
    display: flex;
    justify-content: center;
    position: relative;
  }
  .audio-player {
    width: 550px;
    /* margin: 20px auto; */
    margin-right: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
}
.transcript {
  margin: 10px 0;
}
textarea {
  width: 100%;
  height: 50px;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
}
.control-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
.btn {
  width: 40px;
  height: 40px;
  background-color: #00aaff;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.btn-hint{
  width: 200px;
  height: 50px;
  background-color:none; 
}
/* .btn:hover {
  background-color: #0088cc;
} */
.audio-controll{
  
  width:100%
}
.transcript textarea{
  margin-top: 20px;
  height: 150px;
  background-color: #ddd;
  padding: 10px 5px;
}
.hint{
  width: 150px;
  height: auto;
  cursor: pointer;
}
.icon-hint{
  position: absolute;
  top: 0px;
  right: -158px;
  
}
.element-hint{
  
  height: 30px !important;
  width: 60px;
  background-color: #00aaff !important;
  border: 1px solid white;
  border-radius: 10px;
  margin-right: 10px;
  
}
.listen_and_write-box .custom-textarea {
  margin: 20px  0px !important;
}
.example-page #btn-check {
  width: 250px;
}
.example-page .btn {
  width: 250px;
}
.border-box{
  min-width: 0px !important;
}
/* .suggest-word .suggest-items {
  height: 0px !important;
} */