/************************************ Navigation **************************************/
.class_TheAbs.NavBack {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0 0%, #d6d6d6 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.class_TheAbs.ContBack {
  position: relative;
  width: 100%;
  height: 100%;

  background: rgba(255, 255, 255, 0.4); /* semi-transparent for layering */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 2px solid #bbb;
  border-radius: 12px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.class_RelImage.GrayChatGPT {
    width: 400px;
    height: 400px;
    padding: 0;
    opacity: 0.1;
}
@media only screen and (min-width: 400px) {
    .class_RelImage.GrayChatGPT {width: 100px; height: 100px;}
}
@media only screen and (min-width: 700px) {
    .class_RelImage.GrayChatGPT {width: 160px; height: 160px;}
}
@media only screen and (min-width: 1200px) {
    .class_RelImage.GrayChatGPT {width: 300px; height: 300px;}
}
@media only screen and (min-width: 1900px) {
    .class_RelImage.GrayChatGPT {width: 400px; height: 400px;}
}
.class_RelFlex.TubeAI {
    flex-wrap: wrap;
    padding: 5px;
    padding-top: 30px;
    padding-bottom: 0;
    width: 100%;
    Height: 85px;  
    overflow: auto;
    background: lightgray;
    background: linear-gradient(135deg, #b0b0b0 0%, #808080 100%);
}
.class_TheRel.BodyAI {
    flex-wrap: wrap;
    width: 100%;
    height: calc(100% - 90px);
    overflow: auto;                                         
    box-shadow: var(--shadowIndent);                                   
}
.class_TabAI {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  width: 90px;
  height: 40px;
  margin: 10px 5px 0 0;
  padding: 0 12px;

  border: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(to bottom, #f0f0f0, #dcdcdc);

  color: #333;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
  cursor: pointer;
}

.class_TabAI:hover {
  background: linear-gradient(to bottom, #e0e0e0, #c8c8c8);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #111;
}

/* Active state */
.class_TabAI.Active {
  background: linear-gradient(to bottom, #333, #000);
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-color: #000;
}

/************************************* TabHome (Gray Theme) *********************************/
/************************************* TabHome (Gray Theme) *********************************/
.class_RelFlex.ButtonSection {
    box-sizing: border-box;
    flex-wrap: wrap;
    width: 100%;
    height: auto;        
    border-bottom: 2px groove white;
    
}
.class_RelFlex.ButtonSection.ClearBottomBorder {
    border: none;
}
.class_TheRel.LineHeader {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
}
.class_RelFlex.LeftPlus {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 3px;
    
    font-size: 30px;
    font-weight: lighter;
    color: #2c2c2c;
    letter-spacing: -0.5px;
    text-alignment: left;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);             
}
.class_RelFlex.RightLineHeader {
    box-sizing: border-box;
    justify-content: flex-start;
    width: calc(100% - 120px);
    height: 40px;
    padding-left: 10px;
    
    font-size: 18px;
    font-weight: lighter;
    color: #2c2c2c;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);            
}
.class_RelFlex.ArrowLeft {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 3px;
    
    font-size: 30px;
    font-weight: 600;
    color: #2c2c2c;
    letter-spacing: -0.5px;
    text-alignment: left;
  text-shadow: 
    1px 0 currentColor,
   -1px 0 currentColor,
    0 1px currentColor,
    0 -1px currentColor;           
}
.class_RelFlex.ArrowRight {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 3px;
    
    font-size: 30px;
    font-weight: 600;
    color: #2c2c2c;
    letter-spacing: -0.5px;
    text-alignment: left;
  text-shadow: 
    1px 0 currentColor,
   -1px 0 currentColor,
    0 1px currentColor,
    0 -1px currentColor;         
}
.class_RelFlex.ArrowLeft:hover, .class_RelFlex.ArrowRight:hover {
    color: Yellow;
}
.class_RelFlex.LineBody {
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 10px;
    padding-top: 0;
    padding-left: 10px;
    padding-right: 0;
}
.class_FrameSquareButton {
  font-family: 'Poppins', 'Century Gothic', sans-serif;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  width: 65px;
  height: 65px;
  margin: 10px;
  padding: 5px;

  border: none;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}
.class_FrameSquareButton:hover {
  background: lightgray;
  box-shadow: var(--shadowButton);
}

.class_BoxLegacy {
  font-family: 'Poppins', 'Century Gothic', sans-serif;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  width: 160px;
  height: 60px;
  margin: 10px;
  padding: 0;

  border: 2px solid #999;
  border-radius: 6px;

  background: linear-gradient(145deg, #e0e0e0, #c8c8c8);
  box-shadow:
    inset 0 -8px 18px rgba(150, 150, 150, 0.2),
    inset 0 2px 5px rgba(255, 255, 255, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.08);

  color: #333;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.6);
}
.class_BoxLegacy:hover {
  background: linear-gradient(145deg, #d4d4d4, #bfbfbf);
  box-shadow:
    inset 0 -6px 16px rgba(120, 120, 120, 0.25),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    0 6px 12px rgba(0, 0, 0, 0.1);

  cursor: pointer;
}
.class_BoxLegacy.Active {
  background: linear-gradient(145deg, #a5a5a5, #8e8e8e);
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.25),
    inset 0 -2px 4px rgba(200, 200, 200, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);

  color: #f2f2f2;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.3);

  cursor: pointer;
  border: 4px solid black;
}
.class_LeftLegacy,
.class_RightLegacy {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
/* Align the left span to the start */
.class_LeftLegacy {
    width: 60px;
    height: 100%;
    padding: 5px;
    padding-right: 8px;
    text-align: center;
    font-size: 40px;
}
.class_RightLegacy {
    width: calc(100% - 60px);
    height: 100%;
    padding: 2px;

    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.class_RelFlex.Desc {
    padding-top: 20px;
    padding-bottom: 20px;
    height: auto;
    font-size: 36px;
    
}
/************************************* TabHome (Gray Theme) *********************************/
/************************************* TabHome (Gray Theme) *********************************/

.class_TheAbs.FrameInfo {
    background: lightgray;
    /************** BorderGradientBarPrettyHotPink ************************/
    border: 20px solid;
    border-image-slice: 1;
    border-width: 30px;
    border-image-source: linear-gradient(150deg, #ff1493, #ff1493 40%, #ff69b4 80%, #ff1493);
    border-image-source: linear-gradient(150deg, black, darkgray);
}



/******************************************** ielts *****************************************/
/******************************************** ielts *****************************************/
.class_Speak1Words, .class_Speak2Words {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    display: inline-block;

    background: linear-gradient(to right, #ffffff, #f1f3f5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border: 2px solid #dee2e6;
    border-radius: 16px; 

    font-size: 16px;
    font-weight: 500;
    color: #343a40;
    padding: 9px 15px;
    margin: 6px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.class_Speak3Words, .class_Write2Topics {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    display: inline-block;

    background: linear-gradient(to right, #ffffff, #f1f3f5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border: 2px solid #dee2e6;
    border-radius: 16px; 
    
    width: 135px;
    height: 115px;
    color: #333; /* dark text for contrast */
    font-size: 14px;
    font-weight: 500;
    color: #343a40;
    padding: 9px 15px;
    margin: 6px;
    
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.class_Write1Type, .class_ReadCambridge, .class_ListenCambridge {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    background: linear-gradient(to right, #ffffff, #f1f3f5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border-radius: 16px; /* pill shape */
    border: 2px solid #dee2e6;
    
    width: 135px;
    height: 70px;
    font-size: 14px;
    font-weight: 500;
    color: #343a40;
    padding: 9px 15px;
    margin: 6px;
    
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.class_Speak1Words:hover,
.class_Speak2Words:hover,
.class_Speak3Words:hover,
.class_Write1Type:hover,
.class_Write2Topics:hover,
.class_ReadCambridge:hover,
.class_ListenCambridge:hover,
.class_GradeEssay:hover {
    background: linear-gradient(135deg, #fff7cc, #ffe066); /* Soft golden gradient */
    color: #665200; /* Dark gold text for contrast */
    box-shadow: 0 6px 12px rgba(255, 193, 7, 0.3); /* Warm yellow glow */
    transition: all 0.3s ease;
    cursor: pointer;
}

.class_Speak1Words,
.class_Speak2Words,
.class_Speak3Words,
.class_Write1Type,
.class_Write2Topics,
.class_ReadCambridge,
.class_ListenCambridge,
.class_GradeEssay {
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 0.75rem 1rem;
}
.class_TheRel.LineHeader {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.class_TheRel.LineHeader:hover {
    background-color: #f0f0f0;
}
.class_TheRel.LineHeader.Active {
    background-color: #ffe066; /* soft yellow */
    font-weight: 600;
}
.class_GradeEssay {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    background: linear-gradient(to right, #ffffff, #f1f3f5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border-radius: 16px; /* pill shape */
    border: 2px solid #dee2e6;
    
    width: 200px;
    height: 80px;
    font-size: 18px;
    font-weight: 500;
    color: #343a40;
    padding: 9px 15px;
    margin: 6px;
    
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}


/******************************************** toeic *****************************************/
/******************************************** toeic *****************************************/
.class_TOEICListeningWord, .class_TOEICReadingWord {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    display: inline-block;
    cursor: pointer;

    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #d0d7de;
    border-radius: 16px;

    font-size: 16px;
    font-weight: 500;
    color: #2e2e2e;
    padding: 9px 15px;
    margin: 6px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.class_TOEICSpeakingBox, .class_TOEICWritingBox {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    display: inline-block;
    cursor: pointer;
    
    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #d0d7de;
    border-radius: 16px;

    width: 135px;
    height: 115px;
    color: #2e2e2e;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 15px;
    margin: 6px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.class_TOEICSectionCard {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;

    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    border: 2px solid #d0d7de;

    width: 135px;
    height: 70px;
    font-size: 14px;
    font-weight: 500;
    color: #2e2e2e;
    padding: 9px 15px;
    margin: 6px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.class_TOEICListeningWord:hover,
.class_TOEICReadingWord:hover,
.class_TOEICSpeakingBox:hover,
.class_TOEICWritingBox:hover,
.class_TOEICSectionCard:hover {
    background: linear-gradient(135deg, #cce5ff, #b3d9ff);
    color: #002e5d;
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.18);
    transition: all 0.3s ease;
    cursor: pointer;
}
.class_TOEICListeningWord,
.class_TOEICReadingWord,
.class_TOEICSpeakingBox,
.class_TOEICWritingBox,
.class_TOEICSectionCard {
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.class_TheRel.LineHeader.TOEIC {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.class_TheRel.LineHeader.TOEIC:hover {
    background-color: #e0e0e0;
}

.class_TheRel.LineHeader.TOEICActive {
    background-color: #b399ff; 
    font-weight: 600;
}

.class_TheAbs.Counts {
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    
    color: #2e2e2e;
    font-size: 12px;
    font-weight: lighter;
    text-align: left;         
}


.class_AbsFlexCenter.DivScoreSpeech {
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    font-family: var(--fontFamilyArvo);
    flex-wrap: wrap;
    text-align: left;
    font-size: 50px;
    font-weight: 600;
    color: blue;
}
.score-box {
  background: #ffffff;
  border: 3px solid #1e90ff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  width: 405px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  animation: fadeIn 0.3s ease-in-out;
}
.score-header {
  background-color: #1e90ff;
  color: white;
  padding: 15px 21px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  font-size: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.score-content {
  padding: 21px 27px;
  font-size: 21px;
  color: #333;
}
.class_FontScoring {
  font-size: 33px;
}
.score-percent {
  font-size: 33px;
  color: #1e90ff;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}
.close-btn {
  cursor: pointer;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  padding-left: 14px;
}
.close-btn:hover {
  color: #ff4d4d;
}
hr {
  border: 0;
  border-top: 1px solid #d0e6ff;
  margin: 15px 0;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.class_RelFlex.WrapBigScore {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    
}
.class_RelFlex.BigScore {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    width: auto;
    height: auto;
    font-size: 80px;         /* Default for small screens */
    color: #1e90ff;
    font-weight: bold;
    text-align: center;
}
/* Medium screens (tablets, small laptops) */
@media only screen and (min-width: 768px) {
    .class_RelFlex.BigScore {
        font-size: 150px;
    }
}
/* Large screens (desktop) */
@media only screen and (min-width: 1200px) {
    .class_RelFlex.BigScore {
        font-size: 200px;
    }
}
/* Extra-large screens (big monitors, 1900px+) */
@media only screen and (min-width: 1900px) {
    .class_RelFlex.BigScore {
        font-size: 250px;
    }
}

.class_CustomWords,
.class_GENSpeaking,
.class_TOEICRead5Words,
.class_TOEICRead6Words,
.class_TOEICRead7Words,
.class_TOEICSpeak1Words,
.class_TOEICSpeak2Words,
.class_TOEICSpeak4Words,
.class_TOEICSpeak5Words,
.class_TOEICSpeak6Words,
.class_TOEICWrite1Words,
.class_TOEICWrite2Words,
.class_TOEICWrite3Words {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #d0d7de;
    border-radius: 16px;

    width: 175px;
    height: 85px;
    color: #2e2e2e;
    font-size: 11px;
    font-weight: lighter;
    text-align: center;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 4px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.class_TOEICSpeak3Words {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    display: inline-block;

    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #d0d7de;
    border-radius: 16px;

    width: auto;
    height: auto;

    color: #2e2e2e;
    font-size: 12px;
    font-weight: lighter;
    padding: 15px;
    margin: 6px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.class_CustomWords:hover,
.class_GENSpeaking:hover,
.class_TOEICRead5Words:hover,
.class_TOEICRead6Words:hover,
.class_TOEICRead7Words:hover,
.class_TOEICSpeak1Words:hover,
.class_TOEICSpeak3Words:hover,
.class_TOEICSpeak5Words:hover,
.class_TOEICSpeak6Words:hover,
.class_TOEICWrite1Words:hover,
.class_TOEICWrite2Words:hover,
.class_TOEICWrite3Words:hover {
    background: linear-gradient(135deg, #b399ff, #7a57ff); /* medium darker purple to deeper purple */
    color: #f0e6ff; /* light lilac text */
    box-shadow: 0 6px 12px rgba(179, 153, 255, 0.5); /* medium purple glowing shadow */
    transition: all 0.3s ease;
    cursor: pointer;
}
/******************************************** toeic *****************************************/
/******************************************** toeic *****************************************/


/*********************************** PullSpeak ************************************/
.class_AIAbs {
    box-sizing: border-box;
    position: absolute;
    display: block;
    float: left;
    top: 0;
    left: 0;
    
    font-family: var(--fontFamilyRobotoMono);
    width: 100%;
    height: 100%;
    padding: 0;
    background: white;
    overflow: hidden;
    
    /************** BorderGradientBarPrettyPurple ************************/
    border: 20px solid;
    border-image-slice: 1;
    border-width: 20px;
    border-image-source: linear-gradient(150deg, #4600f1, #f731db 100%);
    
    font-family: var(--fontFamilyArvo);
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;
}
.class_RelFlex.SecTop {
    font-family: var(--fontFamilyPoppins);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    padding-right: 0;
    padding-left: 5px;
    margin: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(to right, #4600f1, #f731db, #c084fc); /* PrettyPurple to matching lilac */
    background: linear-gradient(to right, #222, #444); /* dark gray gradient */
    
    font-size: 28px;
    font-weight: lighter;
    text-align: center;
    color: white;
    text-shadow: none;
    text-decoration: none;
}
.class_RelFlexSpanLeft.AiHeader {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width: calc(100% - 360px);
    height: 100%;
    padding: 0;
    padding-left: 20px;
    margin: 0;
    /*************************************** WowFont *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(to right, #a88bfc, #d8a7f9, #eacbff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    /*************************************** WowFont *************************************/
}
.class_AIAbs.Translate {
    /************** BorderGradientBarDarkDodgerBlue ************************/
    border-image-source: linear-gradient(330deg, #1c78d1, #125599 100%);
}
.class_RelFlex.SecTop.Translate {
    background: linear-gradient(to right, #1c78d1, #1766b3, #125599);
    padding: 0;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.class_RelFlexSpanLeft.AiHeaderTranslate {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 180px);
    height: 100%;
    margin: 0;
    padding-left: 10px;
    /*************************************** WowFont YesClip *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #fff; /* Fallback color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #ffffff, #f0f0f0, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*************************************** WowFont YesClip *************************************/
}
.class_TheRel.SecBody {
    width: 100%;
    height: calc(100% - 70px);
}
.class_AiValue {
    font-family: var(--fontFamilyArvo);
    box-sizing: border-box;
    position: absolute;
    display: block;
    float: left;
    
    top: 0;
    left: 0;
    padding: 20px;
    margin: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    
    background: whitesmoke;
    border: 2px groove white;
    box-shadow: var(--shadowIndent);
    overflow: auto;
    
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;
    text-decoration: none;            
    
    resize: none;
    outline: none;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_AiValue:hover,.class_AiValue:active,.class_AiValue:focus  {
    outline: none;
}



.class_AIAbs.NewSpeech {
    border: 20px solid #222;
    background: lightgray;
}
.class_RelFlex.SecTop.NewSpeech {
    background: linear-gradient(to right,#222, darkgray);
    color: white;
}
.class_RelFlexSpanLeft.AiHeaderNewSpeech {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width: calc(100% - 60px);
    height: 100%;
    padding: 0;
    padding-left: 10px;
    margin: 0;

    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.class_AiSpeech.NewSpeech {
    background: transparent;
    color: #222;
}



.class_AIAbs.Speech {
    border: 20px solid #222;
    background: lightgray;
}
.class_RelFlexSpanLeft.AiHeaderSpeech {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width: calc(100% - 60px);
    height: 100%;
    padding: 0;
    padding-left: 10px;
    margin: 0;

    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.class_RelButton.SeparatorToggledOn {
    background: #836FFF;
}
.class_AbsFlexSpanLeft.CharacterCount {
    font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
    justify-content: flex-start;
    top: 0;
    left: 0;
    padding: 5px;
    width: auto;
    height: auto;
    
    color: white;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}
.word-highlight {
    background-color: black;
    color: white;            /* dark green text */
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 6px;
    padding: 5px;
}
.class_AiSpeech {
    font-family: var(--fontFamilyArvo);
    box-sizing: border-box;
    position: absolute;
    display: block;
    float: left;
    
    top: 0;
    left: 0;
    padding: 20px;
    margin: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    
    background: lightgray;
    
    border: none;
    box-shadow: none;
    overflow: auto;
    
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;
    text-decoration: none;      
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_FixedTopRight.AiX {
    top: 5px;
    right: 5px;
    margin: 0;
    padding: 0;
    height: 60px;
    width: 60px;
}

@media only screen and (min-width: 1900px) {    
    .class_RelFlexSpanLeft.HeaderLanguage {font-size: 36px !important;}
    .class_RelFlexSpanLeft.AiHeader {font-size: 36px !important;}
    .class_RelFlexSpanLeft.AiHeaderTranslate {font-size: 36px !important;}
    .class_RelFlexSpanLeft.AiHeaderSpeech {font-size: 36px !important;}
    .class_RelFlexSpanLeft.NotesManualHeader {font-size: 36px !important;}
    .class_RelFlexSpanLeft.DropNotesHeader {font-size: 36px !important;}
    .class_RelFlexSpanLeft.LeftNotesHeader {font-size: 36px !important;}
    .class_RelFlexSpanLeft.RightNotesHeader {font-size: 36px !important;}
    .class_RelFlexSpanLeft.SpeakNowHeader {font-size: 36px !important;}
    
    .class_AiValue {font-size: 36px;}
    .class_AiSpeech {font-size: 43px;}
    .class_TheRel.RealNotesManual {font-size: 43px;}
    .class_TheRel.RealDropNotes {font-size: 43px;}
    .class_TheRel.RealLeftNotes {font-size: 43px;}
    .class_TheRel.RealRightNotes {font-size: 43px;}
    .class_SpeakNow {font-size: 43px;}
    .class_SpeakFloat {font-size: 43px;}
}
@media only screen and (max-width: 1900px) {    
    .class_RelFlexSpanLeft.HeaderLanguage {font-size: 24px !important;}
    .class_RelFlexSpanLeft.AiHeader {font-size: 24px !important;}
    .class_RelFlexSpanLeft.AiHeaderTranslate {font-size: 24px !important;}
    .class_RelFlexSpanLeft.AiHeaderSpeech {font-size: 24px !important;}
    .class_RelFlexSpanLeft.NotesManualHeader {font-size: 24px !important;}
    .class_RelFlexSpanLeft.DropNotesHeader {font-size: 24px !important;}
    .class_RelFlexSpanLeft.LeftNotesHeader {font-size: 24px !important;}
    .class_RelFlexSpanLeft.RightNotesHeader {font-size: 24px !important;}
    .class_RelFlexSpanLeft.SpeakNowHeader {font-size: 24px !important;}
    
    .class_AiValue {font-size: 36px;}
    .class_AiSpeech {font-size: 36px;}
    .class_TheRel.RealNotesManual {font-size: 36px;}
    .class_TheRel.RealDropNotes {font-size: 36px;}
    .class_TheRel.RealLeftNotes {font-size: 36px;}
    .class_TheRel.RealRightNotes {font-size: 36px;}
    .class_SpeakNow {font-size: 36px;}
    .class_SpeakFloat {font-size: 36px;}
}
@media only screen and (max-width: 1400px) {    
    .class_RelFlexSpanLeft.HeaderLanguage {font-size: 18px !important;}
    .class_RelFlexSpanLeft.AiHeader {font-size: 18px !important;}
    .class_RelFlexSpanLeft.AiHeaderTranslate {font-size: 18px !important;}
    .class_RelFlexSpanLeft.AiHeaderSpeech {font-size: 18px !important;}
    .class_RelFlexSpanLeft.NotesManualHeader {font-size: 18px !important;}
    .class_RelFlexSpanLeft.DropNotesHeader {font-size: 18px !important;}
    .class_RelFlexSpanLeft.LeftNotesHeader {font-size: 18px !important;}
    .class_RelFlexSpanLeft.RightNotesHeader {font-size: 18px !important;}
    .class_RelFlexSpanLeft.SpeakNowHeader {font-size: 18px !important;}
    
    .class_AiValue {font-size: 28px;}
    .class_AiSpeech {font-size: 28px;}
    .class_TheRel.RealNotesManual {font-size: 28px;}
    .class_TheRel.RealDropNotes {font-size: 28px;}
    .class_TheRel.RealLeftNotes {font-size: 28px;}
    .class_TheRel.RealRightNotes {font-size: 28px;}
    .class_SpeakNow {font-size: 28px;}
    .class_SpeakFloat {font-size: 28px;}
}
/*********************************** PullSpeak ************************************/




/*********************************** buttons prep for pics ************************************/
.class_TheAbs.KIDSRead7Box,
.class_TheAbs.TOEICSpeak2Box,
.class_TheAbs.TOEICSpeak4Box,
.class_TheAbs.TOEICWrite1Box {
  width: 100%;
  height: 100%;
}
.class_KIDSRead7Go,
.class_KIDSRead7Grid,
.class_TOEICSpeak2Go,
.class_TOEICSpeak2Grid,
.class_TOEICSpeak4Go,
.class_TOEICSpeak4Grid,
.class_TOEICWrite1Go,
.class_TOEICWrite1Grid {
  font-family: var(--fontFamilyArvo);
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;

  width: 50%;
  height: 100%;
  padding: 20px;
  margin: 0;

  border: 2px solid #ccc;
  border-radius: 12px;

  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);

  transition: all 0.25s ease-in-out;
  cursor: pointer;

  font-size: 46px;
  font-weight: 600;
  color: #333;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px #fff;
}
/* 🎨 GO: Orange */
.class_KIDSRead7Go,
.class_TOEICSpeak2Go,
.class_TOEICSpeak4Go,
.class_TOEICWrite1Go {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: linear-gradient(to bottom, #ffe5cc, #ffc080);
}
.class_KIDSRead7Go:hover,
.class_TOEICSpeak2Go:hover,
.class_TOEICSpeak4Go:hover,
.class_TOEICWrite1Go:hover {
  background: linear-gradient(to bottom, #fff0e0, #ffb266);
  border: 4px solid #ff9933;
  box-shadow:
    0 8px 16px rgba(255, 153, 51, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}
/* 🎨 GRID: Teal */
.class_KIDSRead7Grid,
.class_TOEICSpeak2Grid,
.class_TOEICSpeak4Grid,
.class_TOEICWrite1Grid {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: linear-gradient(to bottom, #e0ffff, #b3f0ff);
}
.class_KIDSRead7Grid:hover,
.class_TOEICSpeak2Grid:hover,
.class_TOEICSpeak4Grid:hover,
.class_TOEICWrite1Grid:hover {
  background: linear-gradient(to bottom, #f0ffff, #a0eaff);
  border: 4px solid #33cccc;
  box-shadow:
    0 8px 16px rgba(51, 204, 204, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}
/*********************************** buttons prep for pics ************************************/



/*********************************** PicOne ************************************/
.class_TheAbs.ContPic {
    border: 2px groove white;
    background: lightgray;
}
.class_RelFlex.SecTop.PicTop {
    height: 90px;
    background: linear-gradient(150deg, #000000, #444444); /* black gradient */
    border-bottom: 2px groove white;
}
.class_TheRel.SecBodyPic {
    display: block;
    width: 100%;
    height: calc(100% - 70px);
    cursor: pointer;
    overflow: auto;
    white-space: nowrap;
}
#id_PicOneWrapper {
  top: 0;
  left: 0;
  display: inline-block;
  overflow: visible;
  transform-origin: center center;
  user-select: none;
}
.class_TheRel.SecBodyPic.dragging {
  cursor: pointer !important;
}
.class_RelFlexSpanLeft.SpanTextForPic {
    font-family: 'Century Gothic', sans-serif;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width: calc(100% - 480px);
    height: 100%;
    padding: 0;
    padding-left: 10px;
    margin: 0;
    color: white;
    font-size: 16px;    
    font-weight: 500;               
}
.class_FixedBottomRight.TubePicOne {
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;     
}
.class_FixedBottomRight.TubePicOne:hover, .class_FixedBottomRight.TubePicOne:focus, .class_FixedBottomRight.TubePicOne:active {
    background: transparent;
}
.class_RelPicOne {
    display: block;                 /* Ensures the image behaves like a block element, not inline */
    position: static;              /* Default positioning — does not respond to top/left/right/bottom */
    
    width: auto;                   /* Image takes its natural width */
    height: auto;                  /* Image takes its natural height */
    max-width: none;               /* Removes any container-based max width (allows overflow) */
    max-height: none;              /* Same — allows image to exceed container height if zoomed */

    margin: 0;                     /* Removes default margin */
    padding: 0;                    /* No internal spacing */
    border: none;                  /* No visible border */
    border-radius: 0;              /* No rounded corners */
    background: transparent;       /* No background color or image */
    box-shadow: none;              /* No shadow effect */

    box-sizing: border-box;        /* Padding and border stay inside the width/height */

    cursor: pointer;                  /* Shows a hand cursor, indicating drag is possible */

    transform-origin: top left; /* Makes scale/rotate transform from the center of the image */
    transition: transform 0.3s ease; /* Smooth animation when rotating/scaling */
}
.class_RelFlexSpanLeft.PicNumbering {
    width: auto;
    height: 70px;
    color: darkgray;
    font-size: 24px;
    padding-left: 10px;
    padding-right: 10px;
}
/*********************************** OnePic ************************************/


/*********************************** GridPics ************************************/
.class_TheAbs.ContGrid {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.class_RelFlex.SecTopGrid {
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    border-bottom: 2px groove white;
    background: linear-gradient(135deg, #b399ff, #7a57ff); /* medium darker purple to deeper purple */
}
.class_RelFlex.SecTopA, .class_RelFlex.SecTopB {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    flex-wrap: wrap;
    width: 100%;
    height: 40px;
    font-size: 24px;
    font-weight: normal;
    color: white;
    overflow: auto;
}
.class_RelFlex.SecTopB {
    width: 100%;
    height: 105px;
    padding-left: 70px;
    padding-right: 70px;
    border-bottom: 1px solid #7a57ff;
}



.class_TheRel.SecBodyGrid {
    flex-wrap: wrap;
    width: 100%;
    height: calc(100% - 150px);
    padding: 10px;
    border: none;
    overflow: auto;
}

/* ------------------------------------------------------ */
/*           ADDED: Wrapper for image + delete icon       */
/* ------------------------------------------------------ */
.class_PicWrap {
  position: relative;
  display: inline-block;
  margin: 10px;
}

/* ghost image during drag (optional style) */
.class_SortGhost {
  opacity: 0.4;
}
/* Reorder instructions */
.class_ReorderNote {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 24px;
  padding: 6px;
  opacity: 0.85;
  user-select: none;
}

.class_DeletePic {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.55);
  color: white;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.class_PicWrap:hover .class_DeletePic {
  opacity: 1;
  background: rgba(0,0,0,0.75);
}

.class_RelImage.PicGrid {
  width: 250px;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  cursor: pointer;
  /* margin removed (now handled by .picWrap) */
  border: 6px solid transparent;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.class_RelImage.PicGrid.Selected {
  border: 6px solid blue;
}
/* Desktop 1600px+ */
@media only screen and (min-width: 1600px) {
  .class_RelImage.PicGrid { width: 350px; }
  .class_RelImage.PicGrid.Reorder { width: 160px !important; }
}

/* Laptop large (1280px–1599px) */
@media only screen and (max-width: 1599px) and (min-width: 1200px) {
  .class_RelImage.PicGrid { width: 280px; }
  .class_RelImage.PicGrid.Reorder { width: 160px !important; }
}

/* Tablet landscape (992px–1199px) */
@media only screen and (max-width: 1199px) and (min-width: 992px) {
  .class_RelImage.PicGrid { width: 220px; }
  .class_RelImage.PicGrid.Reorder { width: 160px !important; }
}

/* Tablet portrait (768px–991px) */
@media only screen and (max-width: 991px) and (min-width: 768px) {
  .class_RelImage.PicGrid { width: 180px; }
  .class_RelImage.PicGrid.Reorder { width: 160px !important; }
}

/* Mobile large (600px–767px) */
@media only screen and (max-width: 767px) and (min-width: 600px) {
  .class_RelImage.PicGrid { width: 150px; }
  .class_RelImage.PicGrid.Reorder { width: 160px !important; }
}

/* Mobile small (<600px) */
@media only screen and (max-width: 599px) {
  .class_RelImage.PicGrid { width: 120px; }
  .class_RelImage.PicGrid.Reorder { width: 160px !important; }
}

.class_RelImage.PicGrid:hover {
  transform: scale(1.03);
  box-shadow:
  0 8px 20px rgba(122, 87, 255, 0.7),
  0 12px 32px rgba(122, 87, 255, 0.4);
}


.paginationEllipsis {
  min-width: 36px;
  cursor: pointer;
}

.pagePickerMenu {
  z-index: 9999;
  max-height: 260px;
  width: 200px;
  overflow: auto;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  background: #fff;
}

.pagePickerItem {
  display: inline-block;
  margin: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  cursor: pointer;
}
.pagePickerItem:hover {
    background: darkgray;
    color: white;
}
.pagePickerItem.active {
  font-weight: 600;
  border-color: #999;
}

.pagePickerJump {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.pagePickerJump input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.pagePickerJump button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #f3f3f3;
}

.class_PageButton, .class_PrevNextButton {
  box-sizing: border-box;
  font-family: 'Poppins', 'Century Gothic', sans-serif;
  width: 40px;
  height: 40px;
  margin: 1px;
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 1px;
  cursor: pointer;
  font-size: 16px;
  font-weight: normal;
  transition: background-color 0.2s, transform 0.2s;
}
.class_PageButton {
    border: 1px solid white;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.class_PrevNextButton {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    width: 80px;
    height: 40px;
    border: 1px solid white;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.class_PageButton:hover, .class_PrevNextButton:hover {
  background-color: rgba(255,255,255,0.9);
  transform: scale(1.05);
}

.class_PageButton {
  width: 60px !important;
  margin: 2px;
  padding: 5px 10px;
  cursor: pointer;
}
.class_WideButton {
  width: 117px !important;
  margin: 2px;
  padding: 5px 10px;
  cursor: pointer;
}
.class_PageButton.active {
  background-color: deeppink;
  color: white;
  font-weight: bold;
  border-color: lavender;
}

/*********************************** GridPics ************************************/

/*********************************** SpeechControls ************************************/
.class_TheAbs.ContainerControls {
    top: calc(100% - 330px);
    left: calc(50% + 60px);
    width: 480px;
    height: auto;
    padding: 10px;
    background: rgba(222,222,222,0.8);
    border: 6px solid rgba(0,0,0,0.6);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
.class_SpeechLabel {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    font-size: 18px;
    color: #333;
    margin-bottom: 5px;
    display: block;
    cursor: pointer;
}
#id_VoiceControls {
    font-size: 24px;
    font-weight: 600;
}
.class_SpeechVoiceSelector {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    padding: 4px;
    font-size: 18px;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
}
.class_SpeechRate,
.class_SpeechPitch,
.class_SpeechVolume {
    width: 300px; /* Or whatever width you prefer */
}
/* Chrome/Safari */
.class_SpeechRate::-webkit-slider-thumb,
.class_SpeechPitch::-webkit-slider-thumb,
.class_SpeechVolume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: orange;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    margin-top: -4px; /* Align vertically */
}
.class_SpeechRate::-webkit-slider-runnable-track,
.class_SpeechPitch::-webkit-slider-runnable-track,
.class_SpeechVolume::-webkit-slider-runnable-track {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    border: 1px solid steelblue;
}
.class_SpeechButton {
    margin: 4px 6px 4px 0;
    padding: 6px 12px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100px;
    height: auto;
}
@keyframes pulse-animation {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}
.class_SpeechButton.pulsate {
    animation: pulse-animation 0.8s ease-in-out;
}
.class_SpeakButton {
    background-color: #28a745;
    color: white;
}
.class_PauseButton {
    background-color: #ffc107;
    color: black;
}
.class_ResumeButton {
    background-color: #17a2b8;
    color: white;
}
.class_StopButton {
    background-color: #dc3545;
    color: white;
}
/*********************************** SpeechControls ************************************/


/*********************************** ScrollWow ************************************/
.class_TheAbs.ContScrollText {
    width: 100%;
    height: 100%;
    background: white;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 20px solid transparent;
    border-image-source: linear-gradient(150deg, #1a2a40, #2c3e50 40%, #3a4f6b 80%, #1a2a40);
    border-image-slice: 1;
    resize: vertical;
    max-height: 100%;
    min-height: 100px;
    transition: height 0.3s ease;
    overflow: hidden;
    box-sizing: border-box; /* ✅ include borders in total width */
}

.class_RelFlex.SecTopScrollText {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 70px;
    padding: 0 5px;
    border-bottom: 2px groove lightgray;
    background: rgba(151, 151, 151, 0.95);
    box-sizing: border-box; /* ✅ prevent width expansion */
}

.class_TheRel.SecBodyScrollText {
    position: relative;
    width: 100%;
    height: calc(100% - 70px);
    overflow: hidden;
    box-sizing: border-box;
}

.class_RelFlex.ScrollTextSpeed {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 10px solid transparent;
  margin-left: 12px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: var(--fontFamilyArvo);
  font-size: 28px;
  font-weight: 700;
  color: #333;
  background: white;

  /* subtle 3D shadow */
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.2),
    inset 0 0 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}
/* Color themes per speed */
#id_ScrollTextSpeed1 { border-color: #1B5E20; } /* dark green */
#id_ScrollTextSpeed2 { border-color: #1565C0; } /* blue */
#id_ScrollTextSpeed3 { border-color: #F9A825; } /* yellow-orange */
#id_ScrollTextSpeed4 { border-color: #D81B60; } /* pink */
#id_ScrollTextSpeed5 { border-color: #6A1B9A; } /* purple */
#id_ScrollTextSpeed6 { border-color: mediumblue; }
/* Hover glow */
.class_RelFlex.ScrollTextSpeed:hover {
  transform: scale(1.1);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 4px rgba(255, 255, 255, 0.5);
}
/* Active press effect */
.class_RelFlex.ScrollTextSpeed:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}
.class_RelFlex.ScrollTextSpeed.Active {
  background-color: black;
  color: white;
}


/* Scrolling text area */
.class_ScrollText {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0; /* ✅ ensure text never exceeds container width */
    width: auto; /* ✅ let box fit content inside bounds */
    padding: 20px;
    user-select: text;
    overflow-wrap: break-word; /* ✅ prevent long words pushing width */
    white-space: pre-wrap;
    box-sizing: border-box;

    font-family: var(--fontFamilyArvo);
    font-size: 60px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;
    background-color: white;

    box-shadow: none;

    animation: scrollTextUp 30s linear infinite;
}

/* Pause on hover */
.class_ScrollText:hover {
    animation-play-state: paused;
}

/* Smooth vertical scroll */
@keyframes scrollTextUp {
  from { transform: translateY(0%); }
  to { transform: translateY(-100%); }
}
/*********************************** ScrollWow ************************************/



/*********************************** NotesWow ************************************/
.class_TheAbs.ContDropNotes {
    width: 100%;
    height: 100%;
    background: rgba(233,233,233,0.95);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 20px solid transparent; /* Reserve space for the border */
    border-image: linear-gradient(to bottom, #FFD700, #FFA500); /* eggyolk gradient */
    border-image-slice: 1;
    resize: vertical;
    max-height: 100%;
    min-height: 100px;
    transition: height 0.3s ease;
}
.class_RelFlex.SecTopDropNotes {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    height: 70px;
    border-bottom: 2px groove lightgray;
    justify-content: flex-end;
    background: rgba(151, 151, 151, 0.95);
}
.class_RelFlexSpanLeft.DropNotesHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 0;
    margin: 0;
    width: calc(100% - 540px);
    height: 100%;
    
    /*************************************** WowFont YesClip *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #fff; /* Fallback color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #ffffff, #f0f0f0, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*************************************** WowFont YesClip *************************************/
}
.class_TheRel.SecBodyDropNotes {
    width: 100%;
    height: calc(100% - 70px);
    
}
.class_TheRel.RealDropNotes {
    padding: 20px;
    width: 100%;
    height: 100%;
    cursor: text; 
    user-select: text;
    overflow: auto;

    font-family: var(--fontFamilyArvo);
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;

    background-color: transparent;

    /* Sinking inset effect using subtle inner shadows */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -2px 6px rgba(0, 0, 0, 0.1);

    transition: box-shadow 0.2s ease;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}

.class_TheRel.RealDropNotes:focus {
    outline: none;
}
/*********************************** NotesWow ************************************/


/*********************************** NotesLeft ************************************/
.class_TheAbs.ContLeftNotes {
    width: 100%;
    height: 100%;
    background: rgba(233,233,233,0.95);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 20px solid transparent; /* Reserve space for the border */
    border-image: linear-gradient(to bottom, #007FFF, #66B2FF); /* Azure Blue gradient */
    border-image-slice: 1;
    resize: vertical;
    max-height: 100%;
    min-height: 100px;
    transition: height 0.3s ease;
}

.class_RelFlex.SecTopLeftNotes {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    height: 70px;
    border-bottom: 2px groove lightgray;
    justify-content: flex-end;
    background: rgba(151, 151, 151, 0.95);
}

.class_RelFlexSpanLeft.LeftNotesHeader {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;
    width: calc(100% - 540px);
    height: 100%;

    /*************************************** WowFont YesClip *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #fff; /* Fallback color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #ffffff, #f0f0f0, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*************************************** WowFont YesClip *************************************/
}
.class_TheRel.SecBodyLeftNotes {
    width: 100%;
    height: calc(100% - 70px);
}

.class_TheRel.RealLeftNotes {
    padding: 20px;
    width: 100%;
    height: 100%;
    cursor: text; 
    user-select: text;
    overflow: auto;

    font-family: var(--fontFamilyArvo);
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;

    background-color: transparent;

    /* Sinking inset effect using subtle inner shadows */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -2px 6px rgba(0, 0, 0, 0.1);

    transition: box-shadow 0.2s ease;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}

.class_TheRel.RealLeftNotes:focus {
    outline: none;
}
/*********************************** NotesLeft ************************************/




/*********************************** NotesRight ************************************/
.class_TheAbs.ContRightNotes {
    width: 100%;
    height: 100%;
    background: rgba(233,233,233,0.95);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 20px solid transparent; /* Reserve space for the border */
    border-image: linear-gradient(to bottom, #FF9A8B, #FF6A88); /* Coral Dream gradient */
    border-image-slice: 1;
    resize: vertical;
    max-height: 100%;
    min-height: 100px;
    transition: height 0.3s ease;
}

.class_RelFlex.SecTopRightNotes {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    height: 70px;
    border-bottom: 2px groove lightgray;
    justify-content: flex-end;
    background: rgba(151, 151, 151, 0.95);
}

.class_RelFlexSpanLeft.RightNotesHeader {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;
    width: calc(100% - 540px);
    height: 100%;

    /*************************************** WowFont YesClip *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #fff; /* Fallback color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #ffffff, #f0f0f0, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*************************************** WowFont YesClip *************************************/
}
.class_TheRel.SecBodyRightNotes {
    width: 100%;
    height: calc(100% - 70px);
}

.class_TheRel.RealRightNotes {
    padding: 20px;
    width: 100%;
    height: 100%;
    cursor: text; 
    user-select: text;
    overflow: auto;

    font-family: var(--fontFamilyArvo);
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;

    background-color: transparent;

    /* Sinking inset effect using subtle inner shadows */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -2px 6px rgba(0, 0, 0, 0.1);

    transition: box-shadow 0.2s ease;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}

.class_TheRel.RealRightNotes:focus {
    outline: none;
}
#id_FrameRightNotesPicBulb.SemiTransparent, #id_FrameLeftNotesPicBulb.SemiTransparent {
    opacity: 0.6;
}
/*********************************** NotesRight ************************************/



/*********************************** NotesManual ************************************/
.class_TheAbs.ContNotesManual {
    width: 100%;
    height: 100%;
    background: rgba(233,233,233,0.95);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 20px solid transparent; /* Reserve space for the border */
    border-image: linear-gradient(to bottom, #000000, #1a1a1a); /* Black to very dark gray */
    border-image-slice: 1;
    resize: vertical;
    max-height: 100%;
    min-height: 100px;
    transition: height 0.3s ease;
}

.class_RelFlex.SecTopNotesManual {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    height: 70px;
    border-bottom: 2px groove lightgray;
    justify-content: flex-end;
    background: rgba(151, 151, 151, 0.95);
}

.class_RelFlexSpanLeft.NotesManualHeader {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;
    width: calc(100% - 540px);
    height: 100%;

    /*************************************** WowFont YesClip *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #fff; /* Fallback color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #ffffff, #f0f0f0, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*************************************** WowFont YesClip *************************************/
}
.class_TheRel.SecBodyNotesManual {
    width: 100%;
    height: calc(100% - 70px);
}

.class_TheRel.RealNotesManual {
    padding: 20px;
    width: 100%;
    height: 100%;
    cursor: text; 
    user-select: text;
    overflow: auto;

    font-family: var(--fontFamilyArvo);
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;

    background-color: transparent;

    /* Sinking inset effect using subtle inner shadows */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -2px 6px rgba(0, 0, 0, 0.1);

    transition: box-shadow 0.2s ease;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}

.class_TheRel.RealNotesManual:focus {
    outline: none;
}
/*********************************** NotesManual ************************************/




/*********************************** NotesFloat ************************************/
.class_TheAbs.ContNotesFloat {
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    
    background: rgba(233,233,233,0.95);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    box-shadow: inset 0 0 0 10px Yellow;  
    border: 20px solid transparent;
    border-image: linear-gradient(to bottom, DarkViolet, MediumOrchid); 
    border-image-slice: 1;

    resize: vertical;
    max-height: 100%;
    min-height: 100px;
    transition: height 0.3s ease;
}

.class_RelFlex.SecTopNotesFloat {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    height: 70px;
    border-bottom: 2px groove lightgray;
    justify-content: flex-end;
    background: rgba(151, 151, 151, 0.95);
}

.class_RelFlexSpanLeft.NotesFloatHeader {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;
    width: calc(100% - 540px);
    height: 100%;

    /*************************************** WowFont YesClip *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #fff; /* Fallback color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #ffffff, #f0f0f0, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*************************************** WowFont YesClip *************************************/
}
.class_TheRel.SecBodyNotesFloat {
    width: 100%;
    height: calc(100% - 70px);
}

.class_TheRel.RealNotesFloat {
    padding: 20px;
    width: 100%;
    height: 100%;
    cursor: text; 
    user-select: text;
    overflow: auto;

    font-family: var(--fontFamilyArvo);
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;

    background-color: transparent;

    /* Sinking inset effect using subtle inner shadows */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -2px 6px rgba(0, 0, 0, 0.1);

    transition: box-shadow 0.2s ease;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}

.class_TheRel.RealNotesFloat:focus {
    outline: none;
}
/*********************************** NotesFloat ************************************/




/***************************************** SpeakNow ***************************************/
/***************************************** SpeakNow ***************************************/
/***************************************** SpeakNow ***************************************/
.class_AIAbs.ContSpeakNow {
    width: 100%;
    height: 100%;
    border: 20px solid;
    border-image-slice: 1;
    border-width: 20px;
    border-image-source: linear-gradient(150deg, #1a2a40, #2c3e50 40%, #3a4f6b 80%, #1a2a40);
    background: transparent;
}
.class_RelFlex.SecTop.SpeakNow {
    background: linear-gradient(to right, #2c3e50, #3a4f6b); /* navy gradient */
    padding: 10px 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.class_RelFlexSpanLeft.SpeakNowHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0 20px;
    width: calc(100% - 540px);
    height: auto;
    
    /*************************************** WowFont NoClip *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #f0f4f8; /* light navy-gray for high contrast */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1);
    background-color: transparent;
    border-radius: 0;
    /*************************************** WowFont NoClip *************************************/
}
.class_RelImage.SpinMe {
    animation: spin360 5s linear infinite;
}
.class_RelImage.SpinMe2 {
    opacity: 0.7;
    animation: spin360 5s linear infinite;
}
@keyframes spin360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.class_SpeakNow {
    font-family: var(--fontFamilyArvo);
    box-sizing: border-box;
    position: absolute;
    display: block;
    float: left;
    
    top: 0;
    left: 0;
    padding: 20px;
    margin: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    
    background: rgba(245,245,245,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border: 2px groove white;
    box-shadow: var(--shadowIndent);
    overflow: auto;
    
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: blue;
    text-shadow: none;
    text-decoration: none;            
    
    resize: none;
    outline: none;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_SpeakNow:hover,.class_SpeakNow:active,.class_SpeakNow:focus  {
    outline: none;
}
.class_SpeakNow.Glass00 {
    background: transparent;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
.class_SpeakNow.Glass10 {
    background: rgba(245,245,245,0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.class_SpeakNow.Glass20 {
    background: rgba(245,245,245,0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.class_SpeakNow.GlassOrig {
    background: white;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/***************************************** SpeakNow ***************************************/




/*********************************** GenAnswer ************************************/
.class_TheAbs.ContGenAnswer {
    width: 100%;
    height: 100%;
    background: rgba(233,233,233,0.95);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 20px solid transparent; /* Reserve space for the border */
    border-image: linear-gradient(to bottom, black 0%,  black 60%, darkgray 100%) 1;
    border-image-slice: 1;
    resize: vertical;
    max-height: 100%;
    min-height: 100px;
    transition: height 0.3s ease;
}
.class_TheAbs.ContGenAnswerHTML {
    width: 100%;
    height: 100%;
    background: whitesmoke;
    border: none;
    padding: 20px;
    max-height: 100%;
    min-height: 100px;
    font-size: 24px;
    text-align: left;
    transition: height 0.3s ease;
    overflow: auto;
}
.class_RelFlex.SecTopGenAnswer {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    height: 70px;
    border-bottom: 2px groove lightgray;
    justify-content: flex-end;
    background: rgba(151, 151, 151, 0.95);
}

.class_RelFlexSpanLeft.GenAnswerHeader {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;
    width: calc(100% - 540px);
    height: 100%;

    /*************************************** WowFont YesClip *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #fff; /* Fallback color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #ffffff, #f0f0f0, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*************************************** WowFont YesClip *************************************/
}
.class_TheRel.SecBodyGenAnswer {
    width: 100%;
    height: calc(100% - 70px);
}
.class_TheRel.RealGenAnswer {
    padding: 20px;
    width: 100%;
    height: 100%;
    cursor: text; 
    user-select: text;
    overflow: auto;

    font-family: var(--fontFamilyArvo);
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;

    background-color: transparent;

    /* Sinking inset effect using subtle inner shadows */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -2px 6px rgba(0, 0, 0, 0.1);

    transition: box-shadow 0.2s ease;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
#id_ContGenAnswerHTML {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: lightgray;
}
#id_HeaderDiv {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: lighter;
    color: #2c3e50; /* Updated for better contrast */
    margin-bottom: 20px;
}
.toggleScoreContainer {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    width: 100%;
    padding: 10px;    
}
.toggle-label {
  cursor: pointer;
  font-size: 24px;             
}
.toggle-input {
  margin-right: 17px;
  transform: scale(1.8);
  transform-origin: left center;
  vertical-align: middle;  /* Try 'middle' or 'text-bottom' */
  position: relative;
  bottom: 4px; /* Adjust this value as needed */
}
.question-row {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.question-block {
  flex: 1;
  min-width: 250px;
  border: 1px solid #ccc;
  padding: 15px;
  padding-top: 0;
  border-radius: 8px;
  background: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.question-block-read7 {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 25px;
  position: relative; /* ✅ This makes the absolute span anchor to this block */
}


.question-block input[type="radio"] {
  transform: scale(1.5); /* Makes them larger */
  accent-color: #222;    /* Makes them dark (modern browsers only) */
  margin-right: 6px;     /* Optional: spacing between circle and label text */
}
.question-block:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.question-block label {
  display: block;
  margin: 5px 0;
  cursor: pointer;
}
.question-block input[type="radio"]:disabled + span {
  opacity: 0.6;
}
.question-block .answer-feedback {
  display: none;
  margin-top: 5px;
  font-weight: bold;
}
label.correct-answer {
  color: green;
}
label.wrong-answer {
  color: red;
}
.checkbox-large {
  transform: scale(1.5);
  transform-origin: left center;
}
.class_RelFlex.CircleScore {
  width: 130px;
  height: 90px;

  font-size: 36px;
  font-weight: bold;
  color: #222; /* Dark text for readability on light circle */

  background-color: #eaeaea; /* Light gray circle */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow for contrast */
  text-align: center;

    /************** BorderGradientBarPrettyPurple ************************/
    border: 8px solid;
    border-image-slice: 1;
    border-width: 8px;
    border-image-source: linear-gradient(150deg, #2ecc71, #50C878, #2abf88 100%);

  transition: border-color 0.3s ease;
}
.class_AbsFlexCenter.CircleScore {
  width: 130px;
  height: 90px;

  font-size: 36px;
  font-weight: bold;
  color: #222; /* Dark text for readability on light circle */

  background-color: #eaeaea; /* Light gray circle */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow for contrast */
  text-align: center;

    /************** BorderGradientBarPrettyPurple ************************/
    border: 8px solid;
    border-image-slice: 1;
    border-width: 8px;
    border-image-source: linear-gradient(150deg, #2ecc71, #50C878, #2abf88 100%);

  transition: border-color 0.3s ease;
}
/*********************************** GenAnswer ************************************/


/*********************************** ModalScore ************************************/
.class_AbsFlexCenter.BackModalScore {
    font-family: 'Century Gothic', sans-serif;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: rgba(0,0,0,0.71);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: auto;
}

    .card {
      box-sizing: border-box;
      background-color: white;
      border-radius: 0.7rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      padding: 1rem;
      margin: 20px;
      width: 440px;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .title-input {
        box-sizing: border-box;
        text-align: center;
        font-size: 2rem;
        font-weight: bold;
        color: #1f2937;
        margin-bottom: 1rem;
        border: 2px groove white;
        border-radius: 0.5rem;
        padding: 0.3rem;
        background-color: gainsboro;
        outline: none;
        width: 100%;
        box-shadow: var(--shadowIndent);
    }

    .summary {
      box-sizing: border-box;
      font-size: 1.3rem;
      color: #374151;
      display: grid;
      grid-template-columns: 1fr 1fr;
      row-gap: 0.5rem;
      margin-bottom: 1.5rem;
    }

    .label {
      box-sizing: border-box;
      text-align: right;
      font-weight: 600;
    }

    .percent-highlight {
      box-sizing: border-box;
      background-color: #3b82f6; /* blue-500 */
      color: white;
      text-align: center;
      font-size: 1.8rem;
      font-weight: bold;
      border-radius: 30px;
      padding: 8px;
      margin: 15px;
      margin-top: 0;
      margin-left: calc(50% - 85px);
      width: 160px;
    }

    .actions {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      gap: 6px;
      font-size: 0.8rem;
      font-weight: 500;
      color: white;  
    }
    
    .class_RelFlex.Button {
      box-sizing: border-box;
      width: 120px;
      height: 40px;
      border-radius: 9999px;
      cursor: pointer;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
      color: white;
      font-weight: 600;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    
    .class_RelFlex.Button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0)
      );
      border-radius: inherit;
      opacity: 0.7;
      pointer-events: none;
    }
    
    .class_RelFlex.Button.correct {
      background: linear-gradient(to bottom, #22c55e, #16a34a);
    }
    .class_RelFlex.Button.correct:hover {
      background: linear-gradient(to bottom, #16a34a, #15803d);
    }
    
    .class_RelFlex.Button.wrong {
      background: linear-gradient(to bottom, #ef4444, #dc2626);
    }
    .class_RelFlex.Button.wrong:hover {
      background: linear-gradient(to bottom, #dc2626, #b91c1c);
    }
    
    .class_RelFlex.Button.reset {
      background: linear-gradient(to bottom, #facc15, #eab308);
      color: black;
    }
    .class_RelFlex.Button.reset:hover {
      background: linear-gradient(to bottom, #eab308, #ca8a04);
    }
    
    .class_RelFlex.Button.toggle-persist {
      background: linear-gradient(to bottom, #64748b, #475569); /* gray-blue */
      color: white;
      line-height: 1.2;
      white-space: pre-wrap;
    }
    .class_RelFlex.Button.toggle-persist:hover {
      background: linear-gradient(to bottom, #475569, #334155);
    }

/*********************************** ModalScore ************************************/









/***************************************** Language ***************************************/
.class_TheAbs.ContLanguage {
  background: linear-gradient(to bottom right, #f0f8ff, #e6f0fa);
  border: 2px solid #4682B4;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #001f3f;
}
.class_RelFlex.SecTop.Language {
  background: linear-gradient(to right, #001f3f, #4682B4);
  color: #ffffff;
  border-radius: 8px 8px 0 0;
  padding: 10px 12px;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}
.class_RelFlexSpanLeft.HeaderLanguage {
  display: flex;
  align-content: center;
  justify-content: flex-start;
  width: calc(100% - 60px);
  height: 100%;
  padding-left: 10px;
  margin: 0;
  font-family: var(--fontFamilyArvo);
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(to right, #b0c4de, #87a9d9, #4682b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.class_TheRel.WrapLanguage {
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, #ffffff, #f2f6fc);
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
}
.class_RelFlex.WrapCurrent {
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom right, #e9f0f9, #cdd7e5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--fontFamilyArvo);
  
  font-size: 40px;
  
  font-weight: 600;
  color: blue;
  padding: 16px;
  border-radius: 0 0 8px 8px;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.class_LanguageSearch {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: text;
  height: 50px;
  width: 100%;
  padding-left: 12px;
  font-size: 16px;
  margin-bottom: 10px;
  border: 1px solid #a9bcd0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s;
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_LanguageSearch:focus {
  outline: none;
  border-color: #4682B4;
  box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.25);
}
.class_Language {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  background: transparent;
  border-radius: 8px;
  user-select: none;
  height: 50px;
  width: calc(50% - 6px);
  padding-left: 12px;
  font-family: var(--fontFamilyArvo);
  font-size: 18px;
  font-weight: 500;
  color: #1c2b3a;
  transition: background 0.2s, transform 0.2s;
}
.class_Language:hover {
  background-color: #edf3fb;
  transform: translateY(-1px);
}
.class_Language.selected {
  background: linear-gradient(to right, #c7dffc, #a6c8f1);
  font-weight: 600;
  box-shadow: inset 0 0 0 2px #4682B4;
}
/***************************************** Language ***************************************/





/***************************************** SpeakFloat ***************************************/
/***************************************** SpeakFloat ***************************************/
/***************************************** SpeakFloat ***************************************/
/* 1) Default container keeps your current behavior */
.class_ContSpeakFloat {
  box-sizing: border-box;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  top: calc(50% - 300px);
  left: calc(50% - 700px);
  width: 1400px;
  height: 600px;
  min-width: 400px;
  min-height: 300px;
  max-width: 100%;
  max-height: 100%;
  border: 20px solid;
  border-image-slice: 1;
  border-width: 20px;
  border-image-source: linear-gradient(150deg, #1a2a40, #2c3e50 40%, #3a4f6b 80%, #1a2a40);
  background: transparent;
  resize: both;
  overflow: hidden; 
}

/* Header */
.class_RelFlex.SecTop.SpeakFloat {
  height: 50px;
  background: linear-gradient(to right, #2c3e50, #3a4f6b);
  padding: 10px 0;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Body panes (default side-by-side) */
.class_TheRel.SecBody.SpeakFloat {
  width: 50%;
  height: calc(100% - 50px);
}
.class_RelFlexSpanLeft.SpeakFloatHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0 10px;
    width: calc(100% - 400px);
    height: auto;
    
    /*************************************** WowFont NoClip *************************************/
    font-family: 'Century Gothic', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #f0f4f8; /* light navy-gray for high contrast */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1);
    background-color: transparent;
    border-radius: 0;
    /*************************************** WowFont NoClip *************************************/
}
.class_RelImage.SpinMe {
    animation: spin360 5s linear infinite;
}
.class_RelImage.SpinMe2 {
    opacity: 0.7;
    animation: spin360 5s linear infinite;
}
@keyframes spin360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.class_SpeakFloat {
    font-family: var(--fontFamilyArvo);
    box-sizing: border-box;
    position: absolute;
    display: block;
    float: left;
    
    top: 0;
    left: 0;
    padding: 10px;
    margin: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    
    background: rgba(245,245,245,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border: 2px groove white;
    box-shadow: var(--shadowIndent);
    overflow: auto;
    
    font-size: 43px;
    font-weight: 500;
    text-align: left;
    color: blue;
    text-shadow: none;
    text-decoration: none;            
    
    resize: none;
    outline: none;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_SpeakFloat:hover,.class_SpeakFloat:active,.class_SpeakFloat:focus  {
    outline: none;
}


/* ================= LEFT-HALF MODE ================= */
/* ================= LEFT-HALF MODE ================= */
.class_ContSpeakFloat.left-half {
  box-sizing: border-box;
  position: fixed;            /* anchor to viewport */
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: 50% !important;    
  height: 100% !important;
  overflow: hidden;           
  display: flex;
  flex-direction: column;     /* stack children */
  flex-wrap: nowrap;          /* no wrapping while stacked */
  align-content: stretch;
}

/* In left-half: header stays 50px tall */
.class_ContSpeakFloat.left-half .class_RelFlex.SecTop.SpeakFloat {
  height: 50px !important;
  flex: 0 0 50px !important;
}

/* In left-half: each body pane is 50% of remainder (below header) */
.class_ContSpeakFloat.left-half .class_TheRel.SecBody.SpeakFloat {
  width: 100% !important;
  height: auto !important;      /* we'll drive with flex */
  flex: 1 1 0 !important;       /* two panes will split evenly */
  min-height: 0;                /* avoid overflow with flex children */
}

/* The textareas are absolutely positioned to fill their pane.
   That’s fine; just ensure their containing pane is positioned. */
.class_ContSpeakFloat.left-half .class_TheRel.SecBody.SpeakFloat {
  position: relative;           /* so absolute child fits this pane */
}

/* If you ever hide header (HeaderEye), both panes should fill 50/50 of full height */
.class_ContSpeakFloat.left-half.header-hidden .class_RelFlex.SecTop.SpeakFloat {
  display: none !important;
  height: 0 !important;
  flex: 0 0 0 !important;
}
.class_ContSpeakFloat.left-half.header-hidden .class_TheRel.SecBody.SpeakFloat {
  flex: 1 1 0 !important;
}

/* ================= RIGHT-HALF MODE ================= */
/* ================= RIGHT-HALF MODE ================= */
.class_ContSpeakFloat.right-half {
  position: fixed;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: 50% !important;    
  height: 100% !important;
  overflow: hidden;       
  display: flex;
  flex-direction: column;   /* stack children vertically */
  flex-wrap: nowrap;
  align-content: stretch;
}

/* Header stays fixed height */
.class_ContSpeakFloat.right-half .class_RelFlex.SecTop.SpeakFloat {
  height: 50px !important;
  flex: 0 0 50px !important;
}

/* Each body pane fills half of remaining height */
.class_ContSpeakFloat.right-half .class_TheRel.SecBody.SpeakFloat {
  width: 100% !important;
  height: auto !important;
  flex: 1 1 0 !important;
  min-height: 0;
  position: relative;
}



/*************** Resize Handle *****************/
.ui-resizable-handle {
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.15); /* Optional: subtle visibility */
  z-index: 9999;
}
/* Specific sides */
.ui-resizable-e,
.ui-resizable-w {
  cursor: ew-resize;
  width: 10px;
  right: 0;
}
.ui-resizable-n,
.ui-resizable-s {
  cursor: ns-resize;
  height: 10px;
  bottom: 0;
}
.ui-resizable-se {
  width: 16px;
  height: 16px;
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
}
/***************************************** SpeakFloat ***************************************/




/*********************************** PicLeft ************************************/
.class_TheAbs.ContPicLeft {
    border: 2px groove white;
    background: lightgray;
}
.class_RelFlex.SecTop.PicLeftTop {
    height: 90px;
    background: linear-gradient(150deg, #6a5acd, #8470ff); /* SlateBlue gradient */
    border-bottom: 2px groove white;
}
.class_TheRel.SecBodyPicLeft {
    display: block;
    width: 100%;
    height: calc(100% - 70px);
    cursor: pointer;
    overflow: auto;
    white-space: nowrap;
}
#id_PicLeftWrapper {
  top: 0;
  left: 0;
  display: inline-block;
  overflow: visible;
  transform-origin: center center;
  user-select: none;
}
.class_TheRel.SecBodyPicLeft.dragging {
  cursor: pointer !important;
}
.class_RelFlexSpanLeft.SpanTextForPicLeft {
    font-family: 'Century Gothic', sans-serif;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width: calc(100% - 480px);
    height: 100%;
    padding: 0;
    padding-left: 10px;
    margin: 0;
    color: white;
    font-size: 16px;    
    font-weight: 500;               
}
.class_RelPicLeft {
    display: block;                 /* Ensures the image behaves like a block element, not inline */
    position: static;              /* Default positioning — does not respond to top/left/right/bottom */
    
    width: auto;                   /* Image takes its natural width */
    height: auto;                  /* Image takes its natural height */
    max-width: none;               /* Removes any container-based max width (allows overflow) */
    max-height: none;              /* Same — allows image to exceed container height if zoomed */

    margin: 0;                     /* Removes default margin */
    padding: 0;                    /* No internal spacing */
    border: none;                  /* No visible border */
    border-radius: 0;              /* No rounded corners */
    background: transparent;       /* No background color or image */
    box-shadow: none;              /* No shadow effect */

    box-sizing: border-box;        /* Padding and border stay inside the width/height */

    cursor: pointer;                  /* Shows a hand cursor, indicating drag is possible */

    transform-origin: top left; /* Makes scale/rotate transform from the center of the image */
    transition: transform 0.3s ease; /* Smooth animation when rotating/scaling */
}
/*********************************** PicLeft ************************************/



/*********************************** PicRight ************************************/
.class_TheAbs.ContPicRight {
    border: 2px groove white;
    background: lightgray;
}
.class_RelFlex.SecTop.PicRightTop {
    height: 90px;
    background: linear-gradient(150deg, #daa520, #ffd700); /* Goldenrod gradient */
    border-bottom: 2px groove white;
}
.class_TheRel.SecBodyPicRight {
    display: block;
    width: 100%;
    height: calc(100% - 70px);
    cursor: pointer;
    overflow: auto;
    white-space: nowrap;
}
#id_PicRightWrapper {
  top: 0;
  left: 0;
  display: inline-block;
  overflow: visible;
  transform-origin: center center;
  user-select: none;
}
.class_TheRel.SecBodyPicRight.dragging {
  cursor: pointer !important;
}
.class_RelFlexSpanLeft.SpanTextForPicRight {
    font-family: 'Century Gothic', sans-serif;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width: calc(100% - 480px);
    height: 100%;
    padding: 0;
    padding-left: 10px;
    margin: 0;
    color: white;
    font-size: 16px;    
    font-weight: 500;               
}
.class_RelPicRight {
    display: block;                 /* Ensures the image behaves like a block element, not inline */
    position: static;              /* Default positioning — does not respond to top/left/right/bottom */
    
    width: auto;                   /* Image takes its natural width */
    height: auto;                  /* Image takes its natural height */
    max-width: none;               /* Removes any container-based max width (allows overflow) */
    max-height: none;              /* Same — allows image to exceed container height if zoomed */

    margin: 0;                     /* Removes default margin */
    padding: 0;                    /* No internal spacing */
    border: none;                  /* No visible border */
    border-radius: 0;              /* No rounded corners */
    background: transparent;       /* No background color or image */
    box-shadow: none;              /* No shadow effect */

    box-sizing: border-box;        /* Padding and border stay inside the width/height */

    cursor: pointer;                  /* Shows a hand cursor, indicating drag is possible */

    transform-origin: top left; /* Makes scale/rotate transform from the center of the image */
    transition: transform 0.3s ease; /* Smooth animation when rotating/scaling */
}
/*********************************** PicRight ************************************/







/******************************************** KIDS *****************************************/
/******************************************** KIDS *****************************************/
.class_KIDSListeningWord, .class_KIDSReadingWord {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    display: inline-block;
    cursor: pointer;

    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #d0d7de;
    border-radius: 16px;

    font-size: 16px;
    font-weight: 500;
    color: #2e2e2e;
    padding: 9px 15px;
    margin: 6px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.class_KIDSSpeakingBox, .class_KIDSWritingBox {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    display: inline-block;
    cursor: pointer;
    
    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #d0d7de;
    border-radius: 16px;

    width: 135px;
    height: 115px;
    color: #2e2e2e;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 15px;
    margin: 6px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.class_KIDSSectionCard {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;

    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    border: 2px solid #d0d7de;

    width: 135px;
    height: 70px;
    font-size: 14px;
    font-weight: 500;
    color: #2e2e2e;
    padding: 9px 15px;
    margin: 6px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.class_KIDSListeningWord:hover,
.class_KIDSReadingWord:hover,
.class_KIDSSpeakingBox:hover,
.class_KIDSWritingBox:hover,
.class_KIDSSectionCard:hover {
    background: linear-gradient(135deg, #cce5ff, #b3d9ff);
    color: #002e5d;
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.18);
    transition: all 0.3s ease;
    cursor: pointer;
}
.class_KIDSListeningWord,
.class_KIDSReadingWord,
.class_KIDSSpeakingBox,
.class_KIDSWritingBox,
.class_KIDSSectionCard {
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.class_TheRel.LineHeader.KIDS {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.class_TheRel.LineHeader.KIDS:hover {
    background-color: #e0e0e0;
}

.class_TheRel.LineHeader.KIDSActive {
    background-color: DodgerBlue;
    font-weight: 600;
}

.class_TheAbs.Counts {
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    
    color: #2e2e2e;
    font-size: 12px;
    font-weight: lighter;
    text-align: left;         
}

.class_KIDSRead5Words,
.class_KIDSRead6Words,
.class_KIDSRead7Words,
.class_KIDSSpeak1Words,
.class_KIDSSpeak2Words,
.class_KIDSSpeak4Words,
.class_KIDSSpeak5Words,
.class_KIDSSpeak6Words,
.class_KIDSWrite1Words,
.class_KIDSWrite2Words,
.class_KIDSWrite3Words {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #d0d7de;
    border-radius: 16px;

    width: 175px;
    height: 85px;
    color: #2e2e2e;
    font-size: 11px;
    font-weight: lighter;
    text-align: center;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 4px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.class_KIDSSpeak3Words {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    display: inline-block;

    background: linear-gradient(to right, #ffffff, #eef2f7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #d0d7de;
    border-radius: 16px;

    width: auto;
    height: auto;

    color: #2e2e2e;
    font-size: 12px;
    font-weight: lighter;
    padding: 15px;
    margin: 6px;

    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.class_KIDSRead5Words:hover,
.class_KIDSRead6Words:hover,
.class_KIDSRead7Words:hover,
.class_KIDSSpeak1Words:hover,
.class_KIDSSpeak3Words:hover,
.class_KIDSSpeak5Words:hover,
.class_KIDSSpeak6Words:hover,
.class_KIDSWrite1Words:hover,
.class_KIDSWrite2Words:hover,
.class_KIDSWrite3Words:hover {
    background: linear-gradient(135deg, #b399ff, #7a57ff); /* medium darker purple to deeper purple */
    color: #f0e6ff; /* light lilac text */
    box-shadow: 0 6px 12px rgba(179, 153, 255, 0.5); /* medium purple glowing shadow */
    transition: all 0.3s ease;
    cursor: pointer;
}
/************************************* KIDSOneQ ************************************/
.class_TheAbs.BackKIDSOneQ {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    width: 100%;
    height: 100%;
    background: whitesmoke;
    font-size: 36px;
}
.class_RelFlex.TubeKIDSOneQ {
    width: 100%;
    height: 70px;                         
}
.class_RelFlex.ScoreKIDSOneQ {
    font-family: var(--fontFamilyBubble);
    width: auto;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 20px;
    border: 6px solid #008fc9;
    border-radius: 2em;
    background: transparent;
    font-weight: 600;
    color: white;
}
.class_TheRel.BodyKIDSOneQ {
    width: 100%;
    height: 100%;
    overflow: auto;                                                      
}
.class_TubeKIDSOneQ {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    float: left;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    width: 130px;
    height: auto;                                            
}
.toggle-label-KIDSOneQ {
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;     
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row; 
  width: 100%;
  text-align: center;
}
.toggle-input-KIDSOneQ {
  transform: scale(1.2); 
  margin-bottom: 4px;    
  margin-right: 8px;
}
.class_TheRel.WrapScore {
    width: 100%;
    height: 100%;     
}
.class_TheAbs.WrapScore {
    top: calc(100% - 110px);
    left: calc(100% - 130px);
    width: auto;
    height: auto;   
}
.class_RelFlex.LabelScore {
  width: 130px;
  height: 90px;
  
  font-size: 36px;
  font-weight: bold;
  color: #222; /* Dark text for readability on light circle */

  background-color: #eaeaea; /* Light gray circle */
  box-shadow: none;
  text-align: center;

    /************** BorderGradientBarPrettyPurple ************************/
    border: 8px solid;
    border-image-slice: 1;
    border-width: 8px;
    border-image-source: linear-gradient(150deg, #2ecc71, #50C878, #2abf88 100%);

  transition: border-color 0.3s ease;
}
.question-block-KIDSOneQ {
    box-sizing: border-box;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    min-height: 100%;
    height: auto;
    border: none;
    padding: 20px;
    padding-top: 0;
    border-radius: 0;
    background: transparent;                     
    box-shadow: none;
    transition: box-shadow 0.3s ease, transform 0.3s ease;          
    border: 1px groove white;  
}
.question-block-KIDSOneQ input[type="radio"] {
    transform: scale(1.5);
    accent-color: #222;
    margin-right: 6px;                  
}
.question-block-KIDSOneQ:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.question-block-KIDSOneQ label {
    display: block;
    margin: 5px 0;
    cursor: pointer;
}
.question-block-KIDSOneQ input[type="radio"]:disabled + span {
    opacity: 0.6;
}
.question-block-KIDSOneQ .answer-feedback {
    box-sizing: border-box;
    display: none;
    margin-top: 5px;
    font-weight: bold;
}
/************************************* KIDSOneQ ************************************/


.class_TheAbs.BackKIDS4Q {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    width: 100%;
    height: 100%;
    background: lightgray;
    font-size: 36px;
}
.class_RelFlex.TubeKIDS4Q {
    flex-wrap: wrap;
    width: 100%;
    height: 70px;                         
}
.class_RelFlex.ScoreKIDS4Q {
    font-family: var(--fontFamilyBubble);
    width: auto;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 20px;
    border: 6px solid #008fc9;
    border-radius: 2em;
    background: #008fc9;
    
    font-weight: 600;
    color: white;
}
.class_TheRel.BodyKIDS4Q {
    width: 100%;
    height: calc(100% - 70px);

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px;     
    padding-top: 0;
}
.class_RelFlex.Quadrant {
    width: 50%;
    height: 50%;
    border: none;
    justify-content: flex-start;
    align-items: flex-start;
}
.class_TheRel.Box4Q {
  width: 100%;
  height: 100%;
  background: transparent;
  padding: 10px;
  font-weight: 500;
  text-align: left;
  color: #222;
  overflow: auto;
}
.class_TheAbs.GoodJob {
    top: calc(100% - 450px);
    left: calc(100% - 350px);
    width: 200px;
    height: 200px;        
}
.class_TheAbs.GoodJobTOEIC {
    top: calc(100% - 360px);
    left: calc(100% - 200px);
    width: 150px;
    height: 150px;        
}
@media only screen and (min-width: 400px) {
    .class_TheRel.BodyKIDS4Q {font-size: 16px;}
    .class_TheAbs.GoodJob {top: calc(100% - 250px);}
    .class_TheAbs.GoodJobTOEIC {top: calc(100% - 50px);}
}
@media only screen and (min-width: 700px) {
    .class_TheRel.BodyKIDS4Q {font-size: 18px;}
    .class_TheAbs.GoodJob {top: calc(100% - 250px);}
    .class_TheAbs.GoodJobTOEIC {top: calc(100% - 120px);}
}
@media only screen and (min-width: 1200px) {
    .class_TheRel.BodyKIDS4Q {font-size: 20px;}
    .class_TheAbs.GoodJob {top: calc(100% - 250px);}
    .class_TheAbs.GoodJobTOEIC {top: calc(100% - 170px);}
}
@media only screen and (min-width: 1900px) {
    .class_TheRel.BodyKIDS4Q {font-size: 28px;}
    .class_TheAbs.GoodJob {top: calc(100% - 250px);}
    .class_TheAbs.GoodJobTOEIC {top: calc(100% - 250px);}
}
.question-block-KIDS4Q {
  box-sizing: border-box;
  flex: 1;
  min-width: 250px;
  height: calc(100% - 10px);
  border: 1px solid #ccc;
  padding: 30px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 8px;
  background: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease; 
}
.question-block-KIDS4Q input[type="radio"] {
  transform: scale(1.5); /* Makes them larger */
  accent-color: #222;    /* Makes them dark (modern browsers only) */
  margin-right: 6px;     /* Optional: spacing between circle and label text */
}
.question-block-KIDS4Q:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.question-block-KIDS4Q label {
  display: block;
  margin: 5px 0;
  cursor: pointer;
}
.question-block-KIDS4Q input[type="radio"]:disabled + span {
  opacity: 0.6;
}
.question-block-KIDS4Q .answer-feedback {
  display: none;
  margin-top: 5px;
  font-weight: bold;
}
.class_TheAbs.AnswerRand {
    font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
    justify-content: flex-start;
    top: calc(100% - 20px);
    left: 10px;
    width: auto;
    height: auto;
    
    color: gray;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}
.class_AnswerRandTOEICRead7 {
    font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
    position: absolute;
    display: block;
    float: left;
    top: 0;
    right: 0;
    padding: 10px;
    margin: 0;
    width: auto;
    height: auto;
    
    color: gray;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}
/******************************************** KIDS *****************************************/
/******************************************** KIDS *****************************************/


.class_TheRel.InputCriteria {
    font-family: var(--fontFamilyArvo);
    padding: 20px 24px;
    margin: 20px auto;
    width: calc(100% - 100px);
    height: 200px;

    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    background: transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    color: #222;
    font-size: 36px;
    font-weight: 500;
    text-align: left;
    resize: none;
    overflow-y: auto;
    transition: all 0.25s ease;
}
.class_TheRel.InputCriteria:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 6px 24px rgba(74, 144, 226, 0.25);
    background: #fff;
    color: dodgerblue;
}



/********************************** KIDSWrite **************************************/
/********************************** KIDSWrite **************************************/
.class_TheAbs.ContWrite {
  font-family: var(--fontFamilyArvo);
  background: white;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
}

/* Left / Right panes (sizes unchanged) */
.class_TheRel.WrapLeft {
  width: 350px;                  
  height: 100%;
  border: 2px groove white;
  overflow: auto;
  background: #e7e7ea; /* friendlier neutral than pure lightgray */
}
.class_FixedBottomRight.TubeBottomRight1 {
    bottom: 20px;
    right: 20px;
    width: auto;
    height: auto;
}
.class_FixedBottomRight.TubeBottomRight2 {
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
}
.class_FixedTopRight.TubeTop:hover {
    background: transparent;
}
.class_TheAbs.AbsWrapRight {
    width: 100%;
    height: 100%;
    padding: 0;
    
    background: rgba(233,233,233,0.95);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 20px solid transparent; /* Reserve space for the border */
    border-image: linear-gradient(to bottom, #007FFF, #66B2FF); /* Azure Blue gradient */
    border-image-slice: 1;
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.2), /* main inner shadow */
      inset 0 -2px 4px rgba(0,0,0,0.1); /* softer lower shadow */
}
.class_TheRel.WrapRight {
  font-family: var(--fontFamilyArvo);
  padding: 20px;
  padding-top: 40px;
  width: calc(100% - 350px);             
  height: 100%;
  overflow: auto;
  font-size: 36px;
  text-align: left;
  line-height: 1.7;
  background: #fff;
  
  /* subtle "sunk" look */
  border: 2px solid #ccc; /* cleaner than groove for inset effect */
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.2), /* main inner shadow */
    inset 0 -2px 4px rgba(0,0,0,0.1); /* softer lower shadow */
  
}
.class_BB.Quadrant {
    font-family: var(--fontFamilyArvo);
    width: 50%;
    height: 50%;
    background: white;
    border: none;
    resize: none;
    transition: height 0.3s ease;
    user-select: text;
    font-size: 36px;
}
#id_BoxTextQuadrant-0, #id_BoxTextQuadrant-1 {
    border-bottom: 4px solid dodgerblue;
}
#id_BoxTextQuadrant-0, #id_BoxTextQuadrant-2 {
    border-right: 4px solid dodgerblue;
}

.class_BB.BoxTextTop {
    font-family: var(--fontFamilyArvo);
    width: 33.333%;
    height: 50%;
    background: whitesmoke;
    border: 2px groove white;
    resize: none;
    transition: height 0.3s ease;
    user-select: text;
    font-size: 48px;
}
.class_BB.BoxTextBottom {
    font-family: var(--fontFamilyArvo);
    width: 100%;
    height: 50%;
    background: whitesmoke;
    border:  2px groove white;
    resize: none;
    transition: height 0.3s ease;
    user-select: text;
    font-size: 70px;
}
.class_BB.RealWrite {
    font-family: var(--fontFamilyArvo);
    width: 100%;
    height: 100%;
    background: white;
    border: 20px solid transparent; /* Reserve space for the border */
    border-image: linear-gradient(to bottom, #9400D3, #8A2BE2) 1; /* darkviolet */
    border-image-slice: 1;
    resize: none;
    transition: height 0.3s ease;
    user-select: text;
}

/* Bank container (make actual .WordBank flex without changing size) */
.class_TheRel.WordBank {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
}

/* Legacy helper if some pages still use .bank */
.bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
}

.class_TheRel.LeftBlock {
  font-family: var(--fontFamilyRoboto);
  font-size: 14px !important;
  font-weight:lighter !important;
  color: gray;
  width: 100%;
  height: auto;
}

/* =========================
   Word chip
   (width/height left as-is)
========================= */
.chip {
  font-family: var(--fontFamilyArvo);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 0;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid #d9d9de;
  border-radius: 12px;
  background: #fff;
  width: calc(100% - 20px);
  height: auto;
  font-size: 36px;
  font-weight: 500;
  color: black !important;
  text-align: center;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
  outline: none;
}

.chip:hover,
.chip:focus {
  background: #f7f9fc;
  border-color: #cfd8dc;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
  transform: translateY(-1px);
}

/* Keyboard-only focus ring */
.chip:focus-visible {
  box-shadow: 0 0 0 3px rgba(25,118,210,.25);
}

/* Optional: muted look once a word has been used */
.chip.used {
  color: #777;
  background: #f3f3f3;
  border-color: #e0e0e0;
  text-decoration: line-through;
}

/* =========================
   Sentences + dropdowns
========================= */
.ClozeSentence {
  font-family: var(--fontFamilyArvo);
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin-top: 25px;
  font-size: 48px;
  text-align: left;
  cursor: pointer;
}

.class_TheRel.WrapRight select {
  font-family: var(--fontFamilyArvo);
  font-size: 36px;
  text-align: left;
  cursor: pointer;
}

/* Dropdown blank styling (min-width unchanged) */
.ClozeSentence select {
  margin: 0 6px;
  padding: 4px 6px;
  min-width: 120px;
  background: #e6e6eb;
  border-radius: 10px;
  border: 1px solid #c9c9cf;                        border: 4px solid black;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  cursor: pointer;
}

.ClozeSentence select:hover {
  border-color: #9aa5b1;
  background: #eeeff3;
  cursor: pointer;
}

.ClozeSentence select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25,118,210,.2);
  border-color: #6b85ff;
  cursor: pointer;
}

/* =========================
   Controls
========================= */
.ClozeControls {
  width: 100%;
  height: 100px; 
  margin-top: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;      
}

/* Score display */
.ClozeScore {
  margin-left: 8px;
  font-weight: 600;
}

/* =========================
   Selection feedback
========================= */
select.SelectedYellow {
  outline: 2px solid #c5a600;     /* rich golden border */
  background-color: lemonchiffon; /* soft yellow background */
  color: #000;
}

/* ✅ Correct: Spring Green theme */
.chip.correct,
select.correct {
  background-color: #00ff7f;
  border-color: #2e7d32;
  color: #000;
  outline: 2px solid #2e7d32;
}

/* ❌ Incorrect: high-contrast but readable */
.chip.incorrect,
select.incorrect {
  background-color: #ffb6c1;
  border-color: #c2185b;
  color: #000;
  outline: 2px solid #c2185b;
}

/* 👁 Show answer: Dodger Blue theme */
.chip.show-answer,
select.show-answer {
  background-color: #1e90ff;
  border-color: #104e8b;
  color: #fff;
  outline: 2px solid #104e8b;
}

/* Optional: compact mode for small screens or dense banks (no size changes here) */
.bank.compact .chip {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 10px;
}

/* =========================
   Buttons 
========================= */
.class_RelFlex.Button.WriteCheck {
  width: 150px;
  height: 60px;
  font-size: 18px;
  background: linear-gradient(to bottom, #22c55e, #16a34a);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
  transition: transform .05s ease, filter .15s ease;
}
.class_RelFlex.Button.WriteCheck:hover { background: linear-gradient(to bottom, #16a34a, #15803d); }
.class_RelFlex.Button.WriteCheck:active { transform: translateY(1px); }

.class_RelFlex.Button.WriteReset {
  width: 150px;
  height: 60px;
  font-size: 18px;
  background: linear-gradient(to bottom, #ef4444, #dc2626);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
  transition: transform .05s ease, filter .15s ease;
}
.class_RelFlex.Button.WriteReset:hover { background: linear-gradient(to bottom, #dc2626, #b91c1c); }
.class_RelFlex.Button.WriteReset:active { transform: translateY(1px); }

.class_RelFlex.Button.WriteShow {
  width: 150px;
  height: 60px;
  font-size: 18px;
  background: linear-gradient(to bottom, #facc15, #eab308);
  color: #000;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
  transition: transform .05s ease, filter .15s ease;
}
.class_RelFlex.Button.WriteShow:hover { background: linear-gradient(to bottom, #eab308, #ca8a04); }
.class_RelFlex.Button.WriteShow:active { transform: translateY(1px); }

.class_RelFlex.Button.WriteExplain {
  width: 150px;
  height: 60px;
  font-size: 18px;
  background: linear-gradient(to bottom, #3b82f6, #2563eb); /* Blue gradient */
  color: #fff; /* White text for contrast */
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
  transition: transform .05s ease, filter .15s ease;
}
.class_RelFlex.Button.WriteExplain:hover { background: linear-gradient(to bottom, #2563eb, #1d4ed8);}
.class_RelFlex.Button.WriteExplain:active { transform: translateY(1px); }


/* Misc helpers */
.class_Watermark { pointer-events: none; }

/* highlight select when a chip hovers over it */
select.droptarget {
  outline: 3px dashed #aaa;
  outline-offset: 3px;
}

/* feedback on the dragged chip */
#id_WordBank .chip.dragging { opacity: 0.6; }

/* optional: mark once-used chips */
#id_WordBank .chip.used {
  opacity: 0.5;
  pointer-events: none; /* prevents dragging again */
}

/********************************** KIDSWrite **************************************/
/********************************** KIDSWrite **************************************/







/********************************** TransferExam **************************************/
/********************************** TransferExam **************************************/
.class_TheAbs.ContTE {
    width: 100%;
    height: 100%;
    border: 20px solid rgba(0,0,0,0.8);
    background: white;
    
    font-family: var(--fontFamilyArvo);
    font-size: 95px;
    font-weight: 500;
    text-align: center;
    color: #222;
    
    background: white;
    border: 4px solid rgba(188, 188, 188, 0.9); /* bright white border */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7); /* cool glowing effect */
}
.class_RelFlex.SecTop.TE {
    background: lightgray;    
}
.class_RelFlex.SecTop.TE.WordBank {
    background: linear-gradient(to right, #222, #444); /* dark gray gradient */
    color: white; /* optional, for better contrast */
}
.class_AbsFlexCenter.HeaderForSecTop {
    justify-content: flex-start;
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    
    padding-left: 20px;
    width: auto;
    height: 100%;
    font-size: 18px;
    font-weight: 500;
    text-shadow: none;
    color: black;
}
.class_AbsFlexCenter.HeaderForSecTop.WordBank {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    padding-left: 20px;
    width: auto;
    height: 100%;
    justify-content: flex-start;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    text-shadow: none;
    color: white;
}
.class_TheRel.WrapTEBody {
    padding: 20px;
    width: 100%;
    height: 100%;
    border: 2px groove white;
    font-size: 28px;
    text-align: left;
    overflow: auto;
}
.class_TheRel.TEInstruct {
    font-family: var(--fontFamilyRoboto);
    width: 100%;
    height: auto;
    font-size: 18px;
    font-weight: 500;                                 
}
.TEInfo, .class_TheRel.TEWrapOptions, .TEDialogueLine {
    width: 100%;
    height: auto;
    font-size: 36px;
    font-weight: 500;                               
}
.TEInfo {
    padding-bottom: 20px;
}
.class_TheRel.TETube {
    padding: 20px;
    width: 100%;
    height: auto;                           
}
.class_TheRel.TEWrapAnswer {
    padding-top: 20px;
    border-top: 2px groove white;
    width: 100%;
    height: auto;
    font-size: 36px;
}
.class_TEButton {
    font-family: 'Segoe UI', sans-serif;
  padding: 10px 24px;
  font-size: 18px;
  cursor: pointer;
  border: none;
  border-radius: 9999px; /* Full pill shape */
  color: white;
  font-weight: 500;
  background: linear-gradient(145deg, #a9a9a9, #808080); /* Shiny gray */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.class_TEButton:hover {
  background: linear-gradient(145deg, #808080, #a9a9a9); /* Subtle inverse */
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.class_TEButton.Submit,
.class_TEButton.Answer,
.class_TEButton.Refresh,
.class_TEButton.Spacing,
.class_TEButton.MCQ,
.class_TEButton.Restart {
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    margin: 6px;
    width: 130px;
    height: 50px;
    font-size: 16px;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    color: white;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.class_TEButton.Submit {
    background: linear-gradient(135deg, #00bfff, #1e90ff);
}
.class_TEButton.Submit:hover {
    background: linear-gradient(135deg, #1e90ff, #00bfff);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(0, 191, 255, 0.4);
}
.class_TEButton.Refresh {
    margin-left: 6px;
    background: linear-gradient(135deg, #dc3545, #ff6b81);
}
.class_TEButton.Refresh:hover {
    background: linear-gradient(135deg, #ff6b81, #dc3545);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4);
}
.class_TEButton.Answer {
    margin-left: 6px;
    background: linear-gradient(135deg, #28a745, #43c767);
}
.class_TEButton.Answer:hover {
    background: linear-gradient(135deg, #43c767, #28a745);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
}
.class_TEButton.Spacing {
  background: linear-gradient(135deg, #6c757d, #495057);
}
.class_TEButton.Spacing:hover {
  background: linear-gradient(135deg, #495057, #6c757d);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}
.class_TEButton.MCQ {
  background: linear-gradient(135deg, #6c757d, #495057);
}
.class_TEButton.MCQ:hover {
  background: linear-gradient(135deg, #495057, #6c757d);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}
.class_TEButton.Restart {
  background: linear-gradient(135deg, #6c757d, #495057);
}
.class_TEButton.Restart:hover {
  background: linear-gradient(135deg, #495057, #6c757d);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}

/* Bigger, well-spaced radios */
.class_TheRel.TEWrapOptions input[type="radio"] {
    width: 32px;             /* radio width */
    height: 32px;            /* radio height */
    margin-right: 20px;      /* space after the circle */
    margin-bottom: 0;     /* vertical breathing room */
    vertical-align: middle;  /* center with text */
    accent-color: dodgerblue;/* modern browsers: custom color */
    cursor: pointer;
}

/* Ensure each label has space */
.class_TheRel.TEWrapOptions label {
    display: flex;
    align-items: center;
    line-height: 1.5;
    margin-bottom: 5px;  /* extra gap between options */
}
.Correct {
    background-color: #d4edda;   /* light green */
    border: 2px solid #28a745;
    border-radius: 8px;
    padding: 6px;
}
.Wrong {
    background-color: #f8d7da;   /* light red */
    border: 2px solid #dc3545;
    border-radius: 8px;
    padding: 6px;
}
.Target {
  font-weight: 700;
  text-decoration: underline;
}
/* shows a green check only AFTER submit, because you add .Correct then */
.TEOptionLabel.Correct::after {
  content: "✔";
  margin-left: .5rem;
  font-weight: 700;
  color: #16a34a; /* green */
}

/* (optional) show a red X for the chosen wrong one */
.TEOptionLabel.Wrong::after {
  content: "✖";
  margin-left: .5rem;
  font-weight: 700;
  color: #dc2626; /* red */
}

/* The options container has no font-size set; it only hosts the variable */
#id_TEWrapOptions { /* intentionally no font-size here */ }
/* Labels use the variable (only these will change) */
.TEOptionLabel {
  display: flex;
  align-items: center;
  line-height: 1.5;
  margin-bottom: 20px;
  font-size: var(--te-option-font-size);
  cursor: pointer;
}
/* Radios can stay fixed, or optionally scale with the label size */
.TEOptionRadio {
  width: 32px;
  height: 32px;
  margin-right: 20px;
  margin-bottom: 5px;
  vertical-align: middle;
  accent-color: dodgerblue;
  cursor: pointer;   

  /* OPTIONAL: make radios grow with text; remove if you want fixed */
  transform: scale(calc(var(--te-option-font-size, 36px) / 36)); 
  transform-origin: left center;
}
/* Your existing styles keep Instruct and Buttons at their own sizes */
.class_TheRel.TEInstruct { font-size: 18px; font-weight: 500; }
.class_TEButton { font-size: 18px; }
.class_TEButton.Submit,
.class_TEButton.Refresh { font-size: 16px; }

/* Dropdown for primary stress guess */
.TEUserSelect {
  min-width: 75px;
  min-height: 50px;
  width: auto;
  height: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
  cursor: pointer;

  font-family: var(--fontFamilyBubble, system-ui, sans-serif);
  font-size: 24px;
  font-weight: 600;

  color: var(--text, #222);
  background: #fff;
  border: 1px solid rgba(0,0,0,.45);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) inset;

  margin-left: 12px;

  /* Remove native styling quirks and arrow where possible */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

  /* Smooth interactions */
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;

  /* Center text inside select on Firefox/Windows */
  text-align-last: center;
}

/* Custom dropdown arrow (pure CSS) */
.TEUserSelect {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 45%,
    calc(100% - 8px) 45%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 24px; /* room for the arrow */
  cursor: pointer;
}

/* Focus/hover/active states */
.TEUserSelect:focus {
  outline: none;
  border-color: #5aa9ff;
  box-shadow: 0 0 0 3px rgba(90,169,255,.25);
}
.TEUserSelect:hover {
  border-color: rgba(0,0,0,.25);
}
.TEUserSelect:active {
  transform: scale(0.98);
}

/* Hide default arrow in IE/Edge (old) */
.TEUserSelect::-ms-expand {
  display: none;
}

/* Option styling (helps on some browsers) */
.TEUserSelect option {
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.TERomanized {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-left: 20px;
    width: auto;
    height: 60px;
    border: none;

    font-family: var(--fontFamilyArvo);
    font-size: 24px;
    font-weight: lighter;
}
.class_FixedBottomRight.TEPic {
  bottom: 15px;
  right: calc(50% - 200px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.class_FixedBottomRight.TEPic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/************** TransferExam · Word Bank (external additions) **************/
.class_TheRel.TEWrapStory {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.class_TheRel.WrapWordBank {
    width: 100%;
    height: calc(100% - 80px);
    overflow: auto;
}
.class_RelFlex.WordBankTETube {
    width: 100%;
    height: 80px;                     
}
.class_TheRel.WrapTELeft {
    width: 350px;
    height: 100%;                   
    background: whitesmoke;
    
}
.class_TheRel.WrapTERight {
    width: calc(100% - 350px);
    height: 100%;                             
}

/* Left: word bank chips */
#id_WordBankList.TEWordBankList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
}

.TEWordChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 9999px;
  background: #eef2f7;
  border: 1px solid #d8dee9;
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  
  border: none;
  background: transparent;
}

/* Right: story content */
#id_TEStoryContent.TEStoryContent {
    font-family: var(--fontFamilyArvo);
  line-height: 1.95;
  font-size: var(--te-story-font-size, 36px);
  padding: 16px 18px;
  color: #111;
  text-align: left;
}

/* Blank → select wrappers */
.TEBlankWrap {
  display: inline-block;
  min-width: 180px;
  margin: 0 4px;
}

/* Dropdowns */
.TEBlankSelect {
  font-family: var(--fontFamilyArvo);
  font-size: var(--te-blank-font-size, 36px);
  text-align: left;
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid darkgray;
  background-color: lightgray;
  outline: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.TEBlankSelect:hover {
  border-color: #9aa8ba;
}

.TEBlankSelect:focus {
  border-color: #5aa9ff;
  box-shadow: 0 0 0 3px rgba(90,169,255,.25);
  background: lightsteelblue;
  color: black;
}

/* Feedback coloring (reuses your palette) */
.TEBlankSelect.Correct {
  background-color: #d4edda;     /* light green */
  border-color: #28a745;
}

.TEBlankSelect.Wrong {
  background-color: #f8d7da;     /* light red */
  border-color: #dc3545;
}

/* Filled story preview appended below */
.TEFilledSentence {
  margin-top: 12px;
  padding: 10px 12px;
  background: transparent;
  border-top: none;
  border-radius: 0;
  text-align: left;

  font-size: var(--te-story-font-size, 36px);
  line-height: calc(var(--te-story-font-size, 36px) * 1.2);
}
.TEScoreNote {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: calc(var(--te-story-font-size, 36px) * 1.5);
  line-height: calc(var(--te-story-font-size, 28px) * 1.7);
  font-weight: 600;
  color: #111;
}


/* Screen-reader only labels (for each blank) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Responsive niceties */
@media (max-width: 900px) {
  /* Stack panels on small screens (your base layout keeps widths; this helps when narrow) */
  #id_WrapTELeft, #id_WrapTERight {
    width: 100% !important;
    height: auto;
  }
  .TEBlankWrap { min-width: 140px; }
  .TEBlankSelect { font-size: 17px; }
}

@media (max-width: 600px) {
  .TEBlankWrap { min-width: 120px; }
  .TEBlankSelect { font-size: 16px; }
  .TEWordChip { font-size: 15px; }
}



.class_RelFlex.SecTop.TE.Reading {
    background: linear-gradient(to right, #222, #444); /* darkgray gradient */
    color: white; /* optional, for better contrast */
}
.class_AbsFlexCenter.HeaderForSecTop.Reading {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    padding-left: 20px;
    width: auto;
    height: 100%;
    justify-content: flex-start;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    text-shadow: none;
    color: white;
}
.class_TheRel.SecBody.Reading {
    width: 100%;
    height: 100%;
}
.class_TheRel.WrapTELeftReading {
    width: 50%;
    height: 100%;     
    border-right: 1px solid black;
}
.class_TheRel.WrapPassage {
    padding: 20px;
    width: 100%;
    height: calc(100% - 80px); 

    font-family: var(--fontFamilyArvo);
    flex-wrap: wrap;
    text-align: left;
    font-size: 44px;
    font-weight: lighter;
    color: black;
    
    user-select: text;
    outline: none;
    resize: none;
    overflow: auto;
    cursor: text;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_RelFlex.PassageTETube {
    width: 100%;
    height: 80px;                                
}

.class_TheRel.WrapTERightReading {
    width: 50%;
    height: 100%;     
    text-align: left;
}
.class_TheRel.WrapQuiz {
    padding: 10px;
    padding-top: 0;
    line-height: 1;
    width: 100%;
    height: calc(100% - 70px);     
    text-align: left;
    overflow: auto;
    background: whitesmoke;
    box-shadow: var(--shadowIndent);
}
.class_TheRel.SecQuizQuestions {
    width: 100%;
    height: auto;
    
    font-family: var(--fontFamilyArvo);
    text-align: left;
    font-size: 18px;
    font-weight: lighter;
    color: black;
}
.class_TheRel.SecQuizAnswers {
    width: 100%;
    height: auto;

    font-family: var(--fontFamilyArvo);
    text-align: left;
    font-size: 18px;
    font-weight: lighter;
    color: black;
}


/* Group title inside quiz column */
.TEGroupTitle_Reading {
  font-family: var(--fontFamilyArvo);
  font-weight: 600;
  margin: 12px 0 6px;
}

/* Each question container */
.TEItem_Reading {
  padding: 6px 0;
  cursor: pointer;
}

/* Stems (question text) */
.TEStem_Reading {
  font-family: var(--fontFamilyArvo);
  margin-bottom: 6px;
  color: var(--te-stem-color, #0d1b4c);
  cursor: pointer;
}

/* Options wrapper; horizontal for T/F */
.TEOpts_Reading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.TEOpts_Reading.horizontal {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

/* Individual radio label */
.TEOptionLabel_Reading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid transparent; 
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
  color: var(--te-stem-color, #0d1b4c);
}
/* Temp highlight before grading */
.TEOptionLabel_Reading.TempChoice_Reading {
  background: lemonchiffon;              /* soft yellow */
  border: 2px solid darkgoldenrod;           /* dark yellow border */
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.25);
}
.TEOptionLabel_Reading.Correct {
  background: #e7f7ea;
  border: 2px solid #7bd389;
}
.TEOptionLabel_Reading.Wrong {
  background: #fdeaea;
  border: 2px solid #f29595;
}

/* Pure blue for reveal mode */
.TEOptionLabel_Reading.TEShowAnswer_Reading {
  color: #0000FF;               /* pure blue */
  border-color: #0000FF;
}

/* Badge (single checkmark or cross) */
.TEBadge_Reading {
  margin-left: 6px;
  font-weight: 700;
}
.TEBadge_Reading.is-correct { color: #27ae60; }
.TEBadge_Reading.is-wrong   { color: #c0392b; }

/* Explanations under each question */
.TEExplain_Reading {
  margin-top: 4px;
  font-size: 0.95em;
  color: #1f2a5a;
}
.TEExplain_Reading.TEShowAnswer_Reading {
  color: #0000FF;               /* pure blue when showing answers */
}

/* Score note at bottom */
.TEScoreNote_Reading {
  margin: 12px 0;
  font-size: 48px;
}

/* Radio text span (hook for font resize) */
.TEOptionText_Reading { display: inline-block; }

/* Reading-specific radio input (hook for font resize) */
.TEUserSelect_Reading { accent-color: #0a58ca; }

/* --- Readability separators for the quiz (Reading) --- */
/* same header as above */
#id_WrapQuiz .TEGroupTitle_Reading{
  border-top: 2px solid var(--reading-sep, #cbd5e1);
  border: none;
  border-bottom: 0;
  padding-top: 8px;
  margin-top: 10px;
}

/* remove the first question’s top border right after each header */
#id_WrapQuiz .TEGroupTitle_Reading + .TEItem_Reading{
  border-top: 0;
  margin-top: 6px;
}
/* Fallback styling when .correct is added (Reading namespace) */
.TEOptionLabel_Reading.correct {
  background: #e7f7ea;           /* soft green */
  border-color: #7bd389;
  color: #0b4d1a;
}

/* Add a single check mark after the label */
.TEOptionLabel_Reading.correct::after {
  content: "✓";
  font-weight: 700;
  margin-left: 8px;
  color: #27ae60;
}
/* Make the native radio itself larger */
.TEOptionLabel_Reading .TEUserSelect_Reading {
  inline-size: var(--reading-radio-size);
  block-size: var(--reading-radio-size);
  margin-right: 8px;
  transform: scale(var(--reading-radio-scale));
  transform-origin: left center;
  accent-color: #0a58ca;          /* keep your brand color */
}

/* Give the label a bit more room so the bigger radio doesn't feel cramped */
.TEOptionLabel_Reading {
  gap: 12px;
  padding: 10px 12px;
}




/********************************** WordForm **************************************/
.class_RelFlex.SecTop.TE.WordForm {
  background: linear-gradient(to right, #222, #444);
  color: white;
}
.class_AbsFlexCenter.HeaderForSecTop.WordForm {
  font-family: 'Poppins','Century Gothic',sans-serif;
  padding-left: 20px;
  width: auto;
  height: 100%;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  text-shadow: none;
  color: white;
}
.class_RelFlex.WrapWFSentence {
  padding: 50px;
  width: 100%;
  height: 55%;
  overflow: auto;
  font-size: 95px;
}
.class_RelFlex.WrapWFChips {
  flex-wrap: wrap;
  padding: 90px;
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  height: calc(45% - 150px);
  overflow: auto;
  font-size: 40px;
}
.class_RelFlex.WrapWFTube {
  width: 100%;
  height: 80px;   
}
.class_RelFlex.WordChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 20px 40px;
  margin: 10px;
  font-family: var(--fontFamilyArvo);
  font-size: inherit;
  font-weight: 500;
  text-align: center;
  color: #222;
  background: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .1s ease;
}
.class_RelFlex.WordChip:hover {
  background: #fff;
  border-color: #bbb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.class_RelFlex.WordChip.is-selected {
  background: #e8f4ff;
  border-color: #5aa9ff;
  color: #0056b3;
  box-shadow: 0 0 0 3px rgba(90,169,255,0.25);
}
.class_RelFlex.WordChip.is-answer {
  background: #d4edda;
  border-color: #28a745;
  color: #155724;
}
.class_RelFlex.WordChip:active {
  transform: scale(0.97);
}
.TEStem.WordForm {
  padding: 0;
  line-height: 1.4;
  font-family: var(--fontFamilyArvo);
  font-size: inherit;
  font-weight: 600;
  text-align: center;
  text-shadow: none;
  color: #111;
}
.WFInput {
  display: inline-block;
  min-width: 300px;
  max-width: 100%;
  width: auto;
  height: auto;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 14px;
  font-family: var(--fontFamilyArvo,serif);
  font-size: inherit;
  font-weight: 600;
  text-align: center;
  color: #111;
  background: lemonchiffon;
  border: 2px solid #a8b1bd;
  border-radius: 8px;
  outline: none;
  transition: border-color .15s ease,box-shadow .15s ease;
  vertical-align: baseline;
}
.WFInput::placeholder {
  color: #9aa3af;
}
.WFInput:hover {
  border-color: #8a96a8;
}
.WFInput:focus {
  border-color: #5aa9ff;
  box-shadow: 0 0 0 3px rgba(90,169,255,.25);
}
.WFInput.Correct {
  background-color: #d4edda;
  border-color: #28a745;
}
.WFInput.Wrong {
  background-color: #f8d7da;
  border-color: #dc3545;
}

/********************************** WordForm Responsive **************************************/
@media (max-width: 1200px) {
  .TEStem.WordForm { font-size: 66px; }
  .class_RelFlex.WordChip { font-size: 32px; padding: 16px 28px; }
  .WFInput { min-width: 280px; max-width: 500px; padding: 12px 8px; font-size: 66px; }
}
@media (max-width: 992px) {
  .TEStem.WordForm { font-size: 50px; }
  .class_RelFlex.WordChip { font-size: 28px; padding: 14px 24px; }
  .WFInput { min-width: 220px; max-width: 400px; font-size: 50px; }
  .class_RelFlex.WrapWFChips { padding: 60px 40px; }
}
@media (max-width: 768px) {
  .TEStem.WordForm { font-size: 36px; }
  .class_RelFlex.WordChip { font-size: 24px; padding: 12px 20px; margin: 6px; }
  .WFInput { min-width: 180px; max-width: 300px; font-size: 36px; }
  .class_RelFlex.WrapWFSentence { padding: 20px; }
  .class_RelFlex.WrapWFChips { padding: 20px; }
}
@media (max-width: 480px) {
  .TEStem.WordForm { font-size: 24px; }
  .class_RelFlex.WordChip { font-size: 20px; padding: 10px 16px; margin: 4px; }
  .WFInput { min-width: 140px; max-width: 220px; font-size: 24px; padding: 8px 6px; }
  .class_AbsFlexCenter.HeaderForSecTop.WordForm { font-size: 16px; padding-left: 10px; }
}
/********************************** WordForm Responsive **************************************/

.class_TheAbs.WrapWFMCQ {
    padding: 100px;
    width: 100%;
    height: 100%;
    font-size: 60px;
    border: none;
    background: whitesmoke;
    display: none;
}
/* MCQ container */
.WrapWFMCQ.is-visible { display: block; }

/* Card */
.MCQCard {
  width: 100%;
  height: 100%;
  padding: 24px 28px;
  margin: 0;
  font-size: inherit;
}

/* Question */
.MCQQuestion {
  font-size: inherit;
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: left;
}
.WFMCQBlank {
  display: inline-block;
  border: none;
}

/* WordForm - MCQ */
.MCQFieldset { border: 0; padding: 0; margin: 0 0 24px; }
.MCQOptions { 
    list-style: none; 
    padding: 0; margin: 0; 
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* optional */
}
.MCQOption { display: flex; align-items: center; gap: 12px; padding: 14px 4px; }
.MCQLabel { cursor: pointer; font-size: inherit; }
.MCQLetter { font-weight: 700; margin-right: 8px; }
.MCQOption.is-correct .MCQLabel { text-decoration: underline; text-decoration-thickness: 4px; }
.MCQOption.is-wrong .MCQLabel { opacity: 0.5; }
.MCQControls { display: flex; gap: 20px; margin-top: 8px; }
.MCQOption input[type="radio"] {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.MCQOption.is-correct .MCQLabel {
  color: blue;
  font-weight: 700;
}
.MCQOption.is-wrong .MCQLabel {
  color: deeppink;
  opacity: 1; 
  font-weight: 700;
}
.MCQOption.is-correct .MCQLabel,
.MCQOption.is-wrong .MCQLabel {
  text-decoration: none;
}



/********************************** Rewrite **************************************/
.class_RelFlex.SecTop.TE.Rewrite {
  background: linear-gradient(to right, #222, #444);
  color: white;
}
.class_AbsFlexCenter.HeaderForSecTop.Rewrite {
  font-family: 'Poppins','Century Gothic',sans-serif;
  padding-left: 20px;
  width: auto;
  height: 100%;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  text-shadow: none;
  color: white;
}
.class_RelFlex.WrapRewriteTube {
    width: 100%;
    height: 80px;       
    background: linear-gradient(145deg, #e5e5e5, #cfcfcf);     
}
.class_RelFlex.WrapSentence.Rewrite {
    align-items: flex-start;
    width: 100%;
    height: calc(33% - 46px); 
    background: linear-gradient(145deg, #ffffff, #f3f3f3);
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: var(--shadowIndent);  
}
.class_TheRel.RewriteOriginal,
.class_TheRel.RewriteStudent,
.class_TheRel.RewriteAnswer {
    padding: 26px;
    width: 100%;
    height: 100%;
    overflow: auto;   
    border-radius: 0;     
    
    font-family: var(--fontFamilyArvo);
    font-size: 75px;
    font-weight: 500;
    text-align: center;
    color: #222;
    
    user-select: text;
    outline: none;
    resize: none;            
    cursor: text;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}

.class_TheRel.RewriteOriginal { color: #222; }
.class_TheRel.RewriteStudent { color: blue; }
.class_TheRel.RewriteAnswer { color: deeppink; }

.RewriteStudent.RewriteCorrect {
  background: lightsteelblue;   
}
.RewriteStudent.RewriteWrong {
  background: lemonchiffon;   
}
.class_AbsFlexCenter.WrapRewriteScore {
    left: calc(100% - 160px);
    top: calc(100% - 110px);
    
    width: 150px;
    height: 100px;
    
    border: none;
    border-radius: 20px;
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
    
    font-family: var(--fontFamilyArvo);
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    color: white;
}



/********************************** Scrambled **************************************/
.class_RelFlex.SecTop.TE.Scrambled {
  background: linear-gradient(to right, #222, #444);
  color: white;
}
.class_AbsFlexCenter.HeaderForSecTop.Scrambled {
  font-family: 'Poppins','Century Gothic',sans-serif;
  padding-left: 20px;
  width: auto;
  height: 100%;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  text-shadow: none;
  color: white;
}
.class_RelFlex.WrapScrambledSentence {
  padding: 50px;
  width: 100%;
  height: 55%;
  overflow: auto;
  font-size: 95px;
}
.class_RelFlex.WrapScrambledChips {
  flex-wrap: wrap;
  padding: 90px;
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  height: calc(45% - 170px);
  overflow: auto;
  font-size: 40px;
}
.class_RelFlex.WrapScrambledTube {
  width: 100%;
  height: 80px;                          
}
.class_RelFlex.WrapSentence.Scrambled {
    align-items: flex-start;
    width: 100%;
    height: calc(33% - 53px); 
    background: linear-gradient(145deg, #ffffff, #f3f3f3);
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: var(--shadowIndent);
}
.class_TheRel.ScrambledOriginal,
.class_TheRel.ScrambledStudent,
.class_TheRel.ScrambledAnswer {
    padding: 26px;
    width: 100%;
    height: 100%;
    overflow: auto;   
    border-radius: 0;
    
    font-family: var(--fontFamilyArvo);
    font-size: 75px;
    font-weight: 500;
    text-align: center;
    color: #222;
    
    user-select: text;
    outline: none;
    resize: none;            
    cursor: text;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}

.class_TheRel.ScrambledOriginal { color: #222; }
.class_TheRel.ScrambledStudent { color: blue; }
.class_TheRel.ScrambledAnswer { color: deeppink; }

.class_RelFlex.WrapScrambledTube {
    width: 100%;
    height: 100px;       
    background: linear-gradient(145deg, #e5e5e5, #cfcfcf);
}

.ScrambledStudent.ScrambledCorrect {
  background: lightsteelblue;   
}
.ScrambledStudent.ScrambledWrong {
  background: lemonchiffon;   
}
.class_AbsFlexCenter.WrapScrambledScore {
    left: calc(100% - 160px);
    top: calc(100% - 110px);
    
    width: 150px;
    height: 100px;
    
    border: none;
    border-radius: 20px;
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
    
    font-family: var(--fontFamilyArvo);
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    color: white;
}






/* ====== PassageMCQ (new) ====== */
.class_TheRel.WrapQuiz_PassageMCQ {
    width: 100%;
    height: calc(100% - 70px);
    background: white;
    overflow: auto;
}
.class_TheRel.BoxQ_PassageMCQ {
  width: 100%;
  height: auto;
  padding: 10px;
  border-bottom: 1px dashed #cbd5e1; /* subtle divider for decorations */
}
.class_TheRel.TEStem_PassageMCQ {
  width: 100%;
  height: auto;
  padding-top: 3px;
  font-family: var(--fontFamilyArvo);
  font-weight: 600;
  color: var(--te-stem-color, #0d1b4c);                    
}
.class_TheRel.TEOpts_PassageMCQ {
  width: 100%;
  height: auto;
  padding-left: 24px;   
  text-align: left;
}

/* option label + radio */
.class_RelFlex.TEOptionLabel_PassageMCQ {
  justify-content: flex-start;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
  margin-left: 6px;
  margin-top: 4px;
  border: 2px solid transparent;
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
  color: var(--te-stem-color, #0d1b4c);            
}

/* separator " / " between options */
.TESeparator_PassageMCQ { opacity: 0.5; }

/* bigger radios; keep brand accent */
.TEUserSelect_PassageMCQ {
  inline-size: 24px;
  block-size: 24px;
  accent-color: #0a58ca;
}

/* temporary selection highlight before submit */
.class_RelFlex.TEOptionLabel_PassageMCQ.TempChoice_PassageMCQ {
  background: lemonchiffon;
  border: 2px solid darkgoldenrod;
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.25);
}

/* reuse global coloring rules for correctness */
.class_RelFlex.TEOptionLabel_PassageMCQ.Correct {
  background: #e7f7ea;
  border: 2px solid #7bd389;
}
.class_RelFlex.TEOptionLabel_PassageMCQ.Wrong {
  background: #fdeaea;
  border: 2px solid #f29595;
}

/* Add a single checkmark when revealed as correct */
.class_RelFlex.TEOptionLabel_PassageMCQ.correct::after {
  content: "✓";
  font-weight: 700;
  margin-left: 8px;
  color: #27ae60;
}
/* put with your PassageMCQ CSS */
.TEOptionLabel_PassageMCQ.Correct::after{
  content: "✓";
  font-weight: 700;
  margin-left: 8px;
  color: #27ae60;     /* green */
}

.TEOptionLabel_PassageMCQ.Wrong::after{
  content: "✗";
  font-weight: 700;
  margin-left: 8px;
  color: #c62828;     /* red */
}

/* explanations */
.TEExplain_PassageMCQ {
  margin-top: 6px;
  padding-left: 24px; /* align with options */
  font-size: 0.95em;
  color: #1f2a5a;
}
.TEExplain_PassageMCQ.TEShowAnswer_PassageMCQ {
  color: #0000FF; /* pure blue when showing answers */
}

/* score note */
.TEScoreNote_PassageMCQ {
  margin: 12px;
  margin-top: 25px;
  font-size: 48px;
}
/********************************** TransferExam **************************************/
/********************************** TransferExam **************************************/


/********************************** Flyers **************************************/
/********************************** Flyers **************************************/
/****************** Btn *********************/
/****************** Btn *********************/

.class_Btn {
  font-family: 'Segoe UI', sans-serif;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin-left: 10px;
  width: 110px;
  height: 50px;
    
  font-size: 18px;
  cursor: pointer;
  border: none;
  border-radius: 9999px; /* Full pill shape */
  color: white;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  
  background: linear-gradient(145deg, #a9a9a9, #808080); /* Shiny gray */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.class_Btn:hover {
  background: linear-gradient(145deg, #808080, #a9a9a9); /* Subtle inverse */
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.class_Btn.ShortButton {
  width: 80px;
  background: linear-gradient(135deg, #6c757d, #495057);
}
.class_Btn.ShortButton:hover {
  background: linear-gradient(135deg, #495057, #6c757d);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}
.class_Btn.Submit {
    background: linear-gradient(135deg, #00bfff, #1e90ff);
}
.class_Btn.Submit:hover {
    background: linear-gradient(135deg, #1e90ff, #00bfff);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(0, 191, 255, 0.4);
}
.class_Btn.New {
    margin-left: 6px;
    background: linear-gradient(135deg, #dc3545, #ff6b81);
}
.class_Btn.New:hover {
    background: linear-gradient(135deg, #ff6b81, #dc3545);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4);
}
.class_Btn.Answer {
    margin-left: 6px;
    background: linear-gradient(135deg, #28a745, #43c767);
}
.class_Btn.Answer:hover {
    background: linear-gradient(135deg, #43c767, #28a745);
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
}
.class_Btn.Spacing {
  background: linear-gradient(135deg, #6c757d, #495057);
}
.class_Btn.Spacing:hover {
  background: linear-gradient(135deg, #495057, #6c757d);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}
.class_Btn.MCQ {
  background: linear-gradient(135deg, #6c757d, #495057);
}
.class_Btn.MCQ:hover {
  background: linear-gradient(135deg, #495057, #6c757d);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}
.class_Btn.Restart {
  background: linear-gradient(135deg, #6c757d, #495057);
}
.class_Btn.Restart:hover {
  background: linear-gradient(135deg, #495057, #6c757d);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}
.class_Btn.Paragraph {
  width: 50px;
  background: linear-gradient(135deg, #6c757d, #495057);
}
.class_Btn.Paragraph:hover {
  background: linear-gradient(135deg, #495057, #6c757d);
  transform: scale(1.07);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
}

.class_RelFlex.ScoreAtTube {
    font-family: 'Segoe UI', sans-serif;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    margin-left: 40px;
    
    width: 150px;
    height: 69px;
    
    font-size: 36px;
    cursor: pointer;
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    background: linear-gradient(145deg, #666, #333);
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.15), 0 4px 10px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}
/****************** Btn *********************/
/****************** Btn *********************/

/********************************** FlyersDefinition **************************************/
.class_TheAbs.ContFlyers {
    width: 100%;
    height: 100%;
    background: white;
    border: 4px solid rgba(188, 188, 188, 0.9); /* bright white border */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7); /* cool glowing effect */
}
.class_TheRel.SectionTop {
    width: 100%;
    height: calc(100% - 80px); 
}
.class_TheRel.SectionBottom {
    width: 100%;
    height: 80px;      
    background: linear-gradient(to right, #222, #444); /* darkgray gradient */
}
.class_RelFlex.WrapAbove {
    border: 15px solid transparent;
    border-bottom: 1px solid black;
    width: 100%;
    height: 200px;
}
.class_TheRel.TextWords {
    width: 100%;
    height: 100%;
    padding: 12px;
    max-height: 100%;
    overflow: auto;     

    font-family: var(--fontFamilyArvo);
    font-size: 52px;
    font-weight: 500;
    text-align: center;
    color: blue;
    
    user-select: text;                            
    outline: none;
    resize: none;            
    cursor: text;
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_TheRel.WrapBelow {
    width: 100%;
    height: calc(100% - 200px);   
    border: 10px solid transparent;
    background: white;
    overflow: auto;
}
.class_TheRel.BoxStory {
    width: 100%;
    height: auto;
}
.class_RelFlex.LeftTube {
    justify-content: flex-start;
    width: auto;
    height: 100%;                           
}
.class_FixedBottomRight.RightTube {
    bottom: 0;
    right: 5px;
    margin: 0;
    padding: 0;
    padding-top: 5px;
    width: auto;
    height: 100%;                      
}
.class_RelFlex.LeftTube:hover, .class_FixedBottomRight.RightTube:hover {
    background: transparent;
}
.class_SpanRemainingWidth {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;          /* grow to fill leftover space */
  min-width: 0;   
  padding-right: 250px;
  height: 100%;
  
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  font-size: 24px;
  font-weight: 500;
}

/* Flyers Definition rows (right column) */
.FDRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px dashed #e5e7eb;
  border-bottom: none;
}
.FDPrompt {
  font-size: var(--te-story-font-size, 36px);
  line-height: 1.4;
  text-align: left;
}
.FDSelect {
  /* inherits from .TEBlankSelect */
  margin-left: 10px;
}
#id_FDItems { padding: 10px 12px; }

/* Optional: tighter chips in left column */
#id_FDWordBankList .TEWordChip {
  font-size: 28px;
  padding: 10px 16px;
  border-radius: 9999px;
}
/* Base select look */
.FDSelect{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 3px solid transparent;
  border-radius: 12px;
  padding: .2em .45em .2em .45em; /* room for arrow */
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(128,128,128,.25);
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.FDSelect:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(30,144,255,.25);
}

/* Temp highlight before grading */
.FDSelect.TempChoice_FD{
  background: lemonchiffon;
  border-color: darkgoldenrod;
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.25);
}

/* After grading */
.FDSelect.Correct{
  background: #c8f7c5;          /* soft green */
  border-color: #28a745;
  box-shadow: inset 0 0 0 3px rgba(40,167,69,.25);
}
.FDSelect.Wrong{
  background: #f8d7da;          /* soft red */
  border-color: #dc3545;
  box-shadow: inset 0 0 0 3px rgba(220,53,69,.25);
}
.FDMark {
  display: inline-block;
  margin-left: .1em;
  font-weight: 700;
  font-size: 0.6em;   /* matches surrounding text */
  line-height: 1;
}
.FDMark.is-correct { color: #1a9e3b; } /* green */
.FDMark.is-wrong   { color: #cc3333; } /* red  */

/* Absolute container that sits over sec1 */
.DivTextChecks {
  width: 100%;
  height: auto;
}
/* Absolute container that sits over sec1 */
.DivTextChecks {
  width: 100%;
  height: auto;
}

/* The overlay container */
.class_TheAbs.DivTextChecks {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0;          /* ← remove 50px left/right gap */
  margin: 0;
  font-size: 0;        /* ← kill inline-block whitespace */
  line-height: 0;      /* ← kill row baseline gap */
}

/* Clickable words */
.class_TextToggle {
  display: inline-block;   /* flow horizontally and wrap */
  vertical-align: top;
  margin: 8px;               /* no outside gap */
  padding: 8px 18px;        /* inside padding only (adjust as you like) */
  font-family: var(--fontFamilyArvo);
  font-size: 48px;         /* restore font size (container is 0) */
  line-height: 1;          /* normal inside text line height */
  font-weight: 500;
  text-align: center;
  border-radius: 9999px;
  user-select: none;
}
.class_TextToggle.WordFree,
.class_TextToggle.WordUsed {
  display: inline-block;   /* flow horizontally and wrap */
  vertical-align: top;
  margin: 8px;               /* no outside gap */
  padding: 8px 18px;        /* inside padding only (adjust as you like) */
  font-family: var(--fontFamilyArvo);
  font-size: 48px;         /* restore font size (container is 0) */
  line-height: 1;          /* normal inside text line height */
  font-weight: 500;
  text-align: center;
  border-radius: 9999px;
  user-select: none;
}

.class_TextToggle.WordFree {
  color: black;
  border: none;
  background: transparent;
}
.class_TextToggle.WordUsed {
  color: black;
  border: none;
  background: gray;
}
.class_TextToggle.WordCorrect {
  border: 2px solid green;
  background: #c8f7c5;
}
.class_TextToggle.WordWrong {
  border: 2px solid red;
  background: #f8d7da;
}

.class_TheAbs.WrapFocus {
    width: 100%;
    height: 100%;           
    background: white;       
}
.class_RelFlex.LeftOnly {
    flex-wrap: wrap;
    width: calc(100% - 500px);
    height: 100%;
    border-right: 1px solid black;
    padding: 20px;
    padding-bottom: 80px;    
}
.class_FixedBottomRight.FocusTube {
    right: 0;
    bottom: 0;
    padding-right: 20px;
    width: 240px;
    height: auto;  
}
.class_FixedBottomRight.FocusTube:hover {background: transparent;}
.class_RelFlex.RightOnly {
    width: 500px;
    height: 100%;
}
/* Visibility toggles */
.is-hidden { display: none !important; }
/* Focus-mode layout bits */
.class_AbbrevWordBank {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/* The focused prompt on the left */
.FocusPrompt {
  font-size: 100px;
  line-height: 1.2;
  font-weight: 600;
  padding: 10px;
  text-align: center;
}

/* Make prompts obviously clickable in list mode */
.FDPromptClickable { cursor: pointer; }

.class_TextToggle.TEWordChipWordFree {
  width: 90% !important;
  height: auto;
  font-size: 54px;
  font-weight: 600;
  padding: 16px;
  border-radius: 9999px;
}
.class_TextToggle.TEWordChipWordCorrect {
  width: 90% !important;
  height: auto;
  font-size: 54px;
  font-weight: 600;
  padding: 16px;
  border-radius: 9999px;
  border: 2px solid green;
  background: #c8f7c5;
}
.class_TextToggle.TEWordChipWordWrong { 
  width: 90% !important;
  height: auto;
  font-size: 54px;
  font-weight: 600;
  padding: 16px;
  border-radius: 9999px;
  border: 2px solid red;
  background: #f8d7da;
}






/********************************** FlyersDialogue **************************************/
.class_RelFlex.WrapLeft,
.class_RelFlex.WrapRight {
  width: 50%;
  min-width: 400px;
  max-width: 100%;
  height: 100%;
}
.class_RelFlex.WrapLeft {
  border: 15px solid transparent;
  border-bottom: 2px groove white;
  border-right: 1px solid black;
  border-image: linear-gradient(to right, #222, #444);
  border-image-slice: 1;
}
.class_RelFlex.WrapRight {
  border: 15px solid transparent;
  border-bottom: 2px groove white;
  border-left: none;
  border-image: linear-gradient(to right, #444, #222);
  border-image-slice: 1;
  background: whitesmoke;
}
.class_TheRel.TextLeft {
  width: 100%;
  height: 100%;
  padding: 20px;
  max-height: 100%;
  overflow: auto;
  font-family: var(--fontFamilyArvo);
  font-size: 24px;
  font-weight: 500;
  text-align: left;
  color: #222;
  user-select: text;
  outline: none;
  resize: none;
  cursor: text;
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_TheAbs.WrapQuestions {
  width: 100%;
  height: 100%;
  background: white;
  overflow: auto;
  font-size: 36px;
  padding: 15px;                            
}
.class_TheRel.WrapList {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: white;
  font-size: 36px;
  text-align: left;
  overflow: auto;                        
}
.class_TheRel.LineOption {
  width: 100%;
  height: auto;
  border-bottom: 1px dashed #cbd5e1; /* subtle divider for decorations */
}
.class_RelFlex.LineText {
  justify-content: flex-start;
  padding: 10px;
  width: calc(100% - 70px);
  height: auto;
  min-height: 100px;                                
  
  font-family: var(--fontFamilyArvo);
  font-size: 36px;
  font-weight: 500;
  text-align: left;
  color: #222;
}
.class_RelFlex.LineLetter {
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 100%;
  min-height: 100px;                      
    
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 44px;
  font-weight: 700;
  text-align: center;
  color: #222;
  border: 8px solid white;
  border-radius: 12px;
  background: transparent;
}
.class_TheRel.RectDialogue {
    width: 100%;
    height: auto;
}
.class_TheRel.PerDialogue {
    width: 100%;
    height: auto;
    
    font-family: var(--fontFamilyArvo);
    font-size: 36px;
    font-weight: 500;
    text-align: left;
    color: #222;
}

.class_RelFlex.RowOption {
    width: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 20px;
}
.class_RelFlex.OptionDialogue {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%;
    background: gainsboro;
    
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #222;
}
.class_RelFlex.OptionDialogue:hover {
    background: lightgray;
}
.class_RelFlex.OptionDialogue.Temp {
  background: lemonchiffon;              /* soft yellow */
  border: 2px solid darkgoldenrod;           /* dark yellow border */
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.25);
}
.class_RelFlex.OptionDialogue.Correct {
  background: #e7f7ea;
  border: 2px solid #7bd389;
}
.class_RelFlex.OptionDialogue.Wrong {
  background: #fdeaea;
  border: 2px solid #f29595;
}
.MarkBadge {
  margin-left: 8px;
  font-weight: 700;       /* only affects the ✓ or ✗ */
  font-size: 50px;        /* larger than surrounding text */
  vertical-align: middle;
  color: #16a34a;         /* default green */
  background: #e7f7ea;
  border: 2px solid #7bd389;
  border-radius: 8px;
  padding: 5px;
  padding-top: 0;
  padding-bottom: 0;
}
.MarkBadge:not(:empty):contains("✗") {
  color: #dc2626;         /* red X */
}
.RowEndBadge {
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 12px;
  font-weight: 800;
  font-size: 48px;
  vertical-align: middle;
  display: inline-block;
}
.RowEndBadge.Correct {
  color: #16a34a; /* green */
}
.RowEndBadge.Wrong {
  color: #dc2626; /* red */
}
.AnswerFill {
  color: blue;         /* or forestgreen / #228B22 */
  font-weight: 600;         /* optional: make it stand out */
}
/************ WrapFocus - FlyersDialogue *************/
.class_TheAbs.WrapFocusDialogue {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;           
  background: white;       
  font-size: 60px;
  
  border: 15px solid transparent;
  border-bottom: 2px groove white;
  border-image: linear-gradient(to right, #222, #444);
  border-image-slice: 1;
}
.class_TheRel.TopFocus {
    padding: 20px;
    width: 100%;
    height: auto; 
    max-height: 350px;
    overflow: auto;     
    border-bottom: 1px solid black;
}
.class_TheRel.PerDialogue.Focus {
    font-size: 60px;
    height: auto;       
    padding-left: 50px;
}
.class_RelFlex.RowOption.Focus {
    padding: 10px;
    padding-bottom: 0;
    margin: 0;
    height: 100px;                         
}

.class_RelFlex.BottomFocus {
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    max-height: calc(100% - 350px);                    
    height: calc(100% - 350px); 
    overflow: auto;                     
}
.class_RelFlex.FlexWrap {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    width: max-content;
    height: auto; 
    overflow: auto;                      
}
.class_TheRel.LineOption.Focus {
    display: flex;
    align-items: stretch;     /* children take the same row height */
    border: none;
    width: auto;
    min-width: auto;
    height: auto; 
    max-height: none; 
}
.class_RelFlex.LineLetter.Focus {
  flex: 0 0 100px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100px;
  height: auto;
  min-height: auto;                                                     
    
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 70px;
  font-weight: 700;
  text-align: center;
  color: #222;
  border: 8px solid transparent;
  border-radius: 12px;
  background: transparent;        
}
.class_RelFlex.LineText.Focus {
  justify-content: flex-start;
  padding: 0;
  padding-left: 20px;
  width: calc(100% - 100px);
  height: auto;
  min-height: 100px;                                 
  
  font-family: var(--fontFamilyArvo);
  font-size: 60px;
  font-weight: 500;
  text-align: left;
  color: #222;                                         
}
.class_RelFlex.OptionDialogue.Focus {
    width: 50px;
    height: 50px;
    margin-right: 20px;
    border-radius: 50%;
    background: gainsboro;
    
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #222;
}
.class_RelFlex.OptionDialogue.Focus:hover {
    background: lightgray;
}
.class_RelFlex.OptionDialogue.Focus.Temp {
  background: lemonchiffon;              /* soft yellow */
  border: 2px solid darkgoldenrod;           /* dark yellow border */
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.25);
}
.class_RelFlex.OptionDialogue.Focus.Correct {
  background: #e7f7ea;
  border: 2px solid #7bd389;
}
.class_RelFlex.OptionDialogue.Focus.Wrong {
  background: #fdeaea;
  border: 2px solid #f29595;
}
/************ FOCUS *************/
/********************************** FlyersDialogue **************************************/









/********************************** FlyersStory **************************************/
.class_RelFlex.WrapLeft.FlyersStory,
.class_RelFlex.WrapRight.FlyersStory {
  width: 50%;
  min-width: 500px;
  max-width: 100%;
  height: 100%;
}
.class_RelFlex.WrapLeft.FlyersStory {
  border: 15px solid transparent;
  border-bottom: 2px groove white;
  border-right: 1px solid black;
  border-image: linear-gradient(to right, #222, #444);
  border-image-slice: 1;
  width: calc(100% - 500px);
  
}
.class_TheRel.WrapRight.FlyersStory {
  border: 15px solid transparent;
  border-bottom: 2px groove white;
  border-left: none;
  border-image: linear-gradient(to right, #444, #222);
  border-image-slice: 1;
  padding: 0;
  width: 500px;
  background: white;
}
.class_TheRel.TextLeft.FlyersStory {
  width: 100%;
  height: 100%;
  padding: 20px;
  max-height: 100%;
  overflow: auto;
  
  font-family: var(--fontFamilyArvo);
  font-size: 24px;
  font-weight: 500;
  text-align: left;
  color: #222;
  
  user-select: text;
  outline: none;
  resize: none;
  cursor: text;
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_TheRel.WrapList.FlyersStory {
  width: 100%;
  height: 100%;
  padding: 10px;
  text-align: center;
  line-height: normal;
  overflow: auto;    
  white-space: normal; /* allows wrapping */
}
.class_TheRel.WordFlyerStory {
  width: 100%;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 5px;

  font-family: var(--fontFamilyArvo);
  font-size: 36px;
  font-weight: 500;
  text-align: center;
  color: #222;
}
.class_TheAbs.DivReading.FlyersStory {
    width: 100%;
    height: 100%;
    background: white;
    overflow: auto;
    padding: 15px;  
}
.class_TheRel.WrapReading.FlyersStory {
    width: 100%;
    height: auto;
    font-size: 36px;
    text-align: left;
}
.class_TheRel.FlyersStoryPara {
    width: auto;
    height: auto;
    margin-bottom: 30px;
    line-height: 1.7;
}
#id_WrapReading .FlyersStoryPara:nth-of-type(1) { background: transparent; }
#id_WrapReading .FlyersStoryPara:nth-of-type(2) { background: transparent; }
#id_WrapReading .FlyersStoryPara:nth-of-type(3) { background: transparent; }

.FlyersStoryBlankSelect {
    box-sizing: border-box;
    position: relative;
    display: inline-block; 
    vertical-align: middle;     /* align centers, not baselines */
    
    font-family: var(--fontFamilyArvo);
    font-size: var(--te-blank-font-size, 36px);
    text-align: left;
    line-height: normal;
    
    padding: 3px 6px;
    border-radius: 8px;
    border: 2px solid darkgray;
    background-color: lightgray;
    outline: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.FlyersStoryBlankSelect:hover {
    border-color: #9aa8ba;
}
.FlyersStoryBlankSelect:focus {
    border-color: #5aa9ff;
    box-shadow: 0 0 0 3px rgba(90,169,255,.25);
    background: lightsteelblue;
    color: black;
}
.FlyersStoryBlankSelect.Correct { 
    border-color: #7bd389; 
    background: #e7f7ea; 
}
.FlyersStoryBlankSelect.Wrong { 
    border-color: #f29595; 
    background: #fdeaea; 
}
.MarkBadgeFlyersStory {
    box-sizing: border-box;
    position: relative;
    display: inline-block; 
    vertical-align: middle;     /* align centers, not baselines */
    
    font-weight: 700;       /* only affects the ✓ or ✗ */
    font-size: 36px;        /* larger than surrounding text */
    vertical-align: middle;
    color: #16a34a;         /* default green */
    line-height: 1.2;  
    
    margin-left: 8px;
    background: #e7f7ea;
    border: 2px solid #7bd389;
    border-radius: 8px;
    padding: 4px 8px;
    
    transform: translateY(1px); 
}
.MarkBadgeFlyersStory.Correct { color:#16a34a; background:#e7f7ea; border-color:#7bd389; line-height: 1.2;}
.MarkBadgeFlyersStory.Wrong   { color:#dc2626; background:#fdeaea; border-color:#f29595; line-height: 1.2;}

/****************** Q6 ******************/
.class_AbsFlexCenter.WrapQ6.FlyersStory {
    width: 100%;
    height: 100%;
      border: 15px solid transparent;
      border-image: linear-gradient(to right, #222, #444);
      border-image-slice: 1;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);                        
    overflow: auto;
}
.class_TheRel.Q6FlyersStory {
  width: 100%;
  height: auto; 
  max-width: 1400px;
  max-height: 900px;  
  font-family: var(--fontFamilyArvo);
  font-size: 36px;
  font-weight: 600;
  text-align: left;
  color: #222;                     
  line-height: normal;
}
.class_RelFlex.RectCloseQuestion6 {
    width: 100%;
    height: auto;
}
.FlyersStoryMCQOption {
    box-sizing: border-box;
    position: relative;
    display: inline-block; 
    width: 100%;
    height: auto;
    font-size: 36px; 
    font-weight: 500;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 2px solid transparent;                     
    cursor: pointer;
}
.FlyersStoryMCQOption.Correct { color:#16a34a; background:#e7f7ea; border-color:#7bd389;}
.FlyersStoryMCQOption.Wrong   { color:#dc2626; background:#fdeaea; border-color:#f29595;}

.FlyersStoryMCQOption input[type="radio"]{
    transform: scale(var(--mcq-scale,1.6));   /* make it bigger */
    transform-origin: left center;            /* keep it aligned */
    vertical-align: middle;                   /* text alignment */
    margin-right: 15px;
    accent-color: gray;                    /* color when checked (modern browsers) */
    cursor: pointer;
}
/****************** Q6 ******************/
/********************************** FlyersStory **************************************/





/********************************** FlyersDialogue **************************************/
.class_RelFlex.WrapLeft,
.class_RelFlex.WrapRight {
  width: 50%;
  min-width: 400px;
  max-width: 100%;
  height: 100%;
}
.class_RelFlex.WrapLeft {
  border: 15px solid transparent;
  border-bottom: 2px groove white;
  border-right: 1px solid black;
  border-image: linear-gradient(to right, #222, #444);
  border-image-slice: 1;
}
.class_RelFlex.WrapRight {
  border: 15px solid transparent;
  border-bottom: 2px groove white;
  border-left: none;
  border-image: linear-gradient(to right, #444, #222);
  border-image-slice: 1;
  background: whitesmoke;
}
.class_TheRel.TextLeft {
  width: 100%;
  height: 100%;
  padding: 20px;
  max-height: 100%;
  overflow: auto;
  font-family: var(--fontFamilyArvo);
  font-size: 24px;
  font-weight: 500;
  text-align: left;
  color: #222;
  user-select: text;
  outline: none;
  resize: none;
  cursor: text;
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_TheAbs.WrapQuestions {
  width: 100%;
  height: 100%;
  background: white;
  overflow: auto;
  font-size: 36px;
  padding: 15px;                            
}
.class_TheRel.WrapList {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: white;
  font-size: 36px;
  text-align: left;
  overflow: auto;                        
}
.class_TheRel.LineOption {
  width: 100%;
  height: auto;
  border-bottom: 1px dashed #cbd5e1; /* subtle divider for decorations */
}
.class_RelFlex.LineText {
  justify-content: flex-start;
  padding: 10px;
  width: calc(100% - 70px);
  height: auto;
  min-height: 100px;                                
  
  font-family: var(--fontFamilyArvo);
  font-size: 36px;
  font-weight: 500;
  text-align: left;
  color: #222;
}
.class_RelFlex.LineLetter {
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 100%;
  min-height: 100px;                      
    
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 44px;
  font-weight: 700;
  text-align: center;
  color: #222;
  border: 8px solid white;
  border-radius: 12px;
  background: transparent;
}
.class_TheRel.RectDialogue {
    width: 100%;
    height: auto;
}
.class_TheRel.PerDialogue {
    width: 100%;
    height: auto;
    
    font-family: var(--fontFamilyArvo);
    font-size: 36px;
    font-weight: 500;
    text-align: left;
    color: #222;
}

.class_RelFlex.RowOption {
    width: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 20px;
}
.class_RelFlex.OptionDialogue {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%;
    background: gainsboro;
    
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #222;
}
.class_RelFlex.OptionDialogue:hover {
    background: lightgray;
}
.class_RelFlex.OptionDialogue.Temp {
  background: lemonchiffon;              /* soft yellow */
  border: 2px solid darkgoldenrod;           /* dark yellow border */
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.25);
}
.class_RelFlex.OptionDialogue.Correct {
  background: #e7f7ea;
  border: 2px solid #7bd389;
}
.class_RelFlex.OptionDialogue.Wrong {
  background: #fdeaea;
  border: 2px solid #f29595;
}
.MarkBadge {
  margin-left: 8px;
  font-weight: 700;       /* only affects the ✓ or ✗ */
  font-size: 50px;        /* larger than surrounding text */
  vertical-align: middle;
  color: #16a34a;         /* default green */
  background: #e7f7ea;
  border: 2px solid #7bd389;
  border-radius: 8px;
  padding: 5px;
  padding-top: 0;
  padding-bottom: 0;
}
.MarkBadge:not(:empty):contains("✗") {
  color: #dc2626;         /* red X */
}
.RowEndBadge {
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 12px;
  font-weight: 800;
  font-size: 48px;
  vertical-align: middle;
  display: inline-block;
}
.RowEndBadge.Correct {
  color: #16a34a; /* green */
}
.RowEndBadge.Wrong {
  color: #dc2626; /* red */
}
.AnswerFill {
  color: blue;         /* or forestgreen / #228B22 */
  font-weight: 600;         /* optional: make it stand out */
}
/************ WrapFocus - FlyersDialogue *************/
.class_TheAbs.WrapFocusDialogue {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;           
  background: white;       
  font-size: 60px;
  
  border: 15px solid transparent;
  border-bottom: 2px groove white;
  border-image: linear-gradient(to right, #222, #444);
  border-image-slice: 1;
}
.class_TheRel.TopFocus {
    padding: 20px;
    width: 100%;
    height: auto; 
    max-height: 350px;
    overflow: auto;     
    border-bottom: 1px solid black;
}
.class_TheRel.PerDialogue.Focus {
    font-size: 60px;
    height: auto;       
    padding-left: 50px;
}
.class_RelFlex.RowOption.Focus {
    padding: 10px;
    padding-bottom: 0;
    margin: 0;
    height: 100px;                         
}

.class_RelFlex.BottomFocus {
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    max-height: calc(100% - 350px);                    
    height: calc(100% - 350px); 
    overflow: auto;                     
}
.class_RelFlex.FlexWrap {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    width: max-content;
    height: auto; 
    overflow: auto;                      
}
.class_TheRel.LineOption.Focus {
    display: flex;
    align-items: stretch;     /* children take the same row height */
    border: none;
    width: auto;
    min-width: auto;
    height: auto; 
    max-height: none; 
}
.class_RelFlex.LineLetter.Focus {
  flex: 0 0 100px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100px;
  height: auto;
  min-height: auto;                                                     
    
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 70px;
  font-weight: 700;
  text-align: center;
  color: #222;
  border: 8px solid transparent;
  border-radius: 12px;
  background: transparent;        
}
.class_RelFlex.LineText.Focus {
  justify-content: flex-start;
  padding: 0;
  padding-left: 20px;
  width: calc(100% - 100px);
  height: auto;
  min-height: 100px;                                 
  
  font-family: var(--fontFamilyArvo);
  font-size: 60px;
  font-weight: 500;
  text-align: left;
  color: #222;                                         
}
.class_RelFlex.OptionDialogue.Focus {
    width: 50px;
    height: 50px;
    margin-right: 20px;
    border-radius: 50%;
    background: gainsboro;
    
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #222;
}
.class_RelFlex.OptionDialogue.Focus:hover {
    background: lightgray;
}
.class_RelFlex.OptionDialogue.Focus.Temp {
  background: lemonchiffon;              /* soft yellow */
  border: 2px solid darkgoldenrod;           /* dark yellow border */
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.25);
}
.class_RelFlex.OptionDialogue.Focus.Correct {
  background: #e7f7ea;
  border: 2px solid #7bd389;
}
.class_RelFlex.OptionDialogue.Focus.Wrong {
  background: #fdeaea;
  border: 2px solid #f29595;
}
/************ FOCUS *************/
/********************************** FlyersDialogue **************************************/








/********************************** FlyersReadingMCQ **************************************/
.class_RelFlex.WrapBack.FlyersReadingMCQ {
  border: 15px solid transparent;
  border-bottom: 2px groove white;
  border-image: linear-gradient(to right, #222, #444);
  border-image-slice: 1;
  
  width: 100%;
  height: 100%;
}
.class_TheRel.TextReadingMCQ {
  width: 100%;
  height: 100%;
  padding: 20px;
  max-height: 100%;
  overflow: auto;
  background: lightsalmon;
  
  font-family: var(--fontFamilyArvo);
  font-size: 24px;
  font-weight: 500;
  text-align: left;
  color: #222;
  
  user-select: text;
  outline: none;
  resize: none;
  cursor: text;
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='4' width='4' height='30' fill='blue'/%3E%3C/svg%3E") 16 16, text;
}
.class_TheAbs.DivMain.FlyersReadingMCQ {
  width: 100%;
  height: 100%;
  background: white;                                   
}
.class_TheRel.WrapReading.FlyersReadingMCQ {
  width: 100%;
  height: calc(100% - 150px);      
  padding: 20px;
  font-size: 60px;
  text-align: left;
  white-space: normal; /* allows wrapping */
  overflow: auto;
}
.class_RelFlex.BarMcQ.FlyersReadingMCQ {
  width: 100%;
  height: 150px;                         
  border-top: 4px solid black;
  background: lightgray;
}
.class_RelFlex.BoxPrevNext.FlyersReadingMCQ {
  width: 100px;
  height: 150px;          
}
.class_RelFlex.WrapMCQ.FlyersReadingMCQ {
  flex-wrap: wrap;
  width: calc(100% - 200px);
  height: 180px;                    
  padding: 20px;
  
  font-size: 44px;
  font-weight: 800;
  overflow: auto;
}

.class_TheRel.Paragraph.FlyersReadingMCQ {
  width: 100%;
  height: auto;
  font-size: inherit;                             
}
.class_RelFlex.LineMCQ.FlyersReadingMCQ {
  width: 100%;
  height: auto;                             
  font-size: inherit;                                 
}
.class_RelFlex.LineMCQ.FlyersReadingMCQ label {
  margin: 0 10px;
  cursor: pointer;
}
.class_RelFlex.LineMCQ.FlyersReadingMCQ input[type="radio"] {
  transform: scale(1.5);
  margin-right: 5px;
  cursor: pointer;
}
.class_RelFlex.LineMCQ.FlyersReadingMCQ.Correct {
  background: #e7f7ea;
  border-color: #7bd389;
}
.class_RelFlex.LineMCQ.FlyersReadingMCQ.Wrong {
  background: #fdeaea;
  border-color: #f29595;
}

.FlyersReadingMCQBlankSelect {
    box-sizing: border-box;
    position: relative;
    display: inline-block; 
    vertical-align: middle;     /* align centers, not baselines */
    
    font-family: var(--fontFamilyArvo);
    font-size: var(--te-blank-font-size, 36px);
    font-weight: 800;
    text-align: left;
    line-height: normal;
    
    min-width: 140px;
    padding: 3px 6px;
    border-radius: 8px;
    border: 2px solid darkgray;
    background-color: lightgray;
    outline: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.FlyersReadingMCQBlankSelect:hover {
    border-color: #9aa8ba;
}
.FlyersReadingMCQBlankSelect:focus {
    border-color: #5aa9ff;
    box-shadow: 0 0 0 3px rgba(90,169,255,.25);
    background: lightsteelblue;
    color: black;
}
.FlyersReadingMCQBlankSelect.NotSelected { 
    border: 2px solid darkgray;
    background-color: lightgray;
    
}
.FlyersReadingMCQBlankSelect.Landed {
  background: lemonchiffon;
  border: 2px solid darkgoldenrod;
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.25);
}
.FlyersReadingMCQBlankSelect.Correct { 
    border-color: #7bd389; 
    background: #e7f7ea; 
}
.FlyersReadingMCQBlankSelect.Wrong { 
    border-color: #f29595; 
    background: #fdeaea; 
}
.MarkBadgeFlyersReadingMCQ {
    box-sizing: border-box;
    position: relative;
    display: inline-block; 
    vertical-align: middle;     /* align centers, not baselines */
    
    font-weight: 800;       /* only affects the ✓ or ✗ */
    font-size: 36px;        /* larger than surrounding text */
    vertical-align: middle;
    color: #16a34a;         /* default green */
    line-height: 1.8;  
    
    margin-left: 8px;
    background: #e7f7ea;
    border: 2px solid #7bd389;
    border-radius: 8px;
    padding: 4px 8px;
    
    transform: translateY(1px); 
}
.MarkBadgeFlyersReadingMCQ.Correct { color:#16a34a; background:#e7f7ea; border-color:transparent; line-height: 1.2;}
.MarkBadgeFlyersReadingMCQ.Wrong   { color:#dc2626; background:#fdeaea; border-color:transparent; line-height: 1.2;}

/* ------- extra layout helpers for Reading paragraphs ------- */
.class_TheRel.Paragraph.FlyersReadingMCQ {
  width: 100%;
  height: auto;
  font-size: inherit;
  line-height: 1.8;  
  padding: 10px 0;
  border: none; /* remove dev border */
}
.class_TheRel.Paragraph.FlyersReadingMCQ + .class_TheRel.Paragraph.FlyersReadingMCQ {
  margin-top: 10px;
  padding-top: 0;
}

/* ------- MCQ area ------- */
.MCQBlock {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 0;
  gap: 16px;
  align-items: flex-start;
}
.MCQHead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  
  align-self: stretch;
  font-weight: 700;
  margin-right: 16px;
  min-width: 80px;      
  min-height: 80px;
  height: auto;   
}
.MCQBody {
  display: flex;
  flex-wrap: wrap;
  min-height: 80px;
  gap: 16px 28px;
  align-items: center;          
}
.MCQOption {
  display: inline-flex;
  min-width: 250px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.MCQOption input[type="radio"] {
  width: 28px;
  height: 28px;
  cursor: pointer;
  transform: translateY(-1px);
}
.MCQOption span {
  font-size: inherit;
  line-height: normal;
  cursor: pointer;
}
.MCQOption.NotSelected {
  background: transparent;
  border-color: transparent;
}
.MCQOption.Correct {
  background: #e7f7ea;
  border-color: #7bd389;
}
.MCQOption.Wrong {
  background: #fdeaea;
  border-color: #f29595;
}


/********************************** FlyersReadingMCQ **************************************/




/********************************** Flyers **************************************/
/********************************** Flyers **************************************/