.MainMenuList_Cont {
    min-height: 100%;
    background-color: #f3efef;
    
    .MenuList_Cont { position: relative;}
    
    .MenuList_InnerCont {
        display: inline-block;
        width: 100%;
        display: flex;
        padding-bottom: 12em;
        padding-top:7em;
        max-height:110vh;
        overscroll-behavior: none;
        overflow: scroll;
    }
        
}
    
.MenuList_AllItemsCont {
    
    display: inline-block;
    position: relative;
    flex-grow: 9;
    padding: 0.3em;
    border-left: 0.45em solid #01C7D4;
    border-radius: 1em;
    height:100%
}
    
.MenuList_Revise_Cont {
    
    margin-top:4em;
    display: inline-block;
    text-align:center;
    

    .MenuList_ReviseText{
        font-size:1.5em;
        margin: 0.4em 0em 0em 0em;
        font-weight:1000;
        
    }
}
    
.MenuList_BreadCrumbsCont {
    position:relative;
    font-size: 1em;
    display: inline-block;
    margin: 0 0.2em 0 0em;
    padding: 1em 0 0 0.6em;
    width: 6.7em;
    vertical-align: top;
    text-align: center;

}

.MainGameSubPic{
    display: inline-block;
    height: 5em;
    width: 5em;
    margin: 0 0.4em 0 0.2em;
    background-size:80%;
    background-repeat:no-repeat;
    background-position: 50% 0%;
    border: 0.05em solid black;
    border-radius: 0.3em;

    &.Type_MainGamePic{ background-size:cover; }
} 
    
.MenuList_Item_EucationBtns_Cont{
    pointer-events:none;
    position:relative;
    top:0em;
    display:inline-block;
    vertical-align:top;
    border: 0.15em dotted black;
    padding: 0.3em 0.6em 0.8em 0.2em;
    border-radius: 1em;
    background-color:#e8e7e7;
    cursor:none;

}

.MenuList_Item_EucationOneBtn_Cont{
    display:inline-block;
    position:relative;
    font-size: 0.8em;
    margin-left: -0.4em;
    pointer-events: all;
}
    
.MenuList_Item_EucationBtn{
    display:inline-block;
    height:2em;
    width:2em;
    border-radius: 50%;
    background-color: white;
    text-align:center;
    font-size:2em;
    padding-top:0.4em;
    margin: 0em 0.3em;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url( '../Pics/IcPics/Knowledge.svg' );
    background-position: center center;

    &.CurrentLatest{ background-color: lightGreen; border:0.1em solid black; }
             
    .MenuList_Item_EucationBtnCode{
        position: absolute;
        bottom: -0.5em;
        right: 0.8em;
        display: inline-block;
        font-size: 0.7em;
        font-weight: 600;
        border-radius: 50%;
        background-color: var( --Colr_Icon );
        padding: 0em 0.4em;
        z-index: 10;
        border: 0.05em solid lightgray;
    }
    
}
     

      
.MenuList_ItemArrow, .MenuList_ItemGameArrow{
        position: absolute;
        display: inline-block;
        top: 0.8em;
        right: 0.6em;
        cursor: default;    
        font-size: 1.2em;
        width: 1.5em;
        height: 1.5em;
        background-image: url( '../Pics/IcPics/ArrowRightSubMenu.svg' );
    
        &.MenuList_ItemGameArrow{ background-image: url( '../Pics/IcPics/ArrowToGame.svg' ); }
}

.MenuList_BreadCrumbs_Item { text-align: center; }

.MenuList_BreadcrumbsAppPic_Cont {
    display: inline-block;
    border-radius: 50%;
    padding-left: 0;
    padding-top: 0;
    padding-right: 3em;
    
    .Pic0 { background-image: url( '../Pics/IcPics/LetterMagic.svg' ); }

    .Pic1 {  background-image: url( '../Pics/IcPics/WordMagic.svg' ); }

    .Pic2 { background-image: url( '../Pics/IcPics/SpellMagic.svg' ); }

    .Pic3 { background-image: url( '../Pics/IcPics/SentenceMagic.svg' ); }

    .Pic4 {  background-image: url( '../Pics/IcPics/StoryMagic.svg' );}
}
    
.MenuList_BreadcrumbsAppPic {
    display: inline-block;
    height: 3.5em;
    width: 3.5em;
    border-radius: 50%;
    margin-left: 1em;

    &.RED{ outline: 0.3em solid red; outline-offset: 0.3em;}

    &.BLUE{ outline:  0.3em solid blue; outline-offset: 0.3em; }
}

.MenuList_NavBar {
    position: fixed;
    display: flex;
    flex-flow: row nowrap;
    height: 7.4em;
    width: 100%;
    top: 0;
    z-index: 100;
    padding: 1em 0.7em 0 1em;
    border-bottom: 0.2em solid #A9B2F9;
    background-color:#efddf1;

    &.IsTeacher{ background-color: #fefec9 }
       
    .MenuList_NavBar_Title{

        position: relative;
        top: 0.5em;
        display:inline-block;
        font-size: 1.7em;
        text-align: left;
        margin: 0em 0 0 1em;
        font-family: "IE";
        max-width:calc( 80% - 6.5em);

        .MenuList_ItemText_Cont{ font-size: 1em; }
    }
    
    .MenuList_NavBar_BackBtn{ font-size: 1.5em; margin-left: 1.5em; }

  
    
}


.MenuListItem_LeftCont{
    display: inline-block;
    height:100%;
    text-align: center;
    margin: 0 1em; 
    vertical-align: top;
}

.MenuList_ItemIconCont { display: block; position: relative;}

.MenuList_ItemIcon { display: in line-block; height:2.5em; width:2.5em; }   



.MenuList_Item_Num {
    
    font-family: "IE";
    position:relative;
    left: 0em;
    width: 1.4em;
    display: inline-block;
    font-size: 1.6em;
    font-weight: 600;
    z-index: 10;
    border-radius: 50%;
 
    &.CursorPointer{ cursor: pointer }

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

    &.RepeatTarget{ outline: 0.15em solid blue; outline-offset: 0.1em;  }
} 

.MenuList_BreadCrumbs_ItemNum{
    position:relative;
    left: -0.1em;
    font-size: 2.3em;
}
.MenuList_Breadcrumbs_IconArrowCont {
    
    text-align:center;

    .MenuList_Breadcrumbs_IconArrow {

        display:inline-block;
        position:relative;
        left: -0.15em;
        height: 2.2em;
        width:2.2em;
        
    }

    .MenuList_Breadcrumbs_IconArrowR{ left: 0.7em;  top:0.5em  }

}

.MenuList_Item_InnerCont {
    
    position: relative;
    display: inline-block;
    min-width: 50%;
    vertical-align:top;
    
  
}

.MenuList_ItemCont {
    
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    margin: 0;

}

.MenuList_Item {
    position: relative;
    margin: 0.1em 0.3em 0.2em 0.1em;
    padding: 0.3em 0.3em 0.3em 0;
    border-radius: 0.8em;
    flex-grow: 1;
    min-height: 3.9em;
    background-color: white;
    overflow:visible;
    border:0.2em solid #A9B2F9;
    font-size: 1.3em;

    &.ButtonOn{
       box-shadow: inset 0.2em 0.2em 0.4em -0.2em #A9B2F9;
       background-color: #efddf1;
       border:0.3em solid lightgray;
    }

    &.CurrentLatest{ background-color:LightGreen; }

    &.DoingEducation{ background-color:#cbc9c9; pointer-events:none;}

     &.IsTeacher{background-color: #fefec9;}

    &.UnReached{
        cursor: auto;
        pointer-events: none;
        box-shadow:none;
        border-color:transparent;
        background-color:white;

        & .MenuList_Item_EucationBtns_Cont{
            background-color: white;
            pointer-events: none; 
            opacity: 0.2;
        }

        &.UnFinishedEducation{
            cursor: auto;
            pointer-events: none;
            box-shadow:none;
            border-color:blue;
        }

    
    }
    
}
    
.MenuList_ItemText_ForPic {
    display: inline-block;
    position: relative;
    vertical-align: top;
    font-weight: 600;
    min-width: 0.5em;
    margin: 0 1em 0 0.5em;
    font-size: 0.7em;
}
    
.MenuList_ItemText_Cont {
    display: inline-block;
    position: relative;
    vertical-align: top;
    top: 0.2em;
    margin: 0 0 0 0.2em;
    height: 100%;
       
}
    
.MenuList_Item_InnerLeftCont{
    display: inline-block;

    .SentenceDisp_WordMainCont{ vertical-align: top; }

}