@scope( .WordGrammar_AllCardCont ){
    
    
    
    
    
    
    position:relative;
    font-size: 1em;
    text-align: center;
    padding: 0.2em 0.2em;
    

    .Grammar_CardCont{
            background-color:white; 
            margin-top: 0.5rem;
            box-shadow:0.1em 0.2em 0.2em #c5c5c5;
        
        &.BigCard{ font-size: 140%; }
    
        &.SmallCard{ margin-top: 0.2em; font-size: 60%; }
    
        .GramDot{
            display:inline-block;
            position:absolute;
            top: 0em;
            left: 0em;
            height: 0.2em;
            width: 0.2em;
            background-color: #7676fb;
            border-radius: 50%;
            z-index: 900;
            
            
            
            
    
            &.UnUsed{ border: 0.04em solid #7676fb; background-color: transparent; }
            
        }
    
         & .TextHNHB{
            display:inline-block;
            position:absolute;
            top: 0.4em;
            left: 0.5em;
            width:0.1em;
            height: 3em;
            word-wrap:break-word;
            line-height: 0.7em;
            font-size: 0.8em;
        }
    
    }

    .GramDot.CardDot{
        font-size: 1.8em;
        top: .13em;
        left: -0.2em;
    
        &.Right{ left: 0.17em; }
        
    }

    .WordCardCont {
        position:relative;
        vertical-align: top;
        height: 3.9em;
        width: 6.8em;
        margin: 0em .2em 0.1em 0em;
        padding: .15em;
        text-align: center;
    }


    .GrammiconHighlight{
        display: inline-block;
        position:absolute;
        left: 0em;
        right: 0em;
        margin-left: auto;
        margin-right: auto;
        bottom: -0.6em;
        width: 4.2em;
        height: 3em;
        border-radius: 10%;
        border: 0.15em dotted blue;
        
    }

    .GrammiconCont {
        display:inline-block;
        position: relative;
        top: 0.63em;
        font-size: 2.2em;
        margin: 0 0.2em 0 0.2em;
        width: 1em;
        height: 1em;
        
        .GrammiconText{ font-family: "Grammicons"; } 
    }
    
    .WordTextCont{
        position:relative;
        font-size: 1.3em;
        top: -1.8em;
        -webkit-text-stroke-width: 0.02em;
        z-index:0;
        text-align: center;

        .WordText{
            display: inline-block;
            padding: 0.05em;
            border: 0.1em dotted transparent;
            border-radius: 0.2em;
            letter-spacing: -0.04em;

            &.HighLight{ border: 0.1em dotted blue; };
            
        }
        
    }

    .Grammar_PosMark {
        font-size:1.2em;
        position: absolute;
        display:inline-block;
        font-family: "Grammicons";
        line-height: 0.6em;
        padding-bottom: 0.2em;

        &.PosMarkError{ border-radius: 50%; background-color: #ff000052; }

        &.PosMarkErrorWhite{ background-color: transparent; color: #bebebec2; }
    }

    .LevelMarker{ display:inline-block; position:absolute; font-family: "Grammicons"; }

    .PosMark_D1{ top : 1.82em; }
    
    .PosMark_D2 { top : 2.39em; } 
    
    .PosMark_VP { top : 0.25em; } 
    
    .PosMark_VS { top : 0.7em; } 
    
    .PosMark_V1 { top : 1.1em; }
    
    .PosMark_VN, .PosMark_TO, .PosMark_HN, .PosMark_ToN  { top : -0.18em; }
    
    .PosMarkLeft { left: 0.15em; }
    
    .PosMarkRight { right: 0.1em; }

    .PosMarkDot{
        position: absolute;
        top:0em;
        right:-0.09em;
        color: #7676fb;

        &.Right{ right: 0.32em; }
               
    }
      
    .PunctnCardCont, .InfoCardCont{
        position:relative;
        vertical-align: top;
        height: 3.9em;
        width: 2.4em;
        margin: 0em 0.3em 0em 0em;
        text-align: center;
        background-color: #f7f2fd;
    }

    .PunctnCardCont{ height:3.9em; margin-left: -0.2em; width: 1.7em; }

    .BreakLine{
        position: absolute;
        top: 0.1em;
        left: 0.1em;
        height: 3.7em;
        border-radius: 0%;
        border: 0.05em dashed black;
        width: 0em;
    }

     .InfoCardCont .MakeBreakLine{ left: 1.1em; }
    
    .InfoCardCont{
        &.IsLeft{ margin-right: 0.4em; }
            
        &.IsRight{margin-right: 0em;/* margin-left: 0.2em; */}

        &.Error{ background-color: pink; }

        & .GrammiconHighlight{ width: 2.5em; }
        
        & .GrammiconCont{top: 0.7em;}

        .GrammiconText{ position:relative; left: -0.2em; }
    }

    .PunctnTextCont{
        position:relative;
        font-size: 1.7em;
        top: -0.1em;
        -webkit-text-stroke-width: 0.02em;
        
    }

    .InfoTextCont{
        position:relative;
        top: 2.2em;
        font-size: 1.6em;
        width:1em;
        font-family: "Grammicons";
        text-align:center;
        -webkit-text-stroke-width: 0.02em; 
     
    }

    .HandPicCont{
        position: absolute;
        top: 0.13em;
        left: 0;
        right:0;
        display: inline-block;
        height: 90%;
        width: 90%;
        background-repeat:no-repeat;
        background-size: contain;
        background-position: left;
    }

   

    .ConnectPic{
        position: absolute;
        top: 2.5em;
        left: 1em;
        display: inline-block;
        height: 0.8em;
        width: 0.8em;
        background-repeat:no-repeat;
        background-size: contain;

        &.Right{ left: unset; right: 1.2em; }
    }

    .SVGCont{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    
    .SVGLine{
        stroke: #0808fb7d;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-dasharray: 1000; /* Set to the path's length */
        stroke-dashoffset: 1000; /* Set to the path's length */
        animation: draw 2s linear forwards;
    
        &.Finished{ stroke-dasharray: 8;  animation: none; }
    
        &.Faint{ stroke: #b1b1f5; stroke-dasharray: 20; stroke-width: 2; }
    }
    
    @keyframes draw{ from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

} /*  END WordGrammar_AllCardCont  */
   


 .KBCont{
        
    display: inline-block;
    border: 0.1em solid black;
    border-radius: 0.2em;
    padding: 0.1em;
    margin: 0.1em;
    max-width: 800px;

     .FamilyCont{

         display: inline-block;
         
     }
       
    .KBPosMarkKeyLeftCont{

        display: inline-block;
     
        .KBKey{
            border: 0.1em solid lightgray;
            /* border-right : 0.1em solid black; */
        } 
     
    }

     .KBPosMarkKeyRightCont{

        display: inline-block;
          .KBKey{
            
            border: 0.1em solid lightgray;
            border-left : 0.1em solid black;
            
        } 
        
    }
    
    .KBKey{
    
        display: inline-block;
        border: 0.1em solid #666;
        border-radius: 0.2em;
        padding: 0.1em;
        margin: 0.1em;
        line-height: 0.8em;
        width: 1em;
        text-align: center;

   }
    
   .KBKeyText{

       font-family: "Grammicons"
        
    }

}