.StartUpWin_Inner {
    top:0em;
    display: inline-block;
    text-align: center;
    width: 98%;
    border: 0.2em groove #01C7D4;
    background-color: #F2E5FB;
    font-size: 1.3em;
    border-radius: 0.5em;
    min-height: 25em;
}

/* --------------------------------------------------- __STARTADMINMENU ---------- */
.LoginMenu_TestingWin {
    
    position: absolute;
    width: 40em;
    height: 30em;
    background-color:white;
    font-size: 2em;
     
}

.LoginMenu_MenuItem {  margin: 1em;}

.LogInCont{ 
    font-size: 2em;

}

/*---------------------------------------------------!StartUpWin------*/
@scope( .StartUpWin ) {

    :scope{
        position: relative;
        top: -16px;
        font-size: 1.3em;
        padding: 2em  1em;
        text-align: center;
        height: 200vh;
        width: 100vw;
        background-color: white;
        
    }

    .NoWebInd{
        position: absolute;
        top: 0.3em;
        left: 49%;
        width: 1em;
        height: 1em;
        background-color: transparent;
        border: 0.1em solid black;
        border-radius: 50%;
       
        background-color: blue;

    }
    
    .CloseBtn { display: inline-block; font-size: 0.7em; }

    .GroupBtn {
        position:relative;
        vertical-align: top;
        display: inline-block;
        font-size: 1.3em;
        -webkit-text-stroke: 0.02em;
        margin: 0 0.4em 0 0;

        .GroupBtnText{
            font-size: 0.8em;
            position:relative;
            top: -2em;
            letter-spacing: -0.1em;
        }
    
    } 

    .StartUpWin_Inner{ height:1000px; background-color:#C3CAFC; }
    
    .StartUpWin_TopCont{
    
        display: flex;
        flex-flow: row nowrap;
        justify-content:space-between;
        padding: 0em 1em;
    
    }

    .StartUpWin_LeftTopCont{
        display: inline-block;
        width: 8em;
        text-align: center;
        font-size: 2em;
        
        
    
        .StartUpWin_InterEngPic {  display: inline-block; height: 2.2em; }
        
        .StartUpWin_Header_LeftTop {  display: inline-block; font-size: .5em;  text-align: center; }
        
    }

     .StartUpWin_CenterTopCont{
    
        display: inline-block;
        width: 11em;
        text-align: center;
    
    
        & .LoaderCont {
            
            display: inline-block;
            border: 0.1em solid black;
            border-radius: 0.2em;
            background-color: white;
            width: 10em;
        }
    
        & .LoaderBar {
            background-color: blue;
            height: 0.3em;
            width: 0;
            border-radius: 0.5em;
        }
    
        & .StartUpWin_VersionDisp { display: inline-block; }
       
    }

     .StartUpWin_RightTopCont{
        display: inline-block;
        text-align: right;
        width: 16em;
    
        & .StartUpWin_TitleWMLogo {
            
            display: inline-block;
            position: relative;
            top: 0.2em;
            font-size: 2em;
            height: 1.7em;
            width: 1.7em;
            background-image: url( '../Pics/IconPics/EngMagicThai.png' );
            
        }
    
        & .StartUpWin_Title{ display: inline-block;  font-size: .5em;  }
        
    }

     .StartUpWin_BookClubBtn{
        position: relative;
        top: -2em;
        display: inline-block;
        height: 4.2em;
        width: 4.2em;
        margin-right: 0.5em;
        background-image: url( '../Pics/IconPics/BookClub.png' );
        
    }

    .StartUpWin_MiddleCont{
        display: flex;
        flex-flow: row nowrap;
        justify-content:center;
        padding: 0em 1em;
        margin-top: 1em;
    }

     .StartUpWin_LowerCont{
        display: flex;
        flex-flow: row nowrap;
        justify-content:center;
        padding:  1em;
    
        & .StartUpWin_AllPeoplePic{ display: inline-block; width: 30em; }
    
    }

      .CopyRight{
            text-align:center;
            font-family: "IE_Norm";
            margin: 2em;
    }

     .LogInWin_CodeBtn{
        display: inline-block;
        width: 2em;
        height:2em;
        border-radius: 50%;
        padding: 0.4em;
        text-align:center;
        margin: 0.1em;
        background-color: snow;
        font-size: 1em;
        
    }

    .StartUpWin_AppNameText { font-size: 2em; border: 0.1em solid gray; padding: 0.25em; border-right: 2.3em solid gray; }
    
    .StartUpWin_TitleCont { font-size: 2em right; margin: 0.2em 0.3em 0 0.2em;  }
    
    
    
} /* END scope( .StartUpWin ) */

 @scope( .StartUpWin_AppBtn_AllHolder ){
    
    :scope{
        display: inline-block;
        border-radius: 0.2em;
        margin: 2em 0em 0em 0em;
        padding: 1em 1em 4.5em 1em;
        font-size:0.5em;
        background-color: #ffffff78;
        border-radius: 2em;
        border: 0.4em groove #01C7D4;
    }

      .StartUpWin_AppBtn {
        position: relative;
        height: 8em;
        width: 8em;
        border-radius: 50%;
        vertical-align: top;
        border: .05em solid gray;
        margin:2em 0.6em 0 0;
        background-size: 75%;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
    
        &.CurrentLatest{  border-color:#8d8d34; border-width: 0.4em; }

        &.GameTarget{ border: 0.4em solid red; };

        &.RepeatTarget{ outline: 0.4em solid blue; outline-offset:0.2em; }
          
       &.WriteGameTarget:after{
            content:"";
            width: 2.5em;
            height: 2.5em;
            position: absolute;
            top: -2.5em;
            left:0em;
            border: 0.4em solid blue;
            border-radius: 0.6em;
            background-image: url( '../Pics/IconPics/WriteGameTarget.png' );
            background-repeat: no-repeat;
            background-position: center;
            background-size: 108%;
        }  
          
    }

    .ProgressInfo_Cont { bottom: -1.3em; font-size: 3em; }
        
    .StartUpWin_AppBtn_0 { background-image: url( '../Pics/IcPics/LetterMagic.svg' );  }
    
    .StartUpWin_AppBtn_1 {  background-image: url( '../Pics/IcPics/WordMagic.svg' ); }
    
    .StartUpWin_AppBtn_2 { background-image: url( '../Pics/IcPics/SpellMagic.svg' ); }
    
    .StartUpWin_AppBtn_3 {   background-image: url( '../Pics/IcPics/SentenceMagic.svg' ); }
    
    .StartUpWin_AppBtn_4 {  background-image: url( '../Pics/IcPics/StoryMagic.svg' ); }
    
    .StartUpWin_AppBtn_5 { background-image: url( '../Pics/IcPics/ConversationMagic.svg' );}
    
    .StartUpWin_AppBtn_6 { background-image: url( '../Pics/IcPics/WritingMagic.svg' ); }
    
    .StartUpWin_AppBtnCont{ display:inline-block; height:16em; }

    .MedalCircle{
        position: absolute;
        display: inline-block;
        left: -1em;
        bottom: -0.2em;
        width: 1.3em;
        height: 1.3em;
        border-radius: 50%;
        border: 0.07em dotted gray;
        background-color: #ecebeb;
    
        &.MedalStarted{ border: 0.1em solid gray; background-color: white; }
    
        &.MedalFinished{ border: 0.13em solid black; }
    
        &.isFinished{ background-color: teal; }
    }

    .MedalCirclesCompleted{
    
        background-image: url( '../Pics/IcPics/Star.svg' ); 
        background-size:80%;
        background-repeat: no-repeat;
        background-position: center top;
    
        & .MedalCircle{ visibility:hidden;  }
       
    }
    
    .Btn_MedalCont{
        display:inline-block;
        position: relative;
        width: 100%;
        top:9.2em;
        text-align: center;
    
    }
    
    .Btn_MedalCont_Star{
        width: 4.2em;
        height: 4.2em;
        border-radius:50%;
        border: 0.3em solid pink;

    }

     
     
 }  /* END scope( .StartUpWin_AppBtn_AllHolder ) */     

.StartUpWin .MedalCircle{ position:unset; margin: 0.05em;  font-size: 1em; }
    
.StartUpWin_AppTitle {  margin: .2em 0 .6em 0;}

.GroupListCont{
    font-size: 1.2em;
    font-family: "IE_Norm";

    .MainTit{
        text-align: center;
        font-size: 2em;
    }
    
    .ItemLineCont{
        display: grid;
        grid-template-columns: 4em  3em 3em 6em 6.5em  4em ;
        background-color: black;
        grid-column-gap: 0.1em;
        padding: 0.1em 0 0.1em 0.1em;
        margin: 0.1em 0 0 0;
    }
  
    .ItemLineTitleCont .Item{
        text-align: center;
        font-size: 1.2em;
    }

    .ItemLineTitleCont{
        background-color: transparent; 
        text-align: center;
        height: 1.5em;
        margin: 0 0 0.5em 0;

    }
    
    .Item{
        text-align: left;
        background-color: white;
        padding-left: 0.1em;
        line-height: 1.5em;
    }
 }

.StarCont{
    text-align: center;
    margin: 0 0 2em 0;

    .StarPic{
        display: inline-block;
        height: 10em;
        width: 10em;
    }  
    
}

.DialogCont{
    position: relative;
    
    .BtnCont{
     position:absolute;
     display: block;
     width:95%;
     bottom:1em;
     text-align: center;
    }
}