br {
    display: block; /* Reset the display property to its initial value */
    content: ''; /* Reset the content property to an empty string */
    margin: 0; /* Reset the margin property to zero */
    padding: 0; /* Reset the padding property to zero */
    border: none; /* Reset the border property to none */
    clear: none; /* Reset the clear property to none */
}

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


.divider {
            padding: 10px 24px;
            border: none;
            transition: background-color 0.3s, color 0.3s;
            border-radius: 20px;
            background: linear-gradient(to left, #C8EFFE, #C0C0C0 );
            font-size: 14px;
            color: black;
            position: relative;
        }
        
.dividerred {
            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: 40px auto;
        }
        
        hr {
            margin: 80px 0;
            text-align: center;
            border: 1px solid #F0F0F0;
            background-color: transparent;
        }
h3 {
    padding: 0;
    margin: 0;
}

.km-highlightText {
    font-weight: bold;
    margin: 0;
}

#sec3ContentContainer {
    position: relative;
}
section {
    position: relative;
    margin: 60px auto;
}

.test-ul-items {
    
}


#stopButton, #stopButton2 {
    display: none;
}

.stop-audio-buttons {
            padding: 5px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.5s, color 0.3s;
            background: linear-gradient(to right, #8B0000, #FF6347);


            border-radius: 20px;
            font-size: 14px;
            color: pink;
            
    
}

.stop-audio-buttons-sub {
            padding: 3px 15px;
            border: none;
            cursor: pointer;
            transition: background-color 0.5s, color 0.3s;
            background: linear-gradient(to right, #8B0000, #FF6347);


            border-radius: 20px;
            font-size: 14px;
            color: pink;
            
}

.stop-audio-buttons:hover, .stop-audio-buttons-sub:hover {
    
            background: linear-gradient(to right, #FF0000, #FF9999);
            color: gray;
    
}



.section1 .lesson-topic {
    position: relative;
    
    
    
}

.highlightText {
                font-weight: bold;
                margin-top: 20px;
            }

.lesson-topic-sep {
    position: relative;
    padding: 30px 5%;
    border: 2px dashed #C8EFFE;
    margin: 0 3%;
    margin-bottom: 30px;
}



.lesson-topic-sep img {
            position: absolute;
            margin-top: -45px;
            left: -20px;
            width: 120px;
}

.lesson-topic-sep .point_sep {
    margin: 20px;
    font-weight: 500;
    
}


.speed_control_items {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 470px;
    margin: 10px 8%;
    position: relative;
}

.speed_control_items label {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 2%;
}

.speed_control_items input {
    flex: 0 0 auto;
    margin-left: 10px;
}

.speed_control_items  .show-speed-val {
           position: absolute;
           font-size: 20px;
           color: #1E8AD9;
           right: -80px;
       }


.audio-speed-control {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    margin: 20px 10% -40px 10%;
    flex-direction: column;
}


        
.audio-speed-control .audiolabel {
            
            padding: 2px 20px;
        }
        
        

       
/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 15rem;
    height: 1px;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
   
   border-radius: 0.5rem;
   height: 1px;  
   box-shadow: 0 0 5px #C8EDFC;
   
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -15px; /* Centers thumb on the track */

   /*custom styles*/
   background: linear-gradient(to left, #3498DB, #0078D7 );
   height: 2rem;
   width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {   
  border: 1px solid #053a5f;
  outline: 3px solid #3498DB;
  outline-offset: 0.125rem; 
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
   
   border-radius: 0.5rem;
   height: 1px;
   box-shadow: 0 0 5px #C8EDFC;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
   border: none; /*Removes extra border that FF applies*/
   border-radius: 0; /*Removes default border-radius that FF applies*/

   /*custom styles*/
   background: linear-gradient(to left, #3498DB, #0078D7 );
   height: 2rem;
   width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid #053a5f;
  outline: 3px solid #3498DB;
  outline-offset: 0.125rem; 
}

.pauseSlider {
    transform: scaleX(-1);
    background: linear-gradient(to right, #15C30B, #FF0B00 ) !important;
}

.speedSlider {
    background: linear-gradient(to left, #15C30B, #FF0B00 ) !important;
}

.sec2-charf-ref-container img {
    max-width: 60px;
}

.sec2-charm-ref-container img {
    max-width: 60px;
}

.section2 img {
    position: absolute;
    width: 30%;
    right: -280px;
    top: -100px;
}       

.section2 .show-speed-info {
    display: none;
}

.section3 .title {
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section3 .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;
}

.important-message {
    border: 1px solid red;
    margin-top: -20px;
    margin-bottom: 20px;
    padding: 10px 0 20px 0;
}

.important-i-r {
    font-weight: bold;
    color: #C00000;
}

.important-i-lb {
    font-weight: bold;
    color: #287CCA;
}

.important-i-h {
    font-weight: bold;
    color: #004AAD;
}



.important-i-3 {
    margin: auto 5%;
    padding: 30px 0 10px 0;
}

.subText-i {
    margin: 0 3% ;
    line-height: 1.5;
    border-bottom: 2px dashed #4472C4;
    padding: 30px 0;
}

.subText-i-n {
    margin: 0 3% ;
    line-height: 1.5;
    border-bottom: 2px dashed #4472C4;
    padding: 30px 0;
}

.subText-i .i-n, .subText-i-n .i-n {
    margin: 15px auto;
}

.subText-n-n {
    margin: 0 2%;
}

.subText-i li {
    margin-left: 15px;
}

.subText-i li::before {
      content: '•'; 
      color: red; 
      display: inline-block;
      margin-right: 8px; 
      vertical-align: middle;
      margin-left: -15px;
}
.mini-s-record {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 10px 5% 10px 15%;
    color: #002060;
    border-bottom: 1px solid #002060;
    margin: 0;
    box-shadow: 0 8px 4px -6px rgba(0, 32, 96, 0.2);

}

.section3  .subText {
    margin: 60px 3% 0 3% ;
    line-height: 1.5;
}

.section3  .subText li {
    margin-left: 15px;
    
}

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


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

.section3  .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;
    
}

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



.section3 .ul-items {
    
    margin: 0 8%;
}
.section3 .ul-items li{
    
           display: flex;
            line-height: 1.5;
            margin: 20px auto;
}



    .section3 .refresh-icon,
    .section3 .audio-play-icon,
    .section3 .jp-text,
    .section3 .en-text {
        margin-right: 10px;
    }

    .section3 .jp-text,
    .section3 .en-text {
        flex-grow: 1; 
    }

.section3 .refresh-icon {
            margin-left: 10px;
        }
        
.section3 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 6px;
        }
        

        
        
.section4 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}


.section4 .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;
}

.section4  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section4  .subText li {
    margin-left: 15px;
    
    
}


.section4 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }
            
.section4 .adjustms {
    position: absolute;
    width: 30%;
    right: -28%;
    top: 0;
}


       
.section4 .enScriptHideContent {
          display: flex;
          flex-direction: column;
          height: 100%;
          margin: 70px 0 0 0;
          
        }
        
.section4 .toggle-container .toggle-label {
    
          align-self: center;
          padding: 5px 15px;
          background: linear-gradient(to left, #C8EFFE, #C0C0C0 );
          border-radius: 20px;
          color: black;
          cursor: pointer;
        }
        
.section4 .toggle-container .toggle-label:hover {
            background: linear-gradient(to left, #C0C0C0, #C0C0C0 );
        }
        
.section4 .toggle-container {
    position: relative;
}
        
 .section4 .play-btns-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin: 60px 0 80px 0;
        }

.section4  .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;
    
}

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

.section4 .ul-items {
    
    margin: 0 8%;
}
.section4 .ul-items li{
    
            display: flex;
            line-height: 1.5;
            margin: 20px auto;
}

.sec2checkbox {
    width: 30px;
}



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

.section4 .refresh-icon,
    .section4 .audio-play-icon,
    .section4 .jp-text,
    .section4 .en-text {
        margin-right: 10px;
    }

    .section4 .jp-text,
    .section4 .en-text {
        flex-grow: 1; 
    }

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

.section4 .character_reference   {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    margin: 0 8%;
    margin-bottom: 40px;
}

.section4 .character_reference .sec2-char-ref-header {
    font-size: 24px;
    color: #004AAD;
    font-weight: bold;
    margin: 10px auto;
    margin-top: -30px;
}

 .character_reference .sec2-charf-ref { 
  
    color: black;
}

 .character_reference .sec2-charm-ref { 
   
    color: black;
}

.sec2-charf-ref-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sec2-charm-ref-container {
    display: flex;
    align-items: center;
    gap: 20px;
}


.section4 .rlc-comprehension-q {
    margin: 0 8%;
}

.section4 .rlc-topic-s {
    margin: 0 8%;
}


       
   

.section4 .key-phrase-1 {
    margin: 0 8%;
}

.section4 .key-phrase-2 {
    margin: 0 8%;
}

 


.section5 .compreimg {
    position: absolute;
    width: 30%;
    right: -32%;
    top: -30px;
}


.section5 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section5  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section5  .subText li {
    margin-left: 15px;
    
}



.section5 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }

.section5  .ul-items {
    
    margin: 0 8%;
}

.section5 .ul-items li{
    
           display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 1.5;
}

.section5 .refresh-icon,
    .section5 .audio-play-icon,
    .section5 .jp-text,
    .section5 .en-text {
        margin-right: 10px;
    }

    .section5 .jp-text,
    .section5 .en-text {
        flex-grow: 1; 
    }

.section5 .refresh-icon {
            margin-left: 10px;
            margin-top: 12px;
        }
        
.section5 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 2px;
        }  

.section5 .testimg {
    position: absolute;
    width: 30%;
    right: -32%;
}        


.section6 .topicsenimg {
    position: absolute;
    width: 30%;
    right: -32%;
    top: 0;
}

.section6 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section6  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section6  .subText li {
    margin-left: 15px;
    
}



.section6 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }

.section6  .ul-items {
    
    margin: 0 8%;
}

.section6 .ul-items li{
    
           display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 1.5;
}

.jp-text, .en-text {
    display: block;
    text-align: left;
}
.section6 .refresh-icon,
    .section6 .audio-play-icon,
    .section6 .jp-text,
    .section6 .en-text {
        margin-right: 10px;
    }

    .section6 .jp-text,
    .section6 .en-text {
        flex-grow: 1; 
    }

.section6 .refresh-icon {
            margin-left: 10px;
            margin-top: 12px;
        }
        
.section6 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 2px;
        }  

.section6 .testimg {
    position: absolute;
    width: 30%;
    right: -32%;
}        





   

.section7 .keyphraseimg {
    position: absolute;
    width: 30%;
    right: -32%;
}
     
     
.section7 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section7  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section7  .subText li {
    margin-left: 15px;
    
}



.section7 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }

.section7  .ul-items {
    
    margin: 0 8%;
}

.section7 .ul-items li{
    
           display: flex;
            align-items: flex-start;
            justify-content: space-between;
            line-height: 1.5;
            margin-bottom: 20px;
}



.section7 .refresh-icon,
    .section7 .audio-play-icon,
    .section7 .jp-text,
    .section7 .en-text {
        margin-right: 10px;
    }

    .section7 .jp-text,
    .section7 .en-text {
        flex-grow: 1; 
    }

.section7 .refresh-icon {
            margin-left: 10px;
        }
        
.section7 input[type="checkbox"] {
        
          transform: scale(1.5);
        }  
        
        
        
.section7  .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;
    
}

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

.section7 .testimg {
    position: absolute;
    width: 30%;
    right: -32%;
}        


.section7 .sec4-toggle-en-jp {
            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;
}

.section7  .sec4-toggle-en-jp:hover {
    
            background: linear-gradient(to right, #F7931F, #F7931F);
    
}

/*/
.section7 .key-phrase-1 {
    margin: 0 8%;
}

.section7 .key-phrase-2 {
    margin: 0 8%;
}
/*/


.section8 .moviedramaimg {
    position: absolute;
    width: 30%;
    right: -32%;
    bottom: 0;
}    

.section8 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section8  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section8  .subText li {
    margin-left: 15px;
    
}



.section8 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }

.section8  .ul-items {
    
    margin: 0 8%;
}

.section8 .ul-items li{
    
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            line-height: 1.5;
            margin-bottom: 20px;
}

.section8 .refresh-icon,
    .section8 .audio-play-icon,
    .section8 .jp-text,
    .section8 .en-text {
        margin-right: 10px;
    }

    .section8 .jp-text,
    .section8 .en-text {
        flex-grow: 1; 
    }

.section8 .refresh-icon {
            margin-left: 10px;
        }
        
.section8 input[type="checkbox"] {
        
          transform: scale(1.5);
        }  


.section8  .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;
    
}

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


.section8 .testimg {
    position: absolute;
    width: 30%;
    right: -32%;
}        


.section8 .sec4-toggle-en-jp {
            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;
}

.section8  .sec4-toggle-en-jp:hover {
    
            background: linear-gradient(to right, #F7931F, #F7931F);
    
}

/*/
.section8 .key-phrase-1 {
    margin: 0 8%;
}

.section8 .key-phrase-2 {
    margin: 0 8%;
}
/*/

.section9 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section9  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section9  .subText li {
    margin-left: 15px;
    
}



.section9 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }

.section9  .ul-items {
    
    margin: 0 8%;
    text-align: left;
}

.section9 .ul-items li{
    
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 1.5;
}

#sec5 li, #sec6 li, #sec7 li{
    
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            line-height: 1.5;
            margin-bottom: 20px;
          
}
#sec5 .refresh-icon, #sec6 .refresh-icon, #sec7 .refresh-icon {
    margin-left: 10px;
    margin-top: 2px;
}

#sec5 input[type="checkbox"],  #sec6 input[type="checkbox"], #sec7 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 7px;
        }  
        
.section9 .refresh-icon,
    .section9 .audio-play-icon,
    .section9 .jp-text,
    .section9 .en-text {
        margin-right: 10px;
    }

    .section9 .jp-text,
    .section9 .en-text {
        flex-grow: 1; 
    }

.section9 .refresh-icon {
            margin-left: 10px;
            margin-top: 12px;
        }
        
.section9 input[type="checkbox"] {
        
          transform: scale(1.5);
          margin-top: 2px;
        }  

.section9 .testimg {
    position: absolute;
    width: 30%;
    right: -32%;
}        



.section10 .title {
    
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: bold;
            
}

.section10  .subText {
    margin: 60px 3% 60px 3% ;
    line-height: 1.5;
}

.section10  .subText li {
    margin-left: 15px;
    
}



.section10 .subText li::before {
              content: '•'; 
              color: red; 
              display: inline-block;
              margin-right: 8px; 
              vertical-align: middle; 
              margin-left: -15px;
              
            }
            
            
.section10 .moreexcerimg {
    position: absolute;
    width: 30%;
    right: -32%;
    top: -50px;
}
            

 .audio-play-icon, .refresh-icon {
            cursor: pointer;
        }
        


        
        .refresh-icon img {
            width: 30px;
            height: 30px;
        }
        
        .audio-play-icon img {
            width: 30px;
            height: 30px;
            
        }
        



/* ================================= */

.single-btn-control {
            display: flex;
            justify-content: center;
            line-height: 1.5;
            width: 100%;
            margin: 50px auto;
        }
        
.highlightText {
            font-size: 16px;
            font-weight: bold;
        }






  .msred {
            color: red;
            font-weight: bold;
        }


        .conversationTitle {
            font-size: 18px;
            font-weight: bold;
        }


        .study-record .flex-container {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
        }

        .study-record .left-div {
            width: 35%;
            background-color: #EDF2FE;
            /* Just a sample color, you can change it */
            height: 3vh;
            padding: 5px 25px;
            margin: 0;
            overflow: hidden;
            vertical-align: middle;
             text-align: right;
        }

        .study-record .right-div {
            width: 65%;
            background-color: #FCDBCA;
            /* Just a sample color, you can change it */
            padding: 5px 25px;
            margin: 0;
            overflow: hidden;
            height: 3vh;
            vertical-align: middle;
            text-align: left;
        }

        .study-record .hexagon-container {
            width: 32px;
            height: 60.56px;
            position: relative;
            margin: 0 -15px;
        }

        .study-record .hexagon {
            width: 100%;
            padding-bottom: 115.47%;
            background-color: #3498db;
            position: absolute;
            margin-top: 15px;
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        }

        .study-record {
            margin: 0 3%;
            display: flex;
            flex-direction: column;

        }

        .study-r {
            margin-top: -20px;
        }
        
        
        .pause_settings {
                                display: flex;
                                justify-content: flex-end;
                                text-align: center;
                                font-size: 12px;
                                margin: -30px 3% -40px 3%;
                            }
                            
                        .pause_settings_content {
                        display: flex;
                        justify-content: flex-end;
                        flex-direction: column;
                        border: 1px solid white;
                        }
                    
                    
                      .pause_settings_items {
                          display: flex;
                      }
                    .pause_settings_items div {
                        display: flex;
                        flex-direction: column;
                        padding: 3px 7px;
                        border-top: 1px solid white;
                        
                        
                    }
                    
                    .pause_settings_items div:first-child {
                        border-right: 1px solid white;
                        
                    }
                    .pause_settings_items div select {
                        outline: none;
                        border: none;
                        border-radius: 8px;
                    }
                    
                    .playAllwJPsec1 {
                        display: flex;
                        justify-content: flex-end;
                        text-align: center;
                         position: absolute;
                         right: 0;
                          top: -120px;
                          font-size: 12px;
                          margin-right: 3%;
                    }
                    .playAllwJPsec1_content {
                        display: flex;
                        flex-direction: column;
                        
                    }
                    
                    .playAllwJPsec1 div {
                        padding: 3px 7px;
                        border: 1px solid white;
                        
                        
                    }
                   
                    .testType {
                        padding: 20px;
                        margin: 0 8%;
                        font-weight: bold;
                        text-align: center;
                        font-size: 20px;
                        text-transform: capitalize;
                    }
                    .lessonNumber {
                        text-align: center;
                        font-size: 24px;
                        margin: 10px 3%;
                        font-weight: bold;
                        color: #3498DB;
                    }
                    
                    .newL {
                        margin-top: 20px;
                    }
                    
  #loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  background-color: #fff;
  z-index: 9999;
  
  
  
}

#loading span {
    text-align: center;
  font-size: 60px;
  color: #3498DB;
  font-weight: bold;
}

#loading div{
    font-size: 16px;
    color: pink;
}

.point_lb {
    margin: 1em auto;
}

.student-data {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    margin: 20px 8%;
}
.data-items {
    display: flex;
    flex-direction: column;
    font-size: 20px;
}


.profile-container {
      width: 100px; /* Adjust the width and height as needed */
      height: 100px;
      border-radius: 50%; /* Makes the div circular */
      display: flex;
      align-items: center;
      justify-content: center;
      color: white; /* Text color */
      font-size: 20px; /* Font size for the content */
      border: 2px solid white; /* Add a white border around the circle */
      background-image: url('../img/apple-touch-icon.png'); /* URL to your image */
      background-size: cover; /* Ensure the image covers the entire container */
      background-position: center; /* Center the image within the container */
    
}     

.notification {
            color: #C00000;
            font-weight: bold;
            margin: 20px 10%;
        }