
#txtCont.table{
    * { box-sizing: border-box; }
    lines { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
    line  { display: table-row; }
    token { display: table-cell; padding: 8px; border: 1px solid #ddd; vertical-align: top; word-break: break-word; white-space: normal; }
}


.txtCont{ 
    display:flex;
    background-color:black;
    color:white;
    overflow: auto;

    /*line{display:flex;}*/
    line{display:block;}
    #textBox, #lineNum {
        font-family: monospace;
        font-size: 0.9rem;
        background-color:black;    
    }

    #lineNum{
        padding:0px 0.6rem;
        text-align: end;
        display: flex;
        flex-direction: column;
    }

    .token-ln{ color: gray ;}    /*line num tokens */


    .token-w { color:blue ;}
    .token-s { color:red ;}

    /*line{ display:block;}*/
    token{ white-space: pre; }
}

.txtCont.theme-monoco, #txtBox.theme-monoco {
    token { color: #ccc ;}   
    /*.token-c { color: #6A9955 ;}   /*token-comment*/
    /*.token-s { color: #CE9178 ;}     /*token-string*/
    
    .token-d { color:yellow  ;}    /*digit*/
    .token-s { color:orange  ;}     /*token-string*/
	.token-c { color:green ;}
    
    
    
    .token-w0 { color: #569Cd6 ;}    /*token= [const fun if in etc...] */
    .token-w1 { color:  #C586C0 ;}    /*token =[for if else continue...] */
    .token-w2, .token-w { color: #9CDCFE ;}    /*var*/
    .token-w3 { color: #4FC1FF ;}    /*const var */       
    .token-w4 { color: #DCDCAA ;}    /* fnName() */
    .token-w5 { color: #9CDCFE ;}    /* key: */
    /*.token-w { color: gray ;}*/


    /*token for bracket*/
    .token-b1 { color: #FFD700 ;}    /* fnName() */
    .token-b2 { color:  #C586C0 ;}   /*token =[for if else continue...] */
    .token-b3 { color: #569Cd6 ;}    /* for if */
    .token-b4 { color: #4FC1FF ;}    /*const var */       
    .token-b5, .token-b { color: #9CDCFE ;}    /*var*/

    
}
