.work-flow-box * {
     box-sizing: border-box;
 }

 .work-flow-box {
     border: 1px dashed #666666;
     border-radius: 4px;
     margin: 0.5rem 0;
     padding: 0.5rem;
     color: #333333;
     font-size: 12px;
     box-sizing: border-box;
 }

 .work-flow-card-list {
     display: flex;
     flex-wrap: wrap;
 }

 .work-flow-card {
     padding: 0.5rem;
     transition: all 0.3s;
 }

 .work-flow-card-content {
     padding: 0.5rem 1rem 25px 1rem;
     background: #f0f0f0;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
     width: 100%;
     height: 100%;
     border-radius: 4px;
     position: relative;
 }

 .work-flow-card:hover .work-flow-card-content {
     background: #d3e0ea;
 }

 .work-flow-card.active .work-flow-card-content {
     background: #d3d3d3;
 }

 .work-flow-card-body {
     margin: 0.5rem 0;
     line-height: 25px;
     color: #515151;
 }

 .work-flow-card-header {
     font-size: 14px;
     margin-bottom: 0.5rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .work-flow-card-footer {
     margin-top: 0.5rem;
     color: #5cb85c;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 25px;
     line-height: 25px;
     padding: 0 1rem;
 }

 .work-flow-card-header .title {
     color: #337ab7;
     text-decoration: underline;
     font-weight: bold;
     cursor: pointer;
 }

 .work-flow-card-content .chk {
     position: absolute;
     top: 0;
     right: 0.5rem;
     width: 16px;
     height: 16px;
     background-color: transparent;
     -webkit-appearance: none;
     border: none;
     outline: none;
     vertical-align: middle;
     background: url('./images/check-box-outline-blank.png') 0 0 no-repeat;
 }

 .work-flow-card-content .chk:checked {
     background: url('./images/check-box-outline.png') 0 0 no-repeat;
 }

 .work-flow-card-content .node-icons {
     position: absolute;
     bottom: 0.5rem;
     ;
     right: 0.5rem;
 }