.sourcecode {
    font-size: 12px;
    font-family: 'Courier New', Courier, monospace;
    position: relative;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    border:2px solid #444;
    padding: 0px;
    white-space: pre;
    background: #FFF;
    overflow: hidden;
    /* overflow-y: hidden; */
    /* visibility: hidden; */
}

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

#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;};
}
.code iCursor{
    position: absolute;
    animation: csrBlink 1s infinite;
    -webkit-animation: csrBlink 1s infinite; /* Safari 与 Chrome */
}
.code iCursor::before{
    content: "CURSOR";
    opacity: 0;    
}
.code line {
    display: block;
    width:calc(100%);
    /* white-space: pre; */
    /* border-bottom:1px solid #f0f0f0; */
}
.code line::before {
    counter-increment:lno;    
    content: counter(lno);
    width: 30px;
    color:#daa;
    margin-right: 10px;
    border-right: 1px solid #333;
    padding: 0 5px;
    background: #fff;
    text-align: right;
    float: left;
}
.code line:nth-child(odd){
    background:#FFF;
}
.code line:nth-child(even){
    background:#EEE;
}
.code line LNC {
    position: relative;
    width: auto;
    height: calc(100%);
}
.code tab {
    margin-left: 21px;
}
/****************************************************/
.code .keyword {
    color: #55F;
}
.code .includeSYS{
    color: #0a0;
}
.code .includeUSR{
    color: #0a0;
}
.code .import{
    color: #F55;
}
/****************************************************/
.code .moduleREF,.moduleDEF,.TorVREF{
    color: #484;
}
.code .flowwREF,.flowDEF {
    color: #484;
}
.code .structDEF,.structREF {
    color: #448;
}
/****************************************************/
.code .typeREF{
    color: #080;
}
.code .memberDEF {
    color: #050;
}
.code .memberREF {
    color: #050;
}
/****************************************************/
.code .INP{
    color: #080;
}
.code .inputDEF{
    color: #0c0;
}
.code .OUTP{
    color: #008;
}
.code .outputDEF {
    color: #00c;
}
.code .inputREF{
    font-weight: bold;
    color:#080;
}
.code .outputREF{
    font-weight: bold;
    color:#008;
}
/****************************************************/
.code .leftCtrlFlow {
    color: green;
}
.code .leftDataFlow{
    color: #8c0;
}
.code .rightCtrlFlow {
    color: #0a0;
}
.code .rightDataFlow{
    color: #80c;
}
.code .varianceDEF,.varianceREF {
    color: #50a;
}
/****************************************************/
/* .code .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);
} */
.code .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;
}