/*---------------------------------------------------!NavBar------*/
.NavBar_IndicatorAndBarCont {
    position: relative;
    top: -0.5em;
    display: inline-block;
    border: 0.1em dotted blue;
    border-radius: 0.4em;
    height: 6.2em;
    background-color: #ffffff85;
    padding: 0.55em 0em 4.3em 0em;
}

.CmdBtn {
    
    position:relative;
    font-size: 1.2em;
    top:0.6em;
    vertical-align:top;
    margin: 0 .3em 0 .5em;
    width: 4.3em;
    border-radius: 1em;
    padding-left: 0.3em;
    background-image:  url( "../Pics/IconPics/Play.png" );
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    &.IsLocked {  background-image:  url( "../Pics/IconPics/CardPlay.png" ); }
    
    &.IsTeacher {  background-color: yellow; }

    &.QnIsActive{ border: 0.2em solid red; }
    
}

.CmdBtn_WrongAnswerNoProgress { background-image:  url( "../Pics/IconPics/PlayNoProg.png" ); }

.PercDisp  {
    
    position: absolute;
    top: 1.9em;
    display: inline-block;
    right: 2em;
    cursor: default;    
    font-size: 1.1em;
    font-family: "IE";
    text-align: center;
    color:black;
    
}

.HundredPerc::after{
    position:absolute;
    content:"";
    height: 100%;
    width: 100%;
    top: 0;
    left:0;
    background-image: url( "../Pics/IconPics/Tick.png" );
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ZoomCont{
    position:absolute;
    top: 0.4em;
    display: inline-block;
    width: 11em;
    top: 4em;
    right: -12em;
    
    .PlusPic, .MinusPic{
        position:relative;
        display: inline-block;
        font-size: 0.6em;
    }

    .PercCont{
        position:relative;
        top: -0.2em;
        height: 1em;
        display:inline-block;
        vertical-align: top;
        width: 2.2em;
        height: 2.2em;
        background-color: white;
        font-size: 1em;
        text-align: center;
        margin: 0 0.6em 0 0.6em;
        padding-top:0.6em;

        .PercText{ position:relative; top: 0.4em; font-size: 0.8em; }

        .ZoomText{
            position:absolute;
            left:0;
            top: 0.7em;
            font-size: 0.5em;
            text-align: center;
            width: 100%;
        }
    }
}

.NavBarMenuPathCont {
    display: inline-block;
    position: absolute;
    top: 0em;
    left: 0em;
    max-height: 1em;
    vertical-align: top;
    margin-left: 0.4em;
    overflow:visible;

    .NavBarMenuPath_Desc{ position:relative; left: 0em; font-size: 0.6em; }

    .NavBarMenuPathText{
        position:relative;
        left:-0.4em;
        font-size:0.4em;
        white-space:nowrap;
        font-weight:1000;
    }
    
    .NavBarMenuPath_Text {
        position: relative;
        left: -0.2em;
        top: 0.1em;
        font-size: 1em;
        display: inline-block;
        text-align: center;
        font-weight:1000;
    }
 }

.NavBar_InfoCont {
display: inline-block;
position:relative;
top: 0.4em;
left: 0em;
    
    .NavBar_IndicateCont {
        position:relative;
        top:0.7em;
        height: 3.3em;
        width: 3.3em;
        background-repeat: no-repeat;
        background-size:contain;
    }
    
} /* END NavBar_InfoCont */

.NavBar {
    position: fixed;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    top: 0;
    height: 4.8em;
    border-bottom: 0.15em solid lightgray;
    background-color: #efddf1;
    padding: .6em 0 0 0;
    overflow: visible;
    z-index:1000;
} 

.NavBar_GamePage {
    font-size: 1.2em;
    height: 6.4em;
       
    &.NavBar_GamePage_Up{  transform: translateY(-100%);  }

    &.IsLatestGame{ background-color:lightGreen; }
    
    &.GameTarget{ border-bottom:0.3em solid red; }

    &.RepeatTarget{ border-bottom:0.3em solid blue; }

    &.IsTeacher{ background-color: #fefec9 }
        
    
    &.GameTarget.RepeatTarget{
        outline: 0.3em solid red;
        border-bottom:0.3em solid blue;
    };

    .NavBar_LeftCont { position:relative; top:-0.5em; padding: 0.5em 0.4em 0 0.4em; }

 .NavBar_BarsCont {
    position: relative;
    display: inline-block;
    margin: 0.3em 1.2em 0.4em 0em;
    top: -0.3em;
    pointer-events: none;
 
    .Bar_Title {
        position: relative;
        top: -0.3em;
        display: inline-block;
    }

    .InnerBar_Cont {
        position: relative;
        display: inline-block;
        border-radius: .33em;
        width: 9em;
        height: 0.6em;
    }

    .Part_BarCont {
        position: relative;
        top: -0.4em;
        
        & .Part_InnerBar_Text{ font-size:0.6em; vertical-align:top;  }

        & .InnerBar_Cont{ height: 0.9em; margin-top:0; }

        & .Slider_DivisionMarkerDigit{  font-size: 0.8em; top: -0.15em; }
        
    }

    .Question_BarCont {
        position: relative;
        top: 0.3em;
        left:0.1em;

         & .Question_InnerBar_Text{
            position: relative;
            top: 0.2em;
            font-size:0.6em;
            vertical-align:top;
        }
    }

    .NavBar_BarsCont_LearningCont {
        position: absolute;
        top: 1.6em;
        left: 2.5em;
        text-align: center;
        padding-left: 1em;
    }
}

.Slider_Inner {
    position: relative;
    width: 100%;
    height: 100%;
    border: .1em solid gray;
    cursor: pointer;
    border-radius: 0.3em;
}

.Slider_Cursor {
    position: absolute;
    top: 0em;
    left: 2em;
    height: 1.4em;
    width: 1.4em;
    cursor: pointer;
    background-image: url( "../Pics/IconPics/SliderCursor.png" );
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    &.Slider_Cursor_CanModify{ background-image: url( "../Pics/IconPics/SliderCursorMov.png" ); }

    .Slider_Cursor_Digit {
        position: relative;
        font-size: .8em;
        color: black;
        left: -.03em;
        top: 0.7em;
        text-align: center;
        font-weight:1000;
    }
}

.Slider_MaxBar {
    position: absolute;
    left: -1;
    top: .1em;
    height: 0.1em;
    background-color: green;
    border-radius: 0 .25em .25em 0;
    border: .05em solid white;
    border-left: 0;
}

.Slider_DivisionMarker {
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: white;
    box-shadow: inset -0.1em 0 0 0 black;
    height: 100%;
    text-align: center;
    z-index:-2;

    &.Col0{ background-color: #bcc3f9; }
    
    &.Col1{ background-color: #FFCEFF; }

    &.Col2{ background-color: #8bfefe ; }

    &.Col3{ background-color: #f5ddac; }
   
    &.NoProg{ background-color: red; }

    &.Col4{ background-color: #4f4ffa; }
    
}

.Slider_DivisionMarkerDigit {
    position: absolute;
    display: inline-block;
    top: -0.25em;
    right: -1.3em;
    font-size: 0.8em;
    min-width: 1.5em;
    background-color: black;
    color: white;
    border-radius: 50%;
    padding: 0.1em 0.1em;
    text-align: center;
    height: 1.2em;
}

.NavBar_BarsCont_CanModify{
    pointer-events: auto;
    
    .Slider_Inner { border: .1em solid blue; }
    
}

.NavBarGamePage_GameTitle{
    position: absolute;
    width: 13em;
    text-align: left;
    font-size: 0.8em;
    top: 0.1em;
    left: 0.8em;
}

.GamePage_BackBtn{
    position:relative;
    font-size: 1.3em;
    margin-left: 0.7em;
    top: 0.3em;
    vertical-align:top;
}
.GamePage_CardHelpBtn{
    font-size: 1.1em;
    position:relative;
    margin-left: 0.5em;
    top: 0em;
    vertical-align:top;
}

.GamePage_RepeatScoreCont{
    display: block;
    position:relative;
    position:relative;
    margin: 1.1em 0 0 0.5em;
    top: -1em;
    vertical-align:top;
    text-align: center;
}

.GamePage_RepeatErrorCont{ 
    display: inline-block;
    height: 1.3em;
    width: 2.5em;
    position:relative;
    padding: 0.2em 0 0 0;
    margin: 0.2em 0 0 0;
    text-align: center;
    font-size: 1em;
    -webkit-text-stroke: 0.03em;
   
}

.GamePage_RepeatTimeCont{
    display: inline-block;
    height: 1.4em;
    width: 3.3em;

    
    .TimerText{
        font-size: 1em;
        padding: 0.1em 0 0 0;
        margin: 0.1em 0 0 0;
        text-align: center;
        -webkit-text-stroke: 0.03em;
    }
        
}

.NavBarWordGameBtn, .NavBarSentGameBtn{
    font-size: 1.1em;
    position:relative;
    margin-left: 0.5em;
    top: 0em;
    vertical-align:top;

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

/* END NavBar */