/*///////////////////////////////////////*/
@keyframes streamAnimation
{
    from {
        stroke-dasharray: 0 100;
    }
    to {
        stroke-dasharray: 96 100;
    }
}
@keyframes streamAnimation2
{
    from {stroke-opacity:1}
    to {stroke-opacity: 0}
}
@keyframes rectAnimation
{
    from {height:0%}
    to {height:100%;}
}
@keyframes rectAnimation2
{
    from {fill-opacity:1}
    to {fill-opacity: 0}
}
@keyframes inpAnimation2
{
    from {
        stroke-opacity:1;
        fill-opacity:1;
    }
    to {
        stroke-opacity:0;
        fill-opacity: 0;
    }
}
@keyframes outpAnimation2
{
    0% {
        stroke:#CC4422;
        fill:#CC4422;
    }
    25% {
        stroke:#CC4422;
        fill:#CC4422;
    }
    100% {
        stroke:#111;
        fill: #111;
    }
}
/*///////////////////////////////////////////*/

.blkFLOW {
    z-index: 100;
    /* display: block; */
    width: calc(100% - 8px);
    height: calc(100% - 39px);
    /* background: #888; */
    border: 4px solid #353;
    border-radius: 0 0 15px 15px;
    position: relative;
}
.svgVIEW {
    visibility: hidden;
    position:absolute;
    left:0px;
    top:0px;
    background:#c2bbbb;
    fill:#333;
    fill-opacity: 1;
    width:100%;
    height:100%;
    border-radius: 0 0 10px 10px;
    z-index:200;
    overflow: hidden;
}
.svgVIEW[select="1"] {
    position:absolute;
    visibility: visible;
    z-index:60;
}
.svgVIEW[pickup="3"] {
    cursor:-webkit-grab;
    cursor:-moz-grab;
    /* cursor:grab; */
    cursor: grabbing;
}
.svgVIEW[pickup="2"] {
    cursor: crosshair;
}
/********************************************/
.cls-label{
    overflow:visible;
}
.cls-label-name{
    fill:#221;
    fill-opacity: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-anchor: middle;
}
.cls-label-seg{
    fill:#666;
    fill-opacity: 1;
    pointer-events: none;
}
.cls-label-type
{
    fill:#55F;
    fill-opacity: 1;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 15px;
    text-anchor: middle;
    cursor: default;
}
/*///////////////////////////////////////////*/
.cls-member-in{
    /* fill:#f00;
    fill-opacity: 0; */
    stroke-width: 2px;
    stroke: #000;
    stroke-opacity: 1;
}
.cls-member-out{
    fill:#333;
    fill-opacity: 1;
    stroke-width: 1px;
    stroke: #000;
    stroke-opacity: 1;
}
.cls-member-border{
    fill:#aaa;
    fill-opacity: 1;
    stroke: #333;
    stroke-width: 2px;
    stroke-opacity: 1;
}
.cls-member-rm
{
    font-size:5px;
    fill:#CAA;
}
.cls-member-rm:hover
{
    font-size:15px;
    fill:#F00;
    cursor: pointer;
}
/*///////////////////////////////////////////*/
.cls-struct {
    /* fill: none; */
    fill-opacity: 0;
    stroke: #224;
    stroke-width: 2;
    stroke-opacity: 0;
}
/* .cls-struct[select="1"] {
    cursor: pointer;
    filter:url(#fltON);
} */
.cls-struct:hover {
    cursor: pointer;
    filter:url(#fltON);
}
.cls-struct-border{
    fill:#333;
    fill-opacity: 1;
    stroke: #333;
    stroke-width: 0px;
    stroke-opacity: 0;
}
.cls-struct-border:hover{
    cursor: pointer;
}
.cls-struct-body{
    fill:#aaa;
    fill-opacity: 1;
    stroke: #333;
    stroke-width: 0px;
    stroke-opacity: 0;
}
.cls-struct-body:hover{
    cursor: pointer;
}
.cls-struct[select="1"],.cls-struct:hover[select="1"] {
    cursor: pointer;
    stroke-width: 2px;
    filter:url(#fltS);
}
/*///////////////////////////////////////////*/
.cls-module {
    fill: none;
    fill-opacity: 0;
    stroke: #333;
    stroke-width: 2px;
    stroke-opacity: 0;
}
.cls-module[select="1"],.cls-module:hover[select="1"] {
    cursor: pointer;
    stroke-width: 2px;
    filter:url(#fltS);
}
.cls-module:hover {
    cursor: pointer;
    stroke-width: 2px;
    filter:url(#fltON);
}
.cls-module-border{
    fill:#aaa;
    stroke: #333;
    stroke-width: 2px;
    fill-opacity: 1;
    stroke-opacity: 1;
}
.cls-module-body{
    fill:#aaa;
    fill-opacity: 1;
    stroke-opacity: 0;
}
/*///////////////////////////////////////////*/
.cls-port
{
    fill:none;
    fill-opacity: 1;
    stroke:none;
    stroke-width: 0;
    stroke-opacity: 0;
}
.cls-port-port
{
    stroke: #111;
    fill:#aaa;
    stroke-width: 2px;
    stroke-opacity: 1;
}
.cls-port-port[isoutput="1"]
{
    stroke: #111;
    fill:#111;
    stroke-width: 2px;
    stroke-opacity: 1;
}
.cls-port-port[select]
{
    stroke-opacity: 0;
    fill:#c44;
    cursor: pointer;
    filter:url(#fltON);
}
.cls-port-port[a="1"]
{
    /* stroke:#CC4422; */
    fill:#CC4422;
}
.cls-port-port[a="1"][isoutput="1"]
{
    stroke:#CC4422;
    fill:#CC4422;
}
.cls-port-port[a="2"]
{
    /* stroke:#CC4422; */
    fill:#CC4422;
    animation: inpAnimation2 3s
}
.cls-port-port:hover
{
    stroke:#c22;
    cursor: pointer;
    filter:url(#fltON);
}
/*///////////////////////////////////////////*/
.cls-stream{
    fill:none;
    stroke:#000;
    stroke-width:4;
    stroke-opacity:1;
    marker-end:url(#arrow);
}
.cls-stream-ani{
    fill:none;
    fill-opacity: 0;
    stroke:#CC4422;
    stroke-width:6;
    stroke-linecap: round;    
    stroke-opacity:0;
    marker-end:url(#arrow);
    stroke-dashoffset: 0;
}
.cls-stream-ani[a="1"]{
    stroke-opacity:1;
    stroke-dasharray: 96 100;
    animation: streamAnimation;
    animation-duration: 1.2s;
}
.cls-stream-ani[a="2"]{
    stroke-dasharray: 96 100;
    animation: streamAnimation2 3s;
}
.cls-stream[select="1"],.cls-stream:hover[select="1"] {
    stroke:#c22;
    filter:url(#fltS);
}
.cls-stream:hover {
    stroke:#c22;
    filter:url(#fltON);
    /* stroke-dashoffset: 0;
    animation: streamAnimation 5s; */
    /* animation-duration: 5s;  */
}
.cls-stream[ctrlsign="C"]{
    stroke:#C00;
    stroke-width:2;
    stroke-dasharray: 3 3;
}
.cls-stream[ctrlsign="C"]:hover {
    stroke:#22c;
    filter:url(#fltON);
}
/*///////////////////////////////////////////*/
/*nouse{*/
.cls-view-body {
    width: 100%;
    height: 100%;
    /* overflow: auto; */
    /* border:1px solid #0F0; */
    /* border-radius: 0 0 10px 10px; */
}
.cls-flow:hover
{
    cursor: pointer;
}
/*}nouse*/

.cls-view-client {
    fill:none;
    fill-opacity: 0;
    width:100%;
    height:100%;
    position: absolute;
    left:0px;
    top:0px;
    background: #8c9;
    stroke: #333;
    stroke-width: 2px;
    stroke-opacity: 0;
    border-image-width: 0;
}
.cls-view-client[select="1"]{
    cursor: crosshair;
}
.cls-view-text-input
{
    visibility:hidden;
    /* visibility:visible; */
    position:absolute;
    left:0;
    top:0;    
}
.cls-struct-view-new{
    padding-top: 8px;
    font-size: 160px;
    position: absolute;
    z-index: 200;
    color:#CCC;
}
.cls-struct-view-new:hover{
    color:#900;
}
.clsconst {
    fill: #333;
    fill-opacity: 0;
    stroke: #222;
    stroke-width: 1;
    stroke-opacity: 0;
}
.clsconst:hover {
    cursor: pointer;
    stroke-opacity: 1;
    filter:url(#fltON);
}

.clsmname{
    fill:#C44;
    fill-opacity: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    pointer-events: none;
}
.clsmtype{
    fill:#55C;
    fill-opacity: 1;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 12px;
    pointer-events: none;
}
.clsinput{
    position:absolute;
    font-size:20px;
    border: 0;
    text-align: center;
}
.clsruler{
    position:absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    border: 1px solid #F00;
    visibility: hidden;
}
.clsimg{
    position:absolute;
    width:50%;
    height:50%;
    left:0;
    top:0;
    visibility: hidden;
    border: 1px solid red;
}
.cls-rect-ani{
    fill:none;
    /* width:100%;
    height:100%; */
}
.cls-rect-ani[a="1"] {
    fill:#CC4422;
    fill-opacity: 1;
    width:100%;
    /* transition: height 2s; */
    animation: rectAnimation 0.8s;
}
.cls-rect-ani[a="2"] {
    fill:#CC4422;
    /* fill:#C0C; */
    fill-opacity: 1;
    /* width:100%;
    height: 100%; */
    /* transition: height 2s; */
    animation: rectAnimation2 4s;
}