.codeVIEW {
    position: absolute;
    left:0;
    top:0;
    width:calc(100% - 1px);
    height:calc(100% - 1px);
    /* border:2px solid #900; */
    padding: 0px;
    overflow: auto;
    background:#FFF;
    border-radius: 0 0 10px 10px;
    visibility: hidden;
}

.codeClient {
    font-size: 18px;
    font-family: 'Courier New', Courier, monospace;
    position: relative;
    counter-reset:lno;
    /* overflow-y: auto; */
    width:calc(100% - 4px);
    height: auto;
    /* border:2px solid #444; */
    white-space: normal;
    color:#111;
    background: #FFF;
}

#ruler {
    position:absolute;
    /* visibility: hidden; */
    white-space: pre;
    z-index: -100;
}

@keyframes csrBlink
{
    from{border-left: 2px solid #000;};
    50%{border-left: 0px solid #000;};
    to{border-left: 2px solid #000;};
}
@-webkit-keyframes csrBlink
{
    from{border-left: 2px solid #000;};
    50%{border-left: 0px solid #000;};
    to{border-left: 2px solid #000;};
}
.codeClient iCursor{
    position: absolute;
    animation: csrBlink 1s infinite;
    -webkit-animation: csrBlink 1s infinite; /* Safari 与 Chrome */
}
.codeClient iCursor::before{
    content: "CURSOR";
    opacity: 0;    
}
.codeClient li {
    display: block;
    width:calc(100% - 1px);
    line-height:25px;
    white-space: pre;
}
.codeClient li::before {
    counter-increment:lno;
    content: counter(lno);
    width: 35px;
    color:#daa;
    margin-right: 5px;
    padding-right: 5px;
    border-right: 1px solid #333;
    background: #fff;
    text-align: right;
    float: left;
}
.codeClient li:nth-of-type(odd){
    background:#FFF;
}
.codeClient li:nth-of-type(even){
    background:#EEE;
}
.codeClient li LNC {
    position: relative;
    width: auto;
    height: calc(100%);
}
.codeClient tab {
    margin-left: 21px;
}
/****************************************************/
.codeClient .keyword {
    color: #68A;
}
.codeClient .includeSYS{
    color: #040;
}
.codeClient .includeUSR{
    color: #040;
}
.codeClient .import{
    color: #A0A;
}
.codeClient .comment{
    color: #060;
}
/****************************************************/
.codeClient .moduleREF,.moduleDEF,.TorVREF{
    color: #0A0;
}
.codeClient .flowREF,.flowDEF {
    color: #484;
}
.codeClient .structDEF,.structREF {
    color: #0A0;
}
/****************************************************/
.codeClient .typeREF{
    color: #44F;
}
.codeClient .memberDEF {
    color: #880;
}
.codeClient .memberREF {
    color: #880;
}
/****************************************************/
.codeClient .INP{
    color: #080;
}
.codeClient .inputDEF{
    color: #4A4;
}
.codeClient .OUTP{
    color: #008;
}
.codeClient .outputDEF {
    color: #A44;
}
.codeClient .inputREF{
    /* font-weight: bold; */
    font-style: italic;
    color:#4A4;
}
.codeClient .outputREF{
    /* font-weight: bold; */
    font-style: italic;
    color:#A44;
}
/****************************************************/
.codeClient .leftCtrlFlow {
    color: green;
}
.codeClient .leftDataFlow{
    color: #8c0;
}
.codeClient .rightCtrlFlow {
    color: #0a0;
}
.codeClient .rightDataFlow{
    color: #80c;
}
.codeClient .constDEF,.constREF {
    color: #A80;
}
.codeClient .varianceDEF,.varianceREF {
    color: #117;
}
/****************************************************/
/* .codeClient .error{
    background: radial-gradient(circle at 5px -3px, transparent 4px, #F00 4px,#F00 5px, transparent 5px) repeat-x,
    radial-gradient(circle at 5px 14px, transparent 4px, #F00 4px,#F00 5px, transparent 5px) repeat-x;
    background-size: 10px 10px;
    background-position: -5px calc(100% + 8px), 0 calc(100% - 2px);
} */
.codeClient .error{
    text-decoration: underline wavy red;
}

.grid{
    background: radial-gradient(circle at 15px 15px, transparent 0px, #ccc 0px,#ccc 1px, transparent 1px);
    background-size: 20px 20px;
}