* {
    line-height: 1.5;
}

.green-eiken-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 0;
    border-right: 1px solid #C8EDFC;
    border-left: 1px solid #C9FBDA;
    overflow: hidden;
}
ul.dotul {
    list-style: initial;
    margin: 0 3%;
}

.check-answer-examples-container {
    margin-top: 20px;
}
.check-answer-examples {
    
    background-color: blue;
    padding: 5px 10px;
    color: white;
}


.part2--ul input[type="checkbox"] {
    transform: scale(1.5);
    margin-top: -3px;
}

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

.listening_checkbox input[type="checkbox"] {
    transform: scale(1.5);
    margin-top: -3px;
}

.listening_checkbox .audio-play-icon {
    margin: 0;
}

.question input[type="checkbox"] {
    transform: scale(1.5);
    margin-top: -3px;
}

.question {
    display: flex;
}



.hidden-answer {
    margin-top: 5px;
    background-color: white;
    padding: 10px;
}

.hidden-answer div{
    display: flex;
}

.hidden-answer-show {
    color: red;
    margin-bottom: 10px;
}




.hidden-sample-teacher {
     margin-top: 10px;
    
}

.hidden-sample-teacher-show {
    display: flex;
    justify-content: flex-start;
    
}

.hidden-sample-teacher-items {
    background-color: white;
      padding: 10px;
}
.hidden-sample-teacher-items {
    margin-top: 10px;
    
}

.additional-vocabulary-examples {
    margin-top: 20px ;
    background-color: blue;
    padding: 5px 10px;
    color: white;
    
}

.part2-hidden-answer {
    background-color: white;
    padding: 10px;
}

.part2-hidden-answer-show div {
    margin: 10px auto;
}

/*/ Upper content/*/

.upper-container {
    background-color: white;
    
}

.upper-content{
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 0;
    border-right: 1px solid #C8EDFC;
    border-left: 1px solid #C9FBDA;
}

.upper--content-wrapper {
    margin: 0 auto;
    display: flex;
    background-color: lightgray;
    
}



.upper--start-small {



color: white;
width: 33%;
display: flex;
align-items: center;
padding: 20px 5px;
justify-content: center;
}


.ua1 {
   border-color: transparent transparent transparent red;
}

.ua2 {
    border-color: transparent transparent transparent gray;
}

.ua3 {
    border-color: transparent transparent transparent gray;
}

.uss1 {
    
    background-color: red;
    font-weight: bold;
   
}

.uss2 {
    
    background-color: gray;
    cursor: pointer;
    
}
  
.uss3 {
    
    background-color: gray;
    cursor: pointer;
   
    
    
}

.upper--arrow {
    border-right: 1px solid white;
}

.lesson-number {
    font-size: 24px;
    color: #004AAD;
    font-weight: bold;
    text-align: center;
    margin: 20px auto;
}

.header-jp {
    font-size: 16px;
     text-align: center;
     margin: 10px auto;
}

.lower--content-wrapper {
    display: flex;
    margin: 0 auto;
}

.lower--start-small {
color: black;
width: 33%;
display: flex;
align-items: center;
padding: 20px;
}

.part1-title, .part2-title, .part3-title {
    font-size: 20px;
    color: #004AAD;
    font-weight: bold;
    text-align: center;
}

.part1-sub-title, .part2-sub-title {
    color: black;
    text-align: center;
    margin: 10px auto;
}

.part1--ul, .part2--ul, .part3--ul {
    margin: 30px 8%;
}

.part1--ul, .part2--ul, .part3--ul {
    display: flex;
    flex-direction: column;
    
}

.part1--ul div, .part2--ul div, .part3--ul div  {
    display: flex;
    flex-direction: flex-start;
    align-items: flex-start;
    gap: 10px;
    margin: 10px;
}



.part1--ul--ul, .part2--ul--ul, .part3--ul--ul {
    margin: 10px 5%;
    margin-bottom: 30px;
}

.part3--ul--ul {
    margin: 0 8%;
}
input[type="radio"] {
    margin-top: 7px;
   
}

input[type="checkbox"] {
    transform: scale(1.5);
    margin-top: 6px;
    
}

.part2--wpm-play  {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 5px;
    gap: 10px;
    
}

.part2--wpm-data{
    text-align: center;
    margin: 5px;
}

.wpm-play-container {
    background-color: #06B0F0;
    color: white;
    padding: 5px 10px;
}

.part2--data {
    text-align: center;
    margin: 30px 8%;
}

.part2--data p {
    margin: 20px auto;
    text-align: justify;
}

.part2--data span {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 30px;
}

.part3--lq-play {
    display: flex;
    justify-content: center;
    margin: 10px 5px;
    gap: 10px;
    
}

.lq-play-container {
    background-color: #FFC100;
    color: white;
    padding: 5px 15px;
    border-radius: 16px;
    text-align: center;
}

.check--answers {
    height: 2px;
    background-color: #4472C4;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 30px auto 60px auto;
}

.check--answers span {
    text-align: center;
    padding: 5px 85px;
    border-radius: 25px;
    background-color: #4472C4;
    font-size: 24px;
    font-weight: bold;
    color: white;
    
}

.check--answers-result-container {
    margin: 40px 8%;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.check--answers-result {
    margin: 0 2.3%;
    
    
}
.check--answers-result li {
    margin: 5px auto;
}

.part1--show-answer, .part2--show-answer, .part3--show-answer  {
    background-color: #E2F0D9;
    margin: 20px 8%;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.pair--answers {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #004AAD;
}

.part1--ul-answers li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.part1--ul-show, .part2--ul-show, .part3--ul-show {
    margin: 10px
}
.part1--ul--ul-show, .part2--ul--ul-show {
    margin: 10px 3%;
    margin-bottom: 30px;
}

.part2--ul--ul-show {
  
    width: 100%;
}


.part2-jp-translation {
    background-color: #E2F0D9;
    padding: 10px;
}


.part3--ul-show {
    display: flex;
    flex-direction: column;
}



.part3--ul-show .column--divs {
    display: flex;
    flex-direction: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin: 10px;
}

.column--divs-answer {
    margin: 10px 8%;
}

.part3--ul-show {
    margin: 10px 8%;
    margin-bottom: 30px;
}

.part3--ul--ul-show {
    margin: 10px 8%;
    margin-bottom: 30px;
}

.eiken-important-message {
    margin: 30px auto;
    border: 1px solid red;
    padding: 20px;
}

.eiken-title {
    color: #004AAD;
    text-align: center;
}

.play-words-examples-container {
    margin: 20px auto;
}



.horizontal-answers {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
}

   .eiken-important-message a{
    text-decoration: none;
}

.eiken-important-message div:first-child {
    margin: 0 2%;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.eiken-test-type2{
    display: flex;
    flex-direction: column;
}

.eiken-test-type2-title {
    display: flex;
    gap: 10px;
    font-weight: bold;
    font-size: 24px;
    margin: 10px 5%;
    align-items: flex-start;
    justify-content: flex-start;
}

.eiken-test-type2-title input[type="checkbox"] {
    display: flex;
    margin-top: 8px;
    margin-right: 8px;
    margin-left: -2px;
    align-items: flex-start;
    justify-content: flex-start;
}

.eiken-test-type2-title .refresh-icon {
    margin-top: 2px;
}


.eiken-test-type2-items {
    display: flex;
    justify-content: flex-start;
    margin: 10px 5%;
    
}

.jp-text--show-translate {
    background-color: #E2F0D9;
    padding: 10px;
    margin: 10px auto;
}

.step2-training-vocabulary-section {
    max-width: 900px;
    
}

.step2-training-vocabulary-section .title {
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.step2-training-vocabulary-section .important-i {
            padding: 2px 24px;
            border: none;
            transition: background-color 0.3s, color 0.3s;
            border-radius: 20px;
            background: linear-gradient(to left, #FF0000, #FF3800 );
            font-size: 18px;
            color: white;
            position: relative;
            text-align: center;
            font-weight: bold;
            margin-top: 40px;
}


.step2-training-vocabulary-section  .subText {
    margin: 60px 3% 0 3% ;
    line-height: 1.5;
}

.step2-training-vocabulary-section  .subText li {
    margin-left: 15px;
    
}



.step2-training-vocabulary-section  .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle;
              margin-left: -15px;
              
            }
            
            
.step2-training-vocabulary-section .gccimg {
    position: absolute;
    width: 30%;
    right: -270px;
    top: 300px;
}      


.step2-training-vocabulary-section .play-btns-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin: 80px 0;
        }

.step2-training-vocabulary-section  .play-audio-buttons {
            padding: 5px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            background: linear-gradient(to right, #F7931F, #ffc482);
            border-radius: 20px;
            font-size: 14px;
            color: black;
    
}

.step2-training-vocabulary-section  .play-audio-buttons:hover {
    
            background: linear-gradient(to right, #F7931F, #F7931F);
    
}

.step2-training-vocabulary-section .ul-items {
    
    margin: 0 8%;
}
.step2-training-vocabulary-section .ul-items li{
    
           display: flex;
            line-height: 1.5;
            margin: 20px auto;
            flex-direction: column;
}

.questions-voc-container {
            display: flex;
            line-height: 1.5;
            margin: 20px auto;
}

.questions-voc-container-words{
    display: flex;
            line-height: 1.5;
            margin: 20px auto;
}



    .step2-training-vocabulary-section .refresh-icon,
    .step2-training-vocabulary-section .audio-play-icon,
    .step2-training-vocabulary-section .jp-text,
    .step2-training-vocabulary-section .en-text {
        margin-right: 10px;
    }

    .step2-training-vocabulary-section .jp-text,
    .step2-training-vocabulary-section .en-text {
        flex-grow: 1; 
    }
    
.step2-training-vocabulary-section .refresh-icon {
            margin-left: 10px;
        }
        
.step2-training-vocabulary-section input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 6px;
        }

.section5 .ul-items li {
    align-items: flex-start;
    display: flex;
    line-height: 1.5;
    margin: 20px auto;
}

.section5  input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 8px;
        }
.section5  .refresh-icon {
    margin-top: 0;
}
.section5  .refresh-icon,
    .section4 .audio-play-icon,
    .section4 .jp-text,
    .section4 .en-text {
        margin-right: 10px;
    }
.jp--text-container {
    display: flex;
    flex-direction: column;
     justify-content: flex-start;
}

.en--text-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.question-description {
    font-weight: bold;
    margin: 10px 0;
}

.eiken-lesson-type3 {
    margin: 20px 8%;
}

#init-hide-lower-data {
   cursor: pointer;
}
#hide-lower-data {
    display: none; 
    
  }
  
.part2--instruction {
    margin: 0 8%;
    font-weight: bold;
}

.spacer {
    margin: 5px auto;
}

.stop--buttons {
    color: red;
}

.step1_type2_listening_q {
    margin: 0 4% !important;
    
}


.disabled-span {
    color: #a9a9a9; /* Dim the text color */
    cursor: not-allowed; /* Show a 'not-allowed' cursor */
    opacity: 0.5; /* Make the span look faded */
    pointer-events: none; /* Prevent click events */
}

.vocabulary--part1-step2 {
    margin: 0 5%;
}


.questions-voc-container-words {
    display: flex;
    line-height: 1.5;
    margin: 10px 8%;
}

.play-words-examples-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 7%;
    width: 100%;
    gap: 10px;
}

.listening-btns {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    
    margin: 50px 5% 10px 5%;
}

.listening--jp-en {
    margin: 0 8%;
    margin-bottom: 20px;
}

.listening-btns .refresh-icon{
    margin-left: 10px;
}

.listening-btns input[type="checkbox"]  {
    margin-left: 0;
    margin-top: 6px;
}

.vocm--play-audio-buttons {
            padding: 5px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            background: linear-gradient(to right, #F7931F, #ffc482);
            border-radius: 20px;
            font-size: 14px;
            color: black;
    
}

.vocm--play-audio-buttons:hover {
    
            background: linear-gradient(to right, #F7931F, #F7931F);
    
}

.listening--step1 {
    display: flex;
    gap: 10px;
    margin: 20px 3%;
    
}

.listening_type2_answers_container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.column--divs-answers-questions {
    display: flex;
    flex-direction: column;
    margin: 5px 3%;
}

.temp_num {
    margin-right: 10px;
}

.reading--step2-checkbox-container {
    display: flex;
    justify-content:  flex-start;
    align-items: flex-start;
    gap: 5px;
}


.imgcontainer {
    max-width: 816px;
    padding: 5px;
    border: 1px solid white;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box; 
    justify-content: center;
    gap: 7px;
}

.imgcontainerx {
    border: 1px solid gray;
    margin: 20px auto;
}

.img-items {
    border-bottom: 1px dotted gray;
    flex: 0 0 49%; 
    box-sizing: border-box; 
    display: flex;
    position: relative;
}



.img-items img {
    width: 100%;
    
}

.img-items span {
    position: absolute;
    font-style: italic;
    padding: 0px 7px;
    background-color: #F4F1ED;
    border-radius: 12px;
    top: 2px;
    left: 2px;
}

.listening--step1-situation {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 0 !important;
    margin-left: -2px !important;
    
}

.listening--step1-situation .sitn-bold {
    font-weight: 600;
    font-size: 18px;
    text-decoration: italic;
}

.lvl2-interview-answer {
    margin: 0 8%;
}

.level3_pieces_container {
    
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    border: 1px solid black;
    
}

.level3_pieces{
    
    margin: 0 3%;
    margin-bottom: 40px;
    padding: 20px;
}

.level3_line_breaks {
    margin: 25px auto;
}

.level3_playeach_items_container{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 2%;
    border: 1px solid black;
}

.level3_items_controls {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 2%;
}

.nextpiece_break {
    border: 1px solid transparent;
    margin-bottom: 40px;
}

.tview--step3-vocabulary {
   
    margin: 70px 5%;
}

.tview--step3-vocabulary .voca-step3-questions {
    margin: 10px auto;
}

.teachersbutton {
    
    padding: 5px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            background: linear-gradient(to right, blue, #ffc482);
            border-radius: 20px;
            font-size: 14px;
            color: white;

}

.voca-step3-answers {
    margin: 5px  3%;
}
.tview--step3-reading-qan {
    margin: 20px 5%;
}

.tview--step3-reading-openq {
     margin: 20px 5%;
}

.reading_answer_parts-container{
    margin: 10px auto;
}

.reading_answer_parts {
    margin: 5px 3%;
}

.reading--part3-header {
    margin: 20px 5%;
    margin-top: 40px;
    font-size: 30px;
}

.voca-step3-answers-explain, .reading-step3-answers-explain {
    color: black;
    background-color: rgba(253, 248, 247, 0.3);
    padding: 10px 15px;
    border-radius: 3px;
}

.reading-open-title {
    font-size: 18px;
}

#listening_stopbtn {
    cursor: pointer;
}

.redanswer {
    color: red;
}