/************************************** AIStyle ************************************************/
/************************************** AIStyle ************************************************/
/************************************** AIStyle ************************************************/
.class_TheAbs.BackgroundAI {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f0f0 0%, #d6d6d6 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
/* Container inside the background */
.class_TheAbs.ContainerAI {
  position: relative;

  width: 100%;
  height: 100%;
  padding: 30px;

  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_AbsFlexCenter.FrameGrayChatGPT {
    width: 100%;
    height: 100%;
}
.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_RightFixed.LoadAI {
    top: 15px;
    left: 15px;
    padding: 0;
    margin: 0;
    height: 60px;
    width: 60px;                          
}
.class_RelFlex.TubeAI {
    flex-wrap: wrap;
    padding: 10px;
    width: 100%;
    Height: 70px;  
    overflow: auto;
}
.class_RelFlex.BodyAI {
    flex-wrap: wrap;
    width: 100%;
    Height: auto;
    max-height: calc(100% - 70px);
    overflow: auto;
}
.class_TheAbs.WrapAiPic {
    width: 100%;
    height: 100%;
    background: transparent;
    box-shadow: var(--shadowIndent);
    border: 2px groove white;
}
.class_AbsImage.AiWriteIELTS1 {
    width: 100%;
    height: 100%;
    background: transparent;
}

.class_RightFixed.RefreshPic {
    top: 10px;
    left: 65px;
    padding: 0;
    margin: 0;
    width: 50px;
    height: 50px;
}
.class_RightFixed.AiScrShot {
    top: 5px;
    left: 125px;
    padding: 5px;
    margin: 0;
    height: 60px;
    width: 60px;                          
}
.class_RightFixed.AiGrid {
    top: 5px;
    left: 195px;
    padding: 5px;
    margin: 0;
    height: 60px;
    width: 60px;                          
}
.class_RightFixed.ScoreCopy {
    top: 25px;
    left: calc(100% - 170px);
    padding: 0;
    margin: 0;
    height: 60px;
    width: 60px;                          
}


.class_RelFlex.RectAI {
    flex-wrap: wrap;
    width: 100%;
    Height: auto;
    max-height: calc(100% - 70px);
    overflow: auto;
}
.class_TheRel.LineSeparator {
    width: 100%;
    height: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: 2px groove white;
}
.class_TheRel.AddInstruct {
    font-family: var(--fontFamilyOpenSans);
    width: 400px;
    height: 40px;
    outline: none;
    border: 2px groove white;
    border-radius: 8px;
    background: rgba(255,255,255,0.6);
    box-shadow: var(--shadowIndent);
    margin: 5px;
    
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: black;
    text-shadow: none;
    text-decoration: none;  
}
.class_TabAI {
  font-family: var(--fontFamilyLato), sans-serif;

  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  width: 120px;
  height: 42px;
  margin: 5px 8px 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: 14px;
  font-weight: 600;
  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;
}

.class_RightFixed.RefreshRead {
    top: 10px;
    left: 10px;
    padding: 0;
    margin: 0;
    width: 50px;
    height: 50px;
}
.class_RightFixed.AiExample {
    top: 0;
    left: 0;
    padding: 5px;
    margin: 0;
    width: 70px;
    height: 70px;
}
.class_RightFixed.AiExample:hover {
    background: gray;
}

.class_RightFixed.AiDisplayX {
    top: 10px;
    right: 10px;
    padding: 0;
    margin: 0;
    width: 50px;
    height: 50px;
}
.class_RightFixed.LeftCopy {
    top: 10px;
    left: 10px;
    padding: 0;
    margin: 0;
    width: 50px;
    height: 50px;
}
.class_RightFixed.RightCopy {
    top: 10px;
    left: calc(100% - 130px);
    padding: 0;
    margin: 0;
    width: 50px;
    height: 50px;
}
.class_RightFixed.DoubleSpace {
    top: 10px;
    left: 10px;
    padding: 0;
    margin: 0;
    width: 50px;
    height: 50px;
}
.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: 14px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;
    text-decoration: none;            
    
    resize: none;
    outline: none;
}
.class_AiValue:hover,.class_AiValue:active,.class_AiValue:focus  {
    outline: none;
}

.class_RelFlex.DivCheckboxAI {
    flex-wrap: wrap;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: auto;
    padding: 10px;
}
.checkboxRow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.class_CheckboxFont {
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    color: #333;
    display: inline-flex;
    align-items: center;
    margin: 6px 12px 6px 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

.class_CheckboxFont input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: #007BFF; /* modern checkbox tint color (works in modern browsers) */
    cursor: pointer;
}

/* 💄 Optional Enhancement: hover effect */
.class_CheckboxFont:hover {
    color: #007BFF;
    font-weight: 500;
}

.class_ReadFrame {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px groove white;
    background-color: #fff;
}
.class_ReadFrame2 {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px groove white;
    background-color: #fff;
    /************** BorderGradientBarEggYolkYellow ************************/
    border: 20px solid;
    border-image-slice: 1;
    border-width: 20px;
    border-image-source: linear-gradient(150deg, #FFD300, #FFA500 100%);
}
.class_AbsFlexCenter.VPNMsg {
    border: 30px solid transparent;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 80px;
    
    font-family: var(--fontFamilyPoppins);
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    color: blue;
    text-shadow: none;
}

.class_TheAbs.WrapWriteResult {
    width: 100%;
    height: 100%;
}
.class_BB.WriteResult {
    width: 100%;
    height: 100%;
    outline: none;
    resize: none;
    
    /************** BorderGradientBarEggYolkYellow ************************/
    border: 20px solid;
    border-image-slice: 1;
    border-width: 20px;
    border-image-source: linear-gradient(150deg, #FFD300, #FFA500 100%);
    
    padding-top: 10px;
    
}


.class_RightFixed.ScoreReturn {
    top: 0;
    left: 70px;
    padding: 5px;
    margin: 0;
    width: 70px;
    height: 70px;
}

/* Table inside ScoreResult with .class_AIFont also applied */
/* ========== CONTAINER STYLE FOR GRADE RESULT ========== */
.class_TheAbs.ScoreResult {
    font-family: var(--fontFamilyArvo, Arial, sans-serif);
    background: #fff;
    border: 1px solid #aaa;
    padding: 20px;
    overflow-y: auto;
    box-shadow: var(--shadowIndent);
    font-size: 24px; /* overridden by JS */

    /* Optional outer box styling */
    border: 20px solid black;
    padding-top: 100px;
    max-width: 100%;
    box-sizing: border-box;

    /************** BorderGradientBarEggYolkYellow ************************/
    border: 20px solid;
    border-image-slice: 1;
    border-width: 20px;
    border-image-source: linear-gradient(150deg, #FFD300, #FFA500 100%);

}


/* ========== BASE FONT FOR AI OUTPUT ========== */
.class_AIFont {
    font-family: Arial, sans-serif;
    font-size: 16px; /* dynamically overridden by JS */
    color: #222;
}


/* ========== TABLE STRUCTURE & LAYOUT ========== */
.class_AIFont table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 2px solid #ccc;
    table-layout: auto;
}


/* ========== HEADER ROWS ========== */
.class_AIFont th {
    background-color: #f0f0f0;
    color: #333;
    font-weight: bold;
    border: 1px solid #bbb;
    padding: 12px 10px;
    text-align: left;
}


/* ========== DATA CELLS ========== */
.class_AIFont td {
    border: 1px solid #ccc;
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
}


/* ========== ROW COLORS FOR STRIPING ========== */
.class_AIFont tr:nth-child(even) {
    background-color: #fafafa;
}

.class_AIFont tr:nth-child(odd) {
    background-color: #ffffff;
}


/* ========== RESPONSIVE: OPTIONAL (if table is wide) ========== */
@media screen and (max-width: 600px) {
    .class_AIFont table, .class_AIFont thead, .class_AIFont tbody, .class_AIFont th, .class_AIFont td, .class_AIFont tr {
        display: block;
        width: 100%;
    }

    .class_AIFont tr {
        margin-bottom: 15px;
    }

    .class_AIFont td, .class_AIFont th {
        padding: 10px;
        text-align: left;
        border: none;
        border-bottom: 1px solid #ddd;
    }
}


.class_RelFlex.SecTop {
    font-family: var(--fontFamilyPoppins);
    width: 100%;
    height: 70px;
    background: MediumSlateBlue;
    font-size: 28px;
    font-weight: lighter;
    text-align: center;
    color: white;
    text-shadow: none;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    padding-left: 60px;
    gap: 20px;
}

.RadioRow {
    padding-right: 50px;
    margin-left: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.class_GradeLabel {
    font-family: var(--fontFamilyOpenSans);
    font-size: 16px;
    font-weight: 500;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}

.class_GradeLabel input[type="radio"] {
    accent-color: deeppink;
    transform: scale(1.5); /* Increased from 1.1 to 1.5 */
    margin-right: 6px;
    cursor: pointer;
}



.class_RelFlex.CustomLine {
    padding: 5px;
    width: 100%;
    height: auto;
}
.class_BB.CustomInstruct, .class_BB.ButtonInput {
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    width: 95%;
    height: 165px;
    border: 2px groove white;
    background: var(--backIndent);
    box-shadow: var(--shadowIndent);
    border-radius: 8px;
    padding: 10px;
    
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;
    text-decoration: none;    
    
    border: 1px solid #ccc;
    border-radius: 12px;
    line-height: 1.5;
    background-color: #fdfdfd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.class_BB.ButtonInput {
    padding: 0;
    width: 200px;
    height: 50px; 
    
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    
    border-radius: 6px;
}
.class_BB.CustomInstruct:hover, .class_BB.ButtonInput:hover, .class_BB.CustomInstruct:focus, .class_BB.ButtonInput:focus {
    outline: none;
    border-color: #7c3aed; /* violet-600 */
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); /* soft violet ring */
}
.class_RightFixed.FrameFontInstruct {
    top: 15px;
    left: calc(95% - 50px);
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
}
.class_RelFlex.ButtonNumber {
    justify-content: flex-end;
    font-family: 'Poppins', 'Century Gothic', sans-serif;
    width: 70px;
    height: 100%;

    font-size: 36px;
    font-weight: 600;
    text-align: right;
    color: black;
    text-shadow: none;
    text-decoration: none;        
}
.class_RelButton.IconAiCustom {
    width: 50px;
    height: 50px;
    padding: 3px;
    margin-left: 5px;
    margin-right: 5px;
}

.class_RelFlex.CustomLeft {
    width: 40px;
    height: 100%;
    border: none;
    
    color: #7a4b00;
    font-size: 24px;
    font-weight: 600;
    text-shadow:
        0 0 6px rgba(230, 200, 255, 0.5),
        0 1px 2px rgba(255, 255, 255, 0.8);
}
.class_CustomRight {
    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: calc(100% - 40px);
    height: 100%;
    border: none;
    
    font-size: 12px;
}

.class_TheAbs.CustomAiOutput {
    width: 100%;
    height: 100%;
    background: lightgray;
    /************** BorderGradientBarEggYolkYellow ************************/
    border: 20px solid;
    border-image-slice: 1;
    border-width: 20px;
    border-image-source: linear-gradient(150deg, #FFD300, #FFA500 100%);
}



/************************************** AIStyle ************************************************/
/************************************** AIStyle ************************************************/
/************************************** AIStyle ************************************************/





.class_RelFlex.RectAgreeTerms {
    font-family: var(--fontFamilyRoboto);
    width: 100%;
    height: auto;
    font-size: 14px;
}
.class_RelFlex.RectAgreeTerms:hover {
    color: cyan;
}


.class_TheRel.HorizLineAI {
    width: 100%;
    height: auto;

}
.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: auto;
    
    /************** 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_AIFont, .class_AIFontTable, .class_AIFontTR,.class_AIFontList {
    font-family: var(--fontFamilyArvo);
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;
}




/************************************* AI Blue *********************************/
.class_AIBlue {
  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: 180px;
  height: 80px;
  margin: 10px;
  padding: 10px 14px;

  border: 2px solid #337ab8;
  border-radius: 8px;

  background: linear-gradient(145deg, #84b9e6, #b8deff);
  box-shadow:
    inset 0 -10px 25px rgba(47, 136, 213, 0.4),
    inset 0 2px 6px rgba(184, 222, 255, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.1);

  color: #2c6aa0;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow:
    0 0 10px rgba(132, 185, 230, 0.8),
    0 1px 2px rgba(184, 222, 255, 0.8);

  transition: all 0.3s ease;
}

.class_AIBlue:hover {
  background: linear-gradient(145deg, #b1d1ec, #e1f0fb);
  box-shadow:
    inset 0 -10px 20px rgba(71, 156, 231, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/************************************* AI Green *********************************/
.class_AIGreen {
  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: 180px;
  height: 80px;
  margin: 10px;
  padding: 10px 14px;

  border: 2px solid #209c32;
  border-radius: 8px;

  background: linear-gradient(145deg, #54e869, #89ff9a);
  box-shadow:
    inset 0 -10px 25px rgba(26, 188, 49, 0.4),
    inset 0 2px 6px rgba(137, 255, 154, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.1);

  color: #1b832a;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow:
    0 0 10px rgba(84, 232, 105, 0.8),
    0 1px 2px rgba(137, 255, 154, 0.8);

  transition: all 0.3s ease;
}

.class_AIGreen:hover {
  background: linear-gradient(145deg, #84ea93, #ccf7d6);
  box-shadow:
    inset 0 -10px 20px rgba(18, 236, 50, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/************************************* AI Red *********************************/
.class_AIRed {
  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: 180px;
  height: 80px;
  margin: 10px;
  padding: 10px 14px;

  border: 2px solid #9c2020;
  border-radius: 8px;

  background: linear-gradient(145deg, #e85454, #ff8989);
  box-shadow:
    inset 0 -10px 25px rgba(188, 26, 26, 0.4),
    inset 0 2px 6px rgba(255, 137, 137, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.1);

  color: #831b1b;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow:
    0 0 10px rgba(232, 84, 84, 0.8),
    0 1px 2px rgba(255, 137, 137, 0.8);

  transition: all 0.3s ease;
}

.class_AIRed:hover {
  background: linear-gradient(145deg, #ea8484, #fbd1d1);
  box-shadow:
    inset 0 -10px 20px rgba(236, 18, 18, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/************************************* AI Orange *********************************/
.class_AIOrange {
  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: 180px;
  height: 80px;
  margin: 10px;
  padding: 10px 14px;

  border: 2px solid #ad6d0e;
  border-radius: 8px;

  background: linear-gradient(145deg, #faaf40, #ffcf88);
  box-shadow:
    inset 0 -10px 25px rgba(207, 126, 5, 0.4),
    inset 0 2px 6px rgba(255, 207, 136, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.1);

  color: #915b0c;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow:
    0 0 10px rgba(250, 175, 64, 0.8),
    0 1px 2px rgba(255, 207, 136, 0.8);

  transition: all 0.3s ease;
}

.class_AIOrange:hover {
  background: linear-gradient(145deg, #f8c376, #ffe8c5);
  box-shadow:
    inset 0 -10px 20px rgba(253, 151, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/************************************* AI Gray *********************************/
.class_AIGrey {
  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: 180px;
  height: 80px;
  margin: 10px;
  padding: 10px 14px;

  border: 2px solid #5c5c5c;
  border-radius: 8px;

  background: linear-gradient(145deg, #bfbfbf, #e0e0e0);
  box-shadow:
    inset 0 -10px 25px rgba(100, 100, 100, 0.15),
    inset 0 2px 6px rgba(255, 255, 255, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.1);

  color: #333;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(200, 200, 200, 0.8);

  transition: all 0.3s ease;
}

.class_AIGrey:hover {
  background: linear-gradient(145deg, #d6d6d6, #f1f1f1);
  box-shadow:
    inset 0 -10px 20px rgba(200, 200, 200, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/************************************* AI EggYolk *********************************/
.class_AIEggYolk {
  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: 150px;
  height: 60px;
  margin: 5px;
  padding: 10px 14px;

  border: 2px solid #e09c18;
  border-radius: 8px;

  background: linear-gradient(145deg, #ffd85a, #fff1a3);
  box-shadow:
    inset 0 -10px 25px rgba(255, 204, 0, 0.35),
    inset 0 2px 6px rgba(255, 255, 200, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.1);

  color: #7a4b00;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow:
    0 0 6px rgba(255, 239, 153, 0.8),
    0 1px 2px rgba(255, 255, 255, 0.9);

  transition: all 0.3s ease;
}

.class_AIEggYolk:hover {
  background: linear-gradient(145deg, #ffee94, #fff9c8);
  box-shadow:
    inset 0 -10px 20px rgba(255, 217, 90, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.class_AIEggYolk.Active {
  background: linear-gradient(145deg, #ffee94, #fff9c8);
  box-shadow:
    inset 0 -10px 20px rgba(255, 217, 90, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  box-shadow: var(--borderGlowAQBoringBrown);
}



/************************************* AI BubbleGum *********************************/
.class_AIBubbleGum {
  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: 180px;
  height: 80px;
  margin: 10px;
  padding: 10px 14px;

  border: 2px solid #e754a6;
  border-radius: 8px;

  background: linear-gradient(145deg, #ff91c3, #ffb6d9);
  box-shadow:
    inset 0 -10px 25px rgba(231, 84, 166, 0.25),
    inset 0 2px 6px rgba(255, 200, 230, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.1);

  color: #931f5f;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-shadow:
    0 0 6px rgba(255, 200, 230, 0.7),
    0 1px 2px rgba(255, 255, 255, 0.9);

  transition: all 0.3s ease;
}

.class_AIBubbleGum:hover {
  background: linear-gradient(145deg, #ffc5e1, #ffe2ef);
  box-shadow:
    inset 0 -10px 20px rgba(255, 165, 210, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.15);

  cursor: pointer;
}

/************************************* AI Violet *********************************/
.class_AIVioletVelvet {
  font-family: 'Poppins', 'Century Gothic', sans-serif;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 180px;
  height: 80px;
  margin: 10px;
  padding: 10px 14px;

  border: 2px solid darkviolet;
  border-radius: 8px;

  background: linear-gradient(145deg, #d5a4ff, #c084fc);
  box-shadow:
    inset 0 -10px 25px rgba(192, 132, 252, 0.3),
    inset 0 2px 6px rgba(255, 245, 255, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.08);

  color: #5e229d;
  font-size: 17px;
  font-weight: 600;
  text-shadow:
    0 0 6px rgba(230, 200, 255, 0.5),
    0 1px 2px rgba(255, 255, 255, 0.8);

  transition: all 0.3s ease;
}

.class_AIVioletVelvet:hover {
  background: linear-gradient(145deg, #e9ccff, #f6edff);
  box-shadow:
    inset 0 -10px 20px rgba(200, 150, 255, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    0 6px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.class_AIVioletVelvet.Active {
  background: linear-gradient(145deg, #e9ccff, #f6edff);
  box-shadow:
    inset 0 -10px 20px rgba(200, 150, 255, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    0 6px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  box-shadow: var(--borderGlowPurple);
}








/*******************************************************************************/








.class_AbsFlexCenter.ContCustomAudio {
    width: 100%;
    height: auto;
    max-height: 100%;
    border: 10px solid transparent;
    border-radius: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);    
    border: 10px solid SlateBlue;
    background: rgba(72, 61, 139, 0.3);
    transition: all 0.2s ease;
    z-index: 900;
}
.class_AbsFlexCenter.GoUp {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    top: 0;
    left: 0;
}
.class_AbsFlexCenter.GoDown {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    bottom: 0;
    left: 0;
}
.class_AbsFlexCenter.BeginCustomAudio {
    font-family: var(--fontFamilyPoppins);
    width: 100%;
    height: 100%;
    background: SlateBlue;
    padding: 20px;
    
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none;  
}
.class_TheRel.TubeMP3 {
    width: 100%;
    height: 50px;
    box-shadow: var(--shadowIndent);
    background: rgba(51,51,51,0.3);
}

.class_TheRel.InputCustomAudio {
    width: 100%;
    height: 100%;
    outline: none;
    
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: DarkSlateBlue;
    text-shadow: none;  
}
.class_AbsFlexCenter.LoadSrc {
    font-family: var(--fontFamilyPoppins);
    left: calc(100% - 180px);
    padding-left: 10px;
    padding-right: 10px;
    width: 180px;
    height: 100%;
    border: 2px groove white;
    background: rgba(106, 90, 205, 0.9);
    
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: gainsboro;
    text-shadow: none;  
}
.class_AbsFlexCenter.LoadSrc:hover {
    background: gold;
    color: black;
}
.class_RelFlex.TubeCustomAudio {
    flex-wrap: wrap;
    width: 100%;
    height: 60px;
    overflow: auto;
}
.class_RelFlex.ControlsCustomAudio {
    padding: 0;
    width: 95%;
    height: 50px;
    border: none;
}
.class_RelButton.FrameCustomAudio {
    margin: 4px;
    padding: 4px;
    width: 50px;
    height: 50px;
    border-radius: 6px;
}
audio::-webkit-media-controls-panel {
    background: rgba(106, 90, 205, 0.6);
}
.class_RelSpan.ElapsedCustomAudio {
    width: 180px;
    height: 40px;
    background: transparent;     
    border: 1px groove rgba(106, 90, 205,0.6);
    border-radius: 8px;
    
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: DarkSlateBlue;
    text-shadow: none;  
}
.class_RelSpan.ElapsedCustomAudio:hover {
    background: slateblue;
    color: white;
}
.class_RelFlex.TubeSeek {
    flex-wrap: wrap;
    padding: 5px;
    width: 100%;
    height: auto;
    max-height: 70px;   
    overflow: auto;
}
.class_TheRel.BoxSeek {
    margin: 5px;
    width: 70px;
    height: 40px;
    border: 1px solid white;
    border-radius: 4px;
}
.class_RelFlex.ClearSeek {
    margin: 5px;
    width: 40px;
    height: 40px;
    border: none;

    font-size: 28px;
    color: slateblue;
}
.class_RelFlex.ClearSeek:hover {
    color: deeppink;
}
.class_RelFlex.AudioSaveSeek {
    margin: 5px;
    width: 40px;
    height: 40px;
    border: none;

    font-size: 28px;
    color: slateblue;
}
.class_RelFlex.AudioSaveSeek:hover {
    color: deeppink;
}
.class_Seek {
    font-family: var(--fontFamilyPoppins);
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    padding-top: 7px;
    margin: 0;
    width: 100%;
    height: 100%;
    
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-shadow: none;  
}
.class_Seek:hover {
    background: slateblue;
    color: white;
}
.class_XSeek {
    font-family: var(--fontFamilyPoppins);
    box-sizing: border-box;
    position: absolute;
    display: block;
    float: right;
    right: 0;
    padding: 3px;
    margin: 0;
    width: auto;
    height: auto;
    
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    color: white;
    text-shadow: none;  
}
.class_XSeek:hover {
    background: deeppink;
    color: white;
}
.class_TheRel.WrapWebSrc {
    width: 100%;
    height: auto;
    max-height: 400px;  
    border: 12px solid Sienna;
    overflow: auto;
}
.class_TheRel.LineWebSrc {
    width: 100%;
    height: 50px;                                   
}
.class_LineWebSrc {
    box-sizing: border-box;
    position: relative;
    display: inline;
    float: left;
    padding: 0;
    margin: 0;
    
    width: 100%;
    height: 50px;                                   
}
.class_RelFlex.InputWebSrc {
    outline: none;
    width: calc(100% - 50px);          
    height: 100%;
    box-shadow: var(--shadowIndent);
    background: rgba(51,51,51,0.1);
    border: 1px groove darkslateblue;

    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: darkslateblue;
    text-shadow: none;           
    outline: none;
}
.class_RelButton.GoWebSrc {
    padding: 0;
    width: 50px;
    height: 100%;
}
.class_AbsFlexCenter.SpanWebSrc {
    padding: 0;
    margin: 0;
    padding-right: 180px;
    width: 100%;
    height: 100%;
    
    background: #FFCC33;
    background: Wheat;
    
    border: 1px groove black;
    
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: black;
    text-shadow: none;           
}
.class_AbsFlexCenter.SpanWebSrc.Active {
    background: green;
    color: white;
}
.class_AbsFlexCenter.LinkMP3 {
    padding-left: 5px;
    width: auto;
    height: 48px;

    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: darkslateblue;
    text-shadow: none;           
}
.class_AbsFlexCenter.HeaderWebSrc {
    padding-left: 5px;
    width: auto;
    height: 100%;

    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: darkslateblue;
    text-shadow: none;           
}
.class_RelFlex.MultiInputWebSrc {
    outline: none;
    width: calc(100% - 180px);          
    height: 100%;
    box-shadow: var(--shadowIndent);
    background: rgba(51,51,51,0.1);
    border: 1px groove darkslateblue;

    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: darkslateblue;
    text-shadow: none;           
    outline: none;
}

.class_LoadSrc {
    font-family: var(--fontFamilyPoppins);
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    padding: 0;
    margin: 0;
    top: 3px;
    left: calc(100% - 183px);
    width: 180px;
    height: calc(100% - 6px);
    border: none;
    background: rgba(106, 90, 205, 0.9);
    background: Tan;
    
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none;  
}
.class_LoadSrc:hover {
    background: darkgreen;
    color: black;
}


.class_RelFlex.WrapAudio {
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    max-height: 400px;  
    border: 12px solid var(--colorYolk2);
    overflow: auto;
}
.class_RelFlex.BoxAudio {
    flex-wrap: wrap;
    align-items: flex-start;
    
    margin: 15px;
    width: 320px;
    height: 320px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    border: 4px solid transparent;
}
.class_RelFlex.BoxAudio:hover {
    border: 4px solid darkslateblue;
}
.class_RelFlex.HeaderAudio {
    font-family: var(--fontFamilyPoppins);
    width: 100%;
    height: 40px;
    
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: darkslateblue;
    text-shadow: none;  
}
.class_TheRel.BodyAudio {
    width: 100%;
    height: calc(100% - 40px);  
}
.class_TheRel.QuadAudio {
    width: 50%;
    height: 50%;                            
    border: 1px solid gray;
}
.class_TestAudio {
    font-family: var(--fontFamilyPoppins);
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    float: left;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: darkslateblue;
    text-shadow: none; 
}
.class_TestAudio:hover {
    background: darkslateblue;
    color: white;
}
.class_TestAudio.Active {
    background: blue;
    color: white;
}
.class_RelSpan.AudioLabel {
    font-family: var(--fontFamilyPoppins);
    width: 220px;
    height: 40px;
    background: darkslateblue;    
    border-radius: 8px;
    
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none; 
}
.class_AbsFlexCenter.DivTextBeginSearch {
    width: 100%;
    height: 100%;
    background: black;
    
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none; 
}











.class_RightFixed.FrameFixedLeft40 {
    top: 0;
    left: 0;
    padding: 10px;
    width: 40px;
    height: 40px;
}
.class_RightFixed.FrameFixedLeft50 {
    top: 0;
    left: 0;
    padding: 10px;
    width: 50px;
    height: 50px;
}
.class_RightFixed.FrameFixedLeft60 {
    top: 0;
    left: 0;
    padding: 10px;
    width: 60px;
    height: 60px;
}
.class_RightFixed.FrameFixedLeft70 {
    top: 0;
    left: 0;
    padding: 10px;
    width: 70px;
    height: 70px;
}

.class_RightFixed.FrameFixedRight40 {
    top: 0;
    left: calc(100% - 40px);
    padding: 5px;
    width: 40px;
    height: 40px;
}
.class_RightFixed.FrameFixedRight50 {
    top: 0;
    left: calc(100% - 40px);
    padding: 5px;
    width: 50px;
    height: 50px;
}
.class_RightFixed.FrameFixedRight60 {
    top: 0;
    left: calc(100% - 40px);
    padding: 5px;
    width: 60px;
    height: 60px;
}
.class_RightFixed.FrameFixedRight70 {
    top: 0;
    left: calc(100% - 40px);
    padding: 5px;
    width: 70px;
    height: 70px;
}

.class_TheRel.RelHeaderAuto100 {
    padding: 5px;
    width: 100%;
    height: auto;
    
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: black;
    text-shadow: none;  
}

.class_RelFlex.FolderDesc {
    width: 100%;
    height: 66px;

    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: black;
    text-shadow: none;  
}
.class_RelFlex.EditDesc2 {
    width: 60px;
    height: 60px;

    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: black;
    text-shadow: none;  
}
.class_RelFlex.RelHeader40 {
    padding: 5px;
    width: 100%;
    height: 40px;
    
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: black;
    text-shadow: none;  
    
    font: bold 28px arial, sans-serif;
    background-color: #565656;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}
.class_RelFlex.RelHeader50 {
    padding: 5px;
    width: 100%;
    height: 50px;
    
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: black;
    text-shadow: none;  
    
    font: bold 36px arial, sans-serif;
    background-color: #565656;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}
.class_RelFlex.RelHeader60 {
    padding: 5px;
    width: 100%;
    height: 60px;
    
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    color: black;
    text-shadow: none;  
    
    font: bold 48px arial, sans-serif;
    background-color: #565656;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}
.class_RelFlex.RelHeader80 {
    padding: 5px;
    width: 100%;
    height: 80px;
    
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    color: black;
    text-shadow: none;  
    
    font: bold 48px arial, sans-serif;
    background-color: #565656;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}
.class_RelFlex.RelHeader100 {
    padding: 5px;
    width: 100%;
    height: 100px;
    
    font-size: 48px;
    font-weight: 500;
    text-align: center;
    color: black;
    text-shadow: none;  
    
    font: bold 48px arial, sans-serif;
    background-color: #565656;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

.class_AbsFlexCenter.FlashDesc {
    font-family: var(--fontFamilyPoppins);
    width: 100%;
    height: 130px;
    background: linear-gradient(to bottom, #c1c1c1 0%, #ffffff 100%);
    border-bottom: 4px solid steelblue;
    padding-left: 40px;
    padding-right: 20px;

    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    box-shadow: 0px calc(var(--size) / 6) calc(var(--size) / 3) rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-duration) var(--transition-easing);

    font-size: 36px;
    font-weight: 600;
    text-align: center;
    color: steelblue;
    text-shadow: none;           
}

.class_TheAbs.ContShow {
    font-family: var(--fontFamilyPoppins);
    width: 100%;
    height: 100%;
    background: white;
}
.class_AbsFlexCenter.BackShow {
    width: 100%;
    height: 100%;
    background: white;
}
.class_TheRel.WrapOpen {
    padding: 30px;
    width: 660px;
    height: 620px;
    max-width: 100%;
    max-height: 100%;
    background: rgba(0,0,0,0.15);
    border-radius: 10px;
    overflow: auto;
}
@media only screen and (max-width: 1400px) {
    .class_TheRel.WrapOpen {width: 100%; height: 100%; border-radius: 0;}
}

.class_RelFlex.BodyOpen {
    flex-wrap: wrap;
    width: 100%;
    height: calc(100% - 130px);   
    overflow: auto;
}
.class_FrameOpen {
    box-sizing: border-box;
    position: relative;
    display: inline;
    float: left;
    
    padding: 5px;
    margin: 0;
    width: 135px;
    height: 130px;
}
.class_FrameAction {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    float: left;
    
    padding: 10px;
    margin: 0;
    margin-bottom: 0;
    width: 180px;
    height: 200px;
}
.class_FrameOpen:hover, .class_FrameAction:hover {
    border-radius: 6px;
    background: rgba(0,0,0,0.3);
    box-shadow: var(--shadowButton);
    transition: all 0.2s ease-in;
}
.class_YellowFolder {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    width: 125px;
    height: 125px;
}
.class_ClickYellow {
    font-family: var(--fontFamilyPoppins);
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    float: left;
    width: 100%;
    height: 100%;
    padding-top: 30px;
    padding-right: 10px;
    
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: black;
    text-shadow: none;  
}
.class_ClickAction {
    font-family: var(--fontFamilyPoppins);
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    float: left;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: rgb(51,51,51);
    
    text-shadow: none;  
}
.class_RelSpan.Tube0Click {
    width: calc(50% - 80px);
    height: 80px;
    background: transparent;          
}



.class_TheAbs.WrapPicsUpload {
    align-items: flex-start;
    border: 30px solid transparent;
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    overflow: auto;
}
.class_TheAbs.UserPicsInput {
    left: -99999;
}
#id_DropPicsZone {
    font-family: var(--fontFamilyPoppins);
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    float: left;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 150px;
    border: 10px dashed gray;
    border-radius: 16px;
    background: transparent;

    font-size: 18px;
    font-weight: 500;
    text-align: left;
    color: black;
    text-shadow: none;  
}
#id_DropPicsZone.DragOver {
    border: 10px dashed blue;
}
#id_DropPicsZone.Dropped {
    border: 10px dashed steelblue;
}
.class_RelFlex.LineDropZone {
    padding: 0;
    width: 100%;
    height: 100px;                        
}
.class_RelButton.OKSort {
    margin-left: 5px;
    margin-right: 5px;
    padding: 0;
    width: 70px;
    height: 70px;
    background: thistle;
    border: 6px solid darkviolet;
    border-radius: 6px;
}
.class_RelButton.FrameSlidesSave {
    margin: 0;
    width: 70px;
    height: 70px;
}
.class_RelButton.FrameViewShow {
    margin: 0;
    padding: 10px;
    width: 120px;
    height: 120px;                         
}
.class_RelFlex.SavingMsg {
    width: auto;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
    
    font-size: 18px;
    font-weight: 500;
    text-align: right;
    color: black;
    text-shadow: none;   
}
.class_AbsFlexCenter.CurrSlides, .class_AbsFlexCenter.CanAddSlides {
    font-family: var(--fontFamilyPoppins);
    
    top: 15px;
    left: 260px;
    padding-top: 20px;
    
    width: 105px;
    height: 105px;
    
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    color: rgba(0,0,0,0.6);
    text-shadow: none;      
    
    box-shadow: var(--shadowButton);
    border-radius: 50%;
}
.class_AbsFlexCenter.CurrSlides {
    left: 140px;
}
.class_TheAbs.HeaderSmall {
    padding-top: 20px;
    width: 100%;
    height: 100%;
    
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: rgba(0,0,0,0.6);
    text-shadow: none;   
}

.class_RelFlex.NumPics {
    font-family: var(--fontFamilyPoppins);
    top: 2px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0;
    padding-left: 15px;
    padding-right: 15px;
    width: auto;
    min-width: 62px;
    height: 58px;
    border: 2px solid steelblue;
    border-radius: 4px;
    
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: steelblue;
    text-shadow: none;  
}
.class_TheRel.PreviewPics {
    top: 0;
    margin: 0;
    padding: 15px;
    width: 100%;
    height: calc(100% - 250px);
    overflow: auto;
    
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    color: blue;
    text-shadow: none;                 
}
.class_RightFixed.FrameDropFolder {
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    border: none;
    width: 130px;
    height: 130px;  
}
.class_RightFixed.FrameMaximum {
    top: 5px;
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;  
}
.class_TheAbs.SpanFolderNum {
    font-family: var(--fontFamilyPoppins);
    padding-top: 56px;
    padding-right: 10px;
    width: 100%;
    height: 100%;
    
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: black;
    text-shadow: none; 
}
.class_RelButton.FrameHeaderFolder {
    padding: 0;
    width: 80px;
    height: 80px;  
}
.class_AbsFlexCenter.PreviewNumbering {
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.8);
    
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none;  
}
.class_DeleteThumb {
    font-family: var(--fontFamilyPoppins);
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    
    top: 0;
    left: calc(100% - 40px);
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: rgba(0,0,0,0.8);

    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none;  
}
.class_BlowThumb {
    font-family: var(--fontFamilyPoppins);
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    
    top: calc(100% - 40px);
    left: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: rgba(0,0,0,0.8);
    background-size: contain;

    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none;  
}
.class_TheAbs.BlowHeader {
    font-family: var(--fontFamilyPoppins);
    background: rgba(0,0,0,0.3);
    width: auto;
    height: auto;
    padding: 20px;
    padding-left: 50px;
    padding-right: 50px;
    
    font-size: 48px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-shadow: none;  
}


.class_AbsFlexCenter.EmoWrap {
    top: 0;
    left: 0;
    padding: 20px;
    width: 350px;
    height: auto;   
    max-height: 100%;
    background: rgba(0,0,0,0.3);
    overflow: auto;
}
.class_TheRel.EmoTop {
    width: 100%;
    height: auto;
}
.class_TheRel.EmoBody {
    width: 100%;
    height: auto;
}
.class_RelButton.FrameEmoBeg {
    margin: 0;
    padding: 0;
    width: 60px;
    height: 60px;
}

.class_TheAbs.ContGridSlides {
    background: lightgray;
}
.class_RelFlex.HeaderGridSlides {
    font-family: var(--fontFamilyPoppins);
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    
    width: 100%;
    height: 80px;
    
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    color: darkblue;
    text-shadow: none; 
}
.class_TheRel.BodyGridSlides {
    width: 100%;
    height: calc(100% - 80px);
    border: 20px solid transparent;
    overflow: auto;
}
.class_FrameGrid {
    box-sizing: border-box;
    position: relative;
    display: inline;
    float: left;
    top: 0;
    left: 0;
    width: 240px;
    height: 140px;
    margin: 8px;
    border: 1px solid lightgray;
    border-radius: 6px;
}
.class_FrameGrid:hover {
    border: 6px solid darkviolet;
}

.class_GridSlide {
    font-family: var(--fontFamilyPoppins);
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    background-size: contain;
}
.class_RelFlex.ShowColors3 {
    border: 1px solid black;
    border-radius: 4px;
    left: 0;
    width: 47%;
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 10px;
    margin-right: 2%;
    font-size: 16px;
    font-weight: 500;
    color: black;
}




.class_TheAbs.WrapSlideEdit {
    align-items: flex-start;
    border: 30px solid transparent;
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.class_RelFlex.TopEdit {
    width: 100%;
    height: 100px;                                
    border-bottom: 2px groove white;
}
.class_TheRel.BodyEdit {
    font-family: var(--fontFamilyPoppins);
    flex-wrap: wrap;
    align-items: flex-start;
    border: 10px solid transparent;
    width: 100%;
    height: calc(100% - 100px);   
    overflow: auto;
    
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    color: dodgerblue;
    text-shadow: none;  
}
.class_EditDelete {
    font-family: var(--fontFamilyPoppins);
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    float: left;
    
    top: 0;
    left: calc(100% - 40px);
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: rgba(0,0,0,0.8);

    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none;  
}
.class_RelButton.FrameYellowRep {
    margin: 0;
    padding: 0;
    width: 80px;
    height: 80px;
}
.class_RelButton.FrameYellowSave {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
}
.class_TheAbs.SpanFolderRep {
    font-family: var(--fontFamilyPoppins);
    padding-top: 36px;
    padding-right: 5px;
    width: 100%;
    height: 100%;
    
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: black;
    text-shadow: none;       
}
.class_RelFlex.FolderDescription {
    font-family: var(--fontFamilyPoppins);
    margin-left: 10px;
    padding: 0;
    padding-left: 60px;
    padding-right: 60px;
    width: 400px;
    height: 66px;
    background: var(--backIndent);
    box-shadow: var(--shadowIndent);
    border: 2px solid steelblue;
    border-radius: 6px;
    
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: black;
    text-shadow: none;      
}
.class_TheAbs.InputDesc {
    font-family: var(--fontFamilyArvo);
    background: whitesmoke;
    box-shadow: var(--shadowIndent);
    border: none;
    padding-left: 10px;
    width: calc(100% - 60px);
    height: 100%;
    outline: none;
    
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: black;
    text-shadow: none;          
}
.class_TheAbs.InputDesc:hover, .class_TheAbs.InputDesc:focus, .class_TheAbs.InputDesc:active {
    background: lightyellow;
}
.class_AbsFlexCenter.EditDesc {
    font-family: var(--fontFamilyPoppins);
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background: whitesmoke;
    box-shadow: none;
    
    font-size: 48px;
    font-weight: 500;
    text-align: center;
    color: black;
    text-shadow: none;      
}
.class_AbsFlexCenter.SaveDesc {
    font-family: var(--fontFamilyPoppins);
    top: 0;
    left: calc(100% - 60px);
    width: 60px;
    height: 100%;
    background: whitesmoke;
    box-shadow: none;
    
    font-size: 48px;
    font-weight: 500;
    text-align: center;
    color: black;
    text-shadow: none;      
}
.class_AbsFlexCenter.EditDesc:hover, .class_AbsFlexCenter.SaveDesc:hover {
    color: white;
    background: blue;
}







.class_AbsFlexCenter.WrapSave {
    font-family: var(--fontFamilyPoppins);
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: auto;
}
.class_RelFlex.TopSave {
    padding: 10px;
    width: 100%;
    height: auto;
}
.class_TheRel.RectSave {
    margin: 15px;
    width: 700px;
    max-width: 100%;
    height: 100px;
    border-radius: 12px;
    border: 2px solid whitesmoke;
}
.class_TheRel.RectText {
    margin: 15px;
    width: 700px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: none;
    
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-shadow: none; 
}
.class_RelFlex.StepSave {
    font-family: var(--fontFamilyPoppins);
    margin: 0;
    padding: 10px;
    width: 110px;
    height: 100%;
    
    font-size: 50px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-shadow: none; 
}
.class_RelFlex.InstrSave {
    padding: 10px;
    width: calc(100% - 220px);
    height: 100%;
    
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-shadow: none; 
}

#id_StepSave-1 {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f95289', endColorstr='#ff87b0', GradientType=1 );
    -webkit-box-shadow: inset 30px -50px 192px 0px rgba(233, 30, 99, 1);
    -moz-box-shadow: inset 30px -50px 192px 0px rgba(233, 30, 99, 1);
    box-shadow: inset 30px -50px 192px 0px rgba(233, 30, 99, 1);
    border: 1px solid rgba(233, 30, 99, 0.68);
    -webkit-background: var(--beautifulRed);
    -moz-background: var(--beautifulRed);
    background: var(--beautifulRed);
}
#id_StepSave-2 {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbe00', endColorstr='#ffe131', GradientType=1 );
    -webkit-box-shadow: inset 10px 10px 113px 0px rgba(255, 190, 0, 1);
    -moz-box-shadow: inset 10px 10px 113px 0px rgba(255, 190, 0, 1);
    box-shadow: inset 0 -70px 113px 0px rgba(255, 190, 0, 0.55);
    border: 1px solid rgba(255, 190, 0, 0.33);
    -webkit-background: var(--infinityYellow);
    -moz-background: var(--infinityYellow);
    background: var(--infinityYellow);
}
#id_StepSave-3 {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1 );
    -webkit-box-shadow: inset 35px -30px 102px 0px rgba(21, 101, 192, 0.71);
    -moz-box-shadow: inset 35px -30px 102px 0px rgba(21, 101, 192, 0.71);
    box-shadow: inset 35px -30px 102px 0px rgba(21, 101, 192, 0.71);
    border: 1px solid rgba(8, 110, 156, 0.54);
    -webkit-background: var(--infinityBlue);
    -moz-background: var(--infinityBlue);
    background: var(--infinityBlue);
}


.class_GlassWhiteButton {
    font-family: var(--fontFamilyPoppins);
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    float: left;
    
    
    margin: 0;
    padding: 10px;
    width: 110px;
    height: 100%;
    
    line-height: 1rem;
    padding: 0.5rem 1.5rem;
    background-color: #fafafa;
    background-image: linear-gradient(#ddd, #fafafa, #fff 50%, #e2e2e2 60%, #fff 95%);
    text-decoration: none;
    font-size: 60px;
    color: #333;
    border-radius: 0;
    border: 1px solid #bbb;
    border-top-color: #ccc;
    border-bottom-color: #999;
    border-right-color: #aaa;
    box-shadow: 0 4px 4px rgba(255, 255, 255, 0.6) inset, 0px -9px 10px -4px rgba(255, 255, 255, 1) inset, 0 -20px 1px -6px rgba(0, 0, 0, 0.125) inset;
    text-shadow: 0 1px 2px #fff, 0 0 3px #fff, 0 0 10px #fff;
    outline: none !important;
}
.class_AbsFlexCenter.SaveCoverButton {
    top: 0;
    left: calc(100% - 110px);
    
    margin: 0;
    padding: 10px;
    width: 110px;
    height: 100%;
    
    line-height: 1rem;
    padding: 0.5rem 1.5rem;
    background-color: #fafafa;
    background-image: linear-gradient(#ddd, #fafafa, #fff 50%, #e2e2e2 60%, #fff 95%);
    text-decoration: none;
    font-size: 28px;
    color: #333;
    border-radius: 0;
    border: 1px solid #bbb;
    border-top-color: #ccc;
    border-bottom-color: #999;
    border-right-color: #aaa;
    box-shadow: 0 4px 4px rgba(255, 255, 255, 0.6) inset, 0px -9px 10px -4px rgba(255, 255, 255, 1) inset, 0 -20px 1px -6px rgba(0, 0, 0, 0.125) inset;
    text-shadow: 0 1px 2px #fff, 0 0 3px #fff, 0 0 10px #fff;
    outline: none !important;
}
.class_GlassWhiteButton:hover, .class_AbsFlexCenter.SaveCoverButton:hover {
    background-color: #fff;
    background-image: linear-gradient(#f0f0f0, #fafafa, #fff 50%, #f0f0f0 60%, #fff 95%);
    border: 1px solid #999;
    border-top-color: #aaa;
    border-bottom-color: #777;
    border-right-color: #999;
    color: #222;
}
.class_GlassWhiteButton:focus, .class_AbsFlexCenter.SaveCoverButton:focus {
    box-shadow: 0 4px 4px rgba(255, 255, 255, 0.6) inset, 0px -9px 10px -4px rgba(255, 255, 255, 1) inset, 0 -20px 1px -6px rgba(0, 0, 0, 0.125) inset, 0 0 0 2px #5dbab9;
}
.class_GlassWhiteButton:active, .class_AbsFlexCenter.SaveCoverButton:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
    background-color: #e0e0e0;
    background-image: linear-gradient(#bbb, #f0f0f0, #eee 0.5, #ddd 0.6, #eee 0.95);
    border: 1px solid #bbb;
    border-top-color: #999;
    border-bottom-color: #eee;
    border-right-color: #999;
    color: #111;
}
 .class_GlassWhiteButton:focus:active, .class_AbsFlexCenter.SaveCoverButton:focus:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset, 0 0 0 2px #5dbab9;
}
.class_AbsFlexCenter.SaveCoverButton.Red {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f95289', endColorstr='#ff87b0', GradientType=1 );
    -webkit-box-shadow: inset 30px -50px 192px 0px rgba(233, 30, 99, 1);
    -moz-box-shadow: inset 30px -50px 192px 0px rgba(233, 30, 99, 1);
    box-shadow: inset 30px -50px 192px 0px rgba(233, 30, 99, 1);
    border: 1px solid rgba(233, 30, 99, 0.68);
    -webkit-background: var(--beautifulRed);
    -moz-background: var(--beautifulRed);
    background: var(--beautifulRed);
    color: Maroon;
}
.class_AbsFlexCenter.SaveCoverButton.Yellow {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbe00', endColorstr='#ffe131', GradientType=1 );
    -webkit-box-shadow: inset 10px 10px 113px 0px rgba(255, 190, 0, 1);
    -moz-box-shadow: inset 10px 10px 113px 0px rgba(255, 190, 0, 1);
    box-shadow: inset 0 -70px 113px 0px rgba(255, 190, 0, 0.55);
    border: 1px solid rgba(255, 190, 0, 0.33);
    -webkit-background: var(--infinityYellow);
    -moz-background: var(--infinityYellow);
    background: var(--infinityYellow);
    color: Sienna;
}
.class_AbsFlexCenter.SaveCoverButton.Blue {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1 );
    -webkit-box-shadow: inset 35px -30px 102px 0px rgba(21, 101, 192, 0.71);
    -moz-box-shadow: inset 35px -30px 102px 0px rgba(21, 101, 192, 0.71);
    box-shadow: inset 35px -30px 102px 0px rgba(21, 101, 192, 0.71);
    border: 1px solid rgba(8, 110, 156, 0.54);
    -webkit-background: var(--infinityBlue);
    -moz-background: var(--infinityBlue);
    background: var(--infinityBlue);
    color: MediumBlue;
}


.class_AbsFlexCenter.BoxCannotUndo {
    flex-wrap: wrap;
    padding-top: 120px;
    padding-bottom: 120px;
    border: 20px solid black;
    border-radius: 8px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: white;
    text-shadow: none;    
}
.class_RelFlex.RectCannotUndo {
    background: transparent;
    width: 100%;
    height: auto;
}
.class_RelButton.FrameCannotUndo {
    margin: 25px;
    padding: 10px;
    width: 100px;
    height: 100px;
    border-radius: 4px;
}
.class_RelButton.FrameOpenLeft {
    font-family: var(--fontFamilyPoppins);
    flex-wrap: wrap;
    margin-left: 20px;
    margin-right: 20px;
    width: 180px;
    height: auto;                                     
    
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: darkblue;
    text-shadow: none; 
}
.class_RelButton.FrameOpenRight {
    font-family: var(--fontFamilyPoppins);
    flex-wrap: wrap;
    margin-left: 20px;
    margin-right: 20px;
    padding: 15px;
    width: 180px;
    height: auto;                                    
    
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: darkblue;
    text-shadow: none; 
}
.class_RelButton.FrameShowFile {
    margin: 0;
    padding: 0;
    width: 140px;
    height: 140px;
}
.class_RightFixed.FramePermDelete {
    top: calc(100% - 90px);
    left: calc(100% - 80px);
    padding: 10px;
    width: 80px;
    height: 90px;
}
.class_RightFixed.FrameOpenFile:hover, .class_RightFixed.FramePermDelete:hover {
    background: gray;
}
.class_AbsFlexCenter.SpanDeleteNum {
    font-family: var(--fontFamilyPoppins);
    padding-bottom: 15px;
    width: 100%;
    height: 100%;
    
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: black;
    text-shadow: none;       
}
.class_TheAbs.SpanHeaderFolderNum {
    font-family: var(--fontFamilyPoppins);
    padding-top: 36px;
    padding-right: 5px;
    width: 100%;
    height: 100%;
    
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: black;
    text-shadow: none;       
}




.class_TheAbs.ContConvert {
    background: transparent;
}
.class_AbsFlexCenter.WrapConvert {
    flex-wrap: wrap;
    padding: 20px;
    border: 15px solid darkgray;
    border-radius: 14px;
    overflow: auto;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.class_RightFixed.FrameInitBeta {
    top: 3px;
    left: 3px;
    padding: 0;
    width: 80px;
    height: 80px;
}
.class_RelSpan.ConvHeader {
    font-family: var(--fontFamilyPoppins);
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    max-height: 100px;
    background: transparent;      
    
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-shadow: none;   
}
.class_RelSpan.ConvHeader2 {
    padding: 20px;
    padding-bottom: 0;
    width: 100%;
    height: 120px;
    background: transparent;      
    
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none;   
}
.class_RelSpan.ConvHeaderMsg {
    padding: 10px;
    width: calc(100% - 120px);
    height: auto;
    max-height: 100px;
    background: transparent;      
    
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none;   
}
.class_RelSpan.ConvZone {
    width: 100%;
    height: auto;
    background: transparent;                     
}
.class_RelButton.FrameConvert {
    margin: 0;
    padding: 5px;
    width: 80px;
    height: 80px;
    border-radius: 4px;
}
.class_RelButton.FrameConvert:hover {
    background: transparent;
}
.class_RelButton.FrameConvertActive {
    background: LightSalmon;
    margin: 15px;
    padding: 10px;
    width: 110px;
    height: 110px;
    border-radius: 8px;
}
.class_RelButton.FrameConvertActive:hover {
    background: Salmon;
}
.class_ClickInit {
    font-family: var(--fontFamilyPoppins);
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    height: 100%;

    font-size: 36px;
    font-weight: 600;
    text-align: center;
    color: rgba(0,0,255,0.6);
    text-shadow: none;  
}
.class_ClickInit:hover {
    background: rgba(0,0,255,0.3);
}
#id_DropFileZone {
    font-family: var(--fontFamilyPoppins);
    padding: 50px;
    width: 80%;
    height: 260px;
    border: 6px dashed white;
    border-radius: 0;
    background: rgba(255,255,255,0.1);
    
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: white;
    text-shadow: none;  
}
#id_DropFileZone.DragOver {
    border: 10px dashed cyan;
}
#id_DropFileZone.Dropped {
    border: 10px dashed SlateBlue;
}

.class_TheAbs.UserFileInput {
    left: -99999;
}

.class_AbsFlexCenter.MsgError {
    font-family: var(--fontFamilyPoppins);
    background: rgba(255,255,255,0.9);
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: black;
    text-shadow: none;  
}
.class_AbsFlexCenter.DontForget {
    font-family: var(--fontFamilyPoppins);
    background: lightsteelblue;
    border: 6px solid blue;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: blue;
    text-shadow: none;
}


.class_TheAbs.ContFrame {
    background: rgba(0,0,255,0.1);
    border: none;
}
.class_TheAbs.WrapFrame {
    width: 100%;
    height: 100%;
    background: rgba(0,0,255,0.1);
    border: none;
    overflow: auto;
}


.class_TheAbs.ViewFrame {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    border: none;
}


.class_TheAbs.CoverFrame {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background: transparent;
    border: none;
    overflow: hidden;          
}
.class_TheAbs.FullCoverFrame {
    width: calc(100% - 30px);
    height: 100%;
    background: transparent;
    border: none;
    overflow: hidden;          
}
.class_TheAbs.ContView {
    background: transparent;
}
.class_AbsFlexCenter.WrapView {
    flex-wrap: wrap;
    padding: 20px;
    border: 15px solid dodgerblue;
    border-radius: 14px;
    overflow: auto;
    background: rgba(30, 144, 255,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.class_RightFixed.FrameInitYellow {
    top: 0;
    left: 0;
    padding: 3px;
    width: 80px;
    height: 80px;
}
.class_RightFixed.FrameX {
    top: 0;
    left: calc(100% - 90px);
    padding: 3px;
    width: 80px;
    height: 80px;
}
.class_RightFixed.FrameScale {
    top: 0;
    left: calc(100% - 170px);
    padding: 3px;
    width: 80px;
    height: 80px;
}